@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/collection/components/category-filter/category-filter.css

@@ -0,0 +1,1982 @@
+/*
+ * 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-block;
+  height: 2rem;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host button {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 0.5rem;
+}
+:host ix-spinner {
+  margin-right: 0.25rem;
+}
+:host ix-icon {
+  margin-right: 0.25rem;
+}
+:host .content {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:host .content-start {
+  width: 100%;
+}
+:host .icon {
+  pointer-events: none;
+}
+
+:host(.disabled) {
+  cursor: default;
+}
+
+:host .btn-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-danger, :host .btn-danger.focus, :host .btn-danger:focus-visible {
+  background-color: var(--theme-btn-danger--background);
+  color: var(--theme-btn-danger--color);
+  --ix-button-color: var(--theme-btn-danger--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-danger--border-color);
+  border-style: solid;
+}
+:host .btn-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled):active, :host .btn-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-danger--border-color--hover);
+  background-color: var(--theme-btn-danger--background--hover);
+  color: var(--theme-btn-danger--color--hover);
+}
+:host .btn-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger:not(.disabled):not(:disabled):active, :host .btn-danger:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-danger--border-color--active);
+  background-color: var(--theme-btn-danger--background--active);
+  color: var(--theme-btn-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-danger.disabled, :host(.disabled) .btn-danger:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-danger--border-color--disabled);
+  background-color: var(--theme-btn-danger--background--disabled);
+  color: var(--theme-btn-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-danger--color--disabled);
+}
+
+:host .btn-outline-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-outline-danger, :host .btn-outline-danger.focus, :host .btn-outline-danger:focus-visible {
+  background-color: var(--theme-btn-outline-danger--background);
+  color: var(--theme-btn-outline-danger--color);
+  --ix-button-color: var(--theme-btn-outline-danger--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-danger--border-color);
+  border-style: solid;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-outline-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-outline-danger--border-color--hover);
+  background-color: var(--theme-btn-outline-danger--background--hover);
+  color: var(--theme-btn-outline-danger--color--hover);
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):active, :host .btn-outline-danger:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-outline-danger--border-color--active);
+  background-color: var(--theme-btn-outline-danger--background--active);
+  color: var(--theme-btn-outline-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-outline-danger.disabled, :host(.disabled) .btn-outline-danger:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-outline-danger--border-color--disabled);
+  background-color: var(--theme-btn-outline-danger--background--disabled);
+  color: var(--theme-btn-outline-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-danger--color--disabled);
+}
+
+:host .btn-invisible-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-invisible-danger, :host .btn-invisible-danger.focus, :host .btn-invisible-danger:focus-visible {
+  background-color: var(--theme-btn-invisible-danger--background);
+  color: var(--theme-btn-invisible-danger--color);
+  --ix-button-color: var(--theme-btn-invisible-danger--color);
+  border-color: transparent;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-invisible-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-btn-invisible-danger--background--hover);
+  color: var(--theme-btn-invisible-danger--color--hover);
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):active, :host .btn-invisible-danger:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-btn-invisible-danger--background--active);
+  color: var(--theme-btn-invisible-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-invisible-danger.disabled, :host(.disabled) .btn-invisible-danger:disabled {
+  pointer-events: none;
+  background-color: var(--theme-btn-invisible-danger--background--disabled);
+  color: var(--theme-btn-invisible-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-danger--color--disabled);
+}
+
+:host .btn-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-primary, :host .btn-primary.focus, :host .btn-primary:focus-visible {
+  background-color: var(--theme-btn-primary--background);
+  color: var(--theme-btn-primary--color);
+  --ix-button-color: var(--theme-btn-primary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-primary--border-color);
+  border-style: solid;
+}
+:host .btn-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-primary.selected:not(.disabled):not(:disabled):active, :host .btn-primary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-primary--border-color--hover);
+  background-color: var(--theme-btn-primary--background--hover);
+  color: var(--theme-btn-primary--color--hover);
+}
+:host .btn-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-primary:not(.disabled):not(:disabled):active, :host .btn-primary:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-primary.disabled, :host(.disabled) .btn-primary:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-primary--border-color--disabled);
+  background-color: var(--theme-btn-primary--background--disabled);
+  color: var(--theme-btn-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-primary--color--disabled);
+}
+
+:host .btn-outline-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-outline-primary, :host .btn-outline-primary.focus, :host .btn-outline-primary:focus-visible {
+  background-color: var(--theme-btn-outline-primary--background);
+  color: var(--theme-btn-outline-primary--color);
+  --ix-button-color: var(--theme-btn-outline-primary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-primary--border-color);
+  border-style: solid;
+}
+:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-outline-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active, :host .btn-outline-primary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-outline-primary--border-color--hover);
+  background-color: var(--theme-btn-outline-primary--background--hover);
+  color: var(--theme-btn-outline-primary--color--hover);
+}
+:host .btn-outline-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-primary:not(.disabled):not(:disabled):active, :host .btn-outline-primary:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-outline-primary--border-color--active);
+  background-color: var(--theme-btn-outline-primary--background--active);
+  color: var(--theme-btn-outline-primary--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-outline-primary.disabled, :host(.disabled) .btn-outline-primary:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-outline-primary--border-color--disabled);
+  background-color: var(--theme-btn-outline-primary--background--disabled);
+  color: var(--theme-btn-outline-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-primary--color--disabled);
+}
+
+:host .btn-invisible-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-invisible-primary, :host .btn-invisible-primary.focus, :host .btn-invisible-primary:focus-visible {
+  background-color: var(--theme-btn-invisible-primary--background);
+  color: var(--theme-btn-invisible-primary--color);
+  --ix-button-color: var(--theme-btn-invisible-primary--color);
+  border-color: transparent;
+}
+:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-invisible-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-btn-invisible-primary--background--hover);
+  color: var(--theme-btn-invisible-primary--color--hover);
+}
+:host .btn-invisible-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-primary:not(.disabled):not(:disabled):active, :host .btn-invisible-primary:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-btn-invisible-primary--background--active);
+  color: var(--theme-btn-invisible-primary--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-invisible-primary.disabled, :host(.disabled) .btn-invisible-primary:disabled {
+  pointer-events: none;
+  background-color: var(--theme-btn-invisible-primary--background--disabled);
+  color: var(--theme-btn-invisible-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-primary--color--disabled);
+}
+
+:host .btn-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-secondary, :host .btn-secondary.focus, :host .btn-secondary:focus-visible {
+  background-color: var(--theme-btn-secondary--background);
+  color: var(--theme-btn-secondary--color);
+  --ix-button-color: var(--theme-btn-secondary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-secondary--border-color);
+  border-style: solid;
+}
+:host .btn-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-secondary.selected:not(.disabled):not(:disabled):active, :host .btn-secondary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-secondary--border-color--hover);
+  background-color: var(--theme-btn-secondary--background--hover);
+  color: var(--theme-btn-secondary--color--hover);
+}
+:host .btn-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-secondary:not(.disabled):not(:disabled):active, :host .btn-secondary:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-secondary.disabled, :host(.disabled) .btn-secondary:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-secondary--border-color--disabled);
+  background-color: var(--theme-btn-secondary--background--disabled);
+  color: var(--theme-btn-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-secondary--color--disabled);
+}
+
+:host .btn-outline-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-outline-secondary, :host .btn-outline-secondary.focus, :host .btn-outline-secondary:focus-visible {
+  background-color: var(--theme-btn-outline-secondary--background);
+  color: var(--theme-btn-outline-secondary--color);
+  --ix-button-color: var(--theme-btn-outline-secondary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-secondary--border-color);
+  border-style: solid;
+}
+:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-outline-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-outline-secondary--border-color--hover);
+  background-color: var(--theme-btn-outline-secondary--background--hover);
+  color: var(--theme-btn-outline-secondary--color--hover);
+}
+:host .btn-outline-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-secondary:not(.disabled):not(:disabled):active, :host .btn-outline-secondary:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-outline-secondary--border-color--active);
+  background-color: var(--theme-btn-outline-secondary--background--active);
+  color: var(--theme-btn-outline-secondary--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-outline-secondary.disabled, :host(.disabled) .btn-outline-secondary:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-outline-secondary--border-color--disabled);
+  background-color: var(--theme-btn-outline-secondary--background--disabled);
+  color: var(--theme-btn-outline-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-secondary--color--disabled);
+}
+
+:host .btn-invisible-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-invisible-secondary, :host .btn-invisible-secondary.focus, :host .btn-invisible-secondary:focus-visible {
+  background-color: var(--theme-btn-invisible-secondary--background);
+  color: var(--theme-btn-invisible-secondary--color);
+  --ix-button-color: var(--theme-btn-invisible-secondary--color);
+  border-color: transparent;
+}
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-invisible-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-btn-invisible-secondary--background--hover);
+  color: var(--theme-btn-invisible-secondary--color--hover);
+}
+:host .btn-invisible-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):active, :host .btn-invisible-secondary:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-btn-invisible-secondary--background--active);
+  color: var(--theme-btn-invisible-secondary--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-invisible-secondary.disabled, :host(.disabled) .btn-invisible-secondary:disabled {
+  pointer-events: none;
+  background-color: var(--theme-btn-invisible-secondary--background--disabled);
+  color: var(--theme-btn-invisible-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-secondary--color--disabled);
+}
+
+:host {
+  min-width: 5rem;
+}
+
+/*
+ * 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+.dropdown-group {
+  margin: 0.687rem;
+  display: block;
+  position: relative;
+  width: 21.562rem;
+  border-radius: 0.25rem;
+  background-color: #f8f9fa;
+  border: solid 0.062rem rgba(0, 0, 0, 0.25);
+}
+.dropdown-group .dropdown-group-title {
+  display: block;
+  position: relative;
+  font-size: 0.875rem;
+  text-align: left;
+  margin: 0.937rem 0 1.25rem 0.937rem;
+}
+.dropdown-group .dropdown-group-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 11.562rem;
+  margin: 0.937rem 0 0.937rem 0.937rem;
+}
+.dropdown-group .dropdown-group-content > * {
+  margin-bottom: 1rem;
+}
+
+.dropdown-group-submit {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0.687rem 0 0.687rem;
+}
+
+.dropdown-menu {
+  position: absolute;
+  background-color: var(--theme-menu--background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+  border: var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);
+  border-radius: var(--theme-menu--border-radius);
+  max-width: 100vw;
+  padding: 0.25rem 0;
+  transition: background-color var(--theme-default-time);
+  box-shadow: var(--theme-menu--box-shadow);
+}
+.dropdown-menu.xl > .dropdown-item {
+  height: 2.5rem;
+  line-height: 2.187rem;
+}
+
+.dropdown-header {
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  color: var(--theme-menu-header--color);
+  padding: 0 1rem;
+}
+
+.dropdown-buttons {
+  display: flex;
+  padding: 0.25rem 0.5rem;
+}
+.dropdown-buttons ix-icon-button + ix-icon-button {
+  margin-inline-start: 0.5rem;
+}
+
+.dropdown-item {
+  display: flex;
+  height: 2.5rem;
+  position: relative;
+  align-items: center;
+  cursor: pointer;
+  padding: 0 2rem;
+  border: 1px solid transparent;
+  color: var(--theme-menu-item--color);
+  background-color: transparent;
+}
+.dropdown-item:focus-visible {
+  background-color: var(--theme-menu-item--background);
+  color: var(--theme-menu-item--color);
+}
+.dropdown-item:focus-visible {
+  outline: none;
+  background-color: var(--theme-menu-item--background);
+  border-color: #119fff;
+  color: var(--theme-menu-item--color--focus);
+}
+.dropdown-item:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.dropdown-item:not(.disabled):not(:disabled):hover, .dropdown-item:not(.disabled):not(:disabled):hover {
+  color: var(--theme-menu-item--color--hover);
+  background-color: var(--theme-menu-item--background--hover);
+}
+.dropdown-item:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.dropdown-item:not(.disabled):not(:disabled):active, .dropdown-item:not(.disabled):not(:disabled).active {
+  color: var(--theme-menu-item--color--active);
+  background-color: var(--theme-menu-item--background--active);
+}
+.dropdown-item.disabled, .dropdown-item:disabled {
+  color: var(--theme-menu-item--color--disabled);
+  background-color: var(--theme-menu-item--background--disabled);
+}
+.dropdown-item > a,
+.dropdown-item a:hover,
+.dropdown-item a:active {
+  color: var(--theme-color-std-text);
+}
+.dropdown-item > .glyph {
+  color: var(--theme-menu-item-icon--color);
+  margin-inline-end: 0.5rem;
+}
+.dropdown-item > .glyph.disabled {
+  color: var(--color-weak-text);
+}
+.dropdown-item > .glyph.glyph-single-check {
+  color: var(--theme-menu-item-icon-check--color);
+}
+
+.dropdown-item > input[type=checkbox] + label {
+  margin-bottom: 0px;
+}
+.dropdown-item > input[type=checkbox] + label::before {
+  margin-right: 1rem;
+}
+
+.dropdown-divider {
+  border-top: 1px solid var(--theme-menu-separator--background);
+  margin: 0.25rem 0;
+}
+
+button.dropdown-toggle {
+  position: relative;
+  padding-right: 1.5rem;
+}
+
+button.dropdown-toggle::after {
+  position: absolute;
+  top: 45%;
+  right: 0.5rem;
+}
+
+/*
+ * 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+.ix-form-control,
+.ix-form-control-plaintext {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+  color: var(--theme-input--color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--theme-input--border-radius);
+  height: 2rem;
+  min-height: 2rem;
+  min-width: 2rem;
+  background-color: var(--theme-input--background);
+  border: solid 1px var(--theme-input--border-color);
+  box-shadow: var(--theme-input--box-shadow);
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
+}
+.ix-form-control::-moz-placeholder, .ix-form-control-plaintext::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+.ix-form-control::placeholder,
+.ix-form-control-plaintext::placeholder {
+  color: var(--theme-input-hint--color);
+}
+.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled), .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),
+.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-input--background--hover);
+  border-color: var(--theme-input--border-color--hover);
+  cursor: auto;
+}
+.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-input--background--hover);
+  border-color: var(--theme-input--border-color--hover);
+  cursor: auto;
+}
+.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible {
+  background-color: var(--theme-input--background--focus);
+  border-color: var(--theme-input--border-color--focus);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  box-shadow: var(--theme-input--box-shadow);
+  outline: 1px solid var(--theme-color-focus-bdr);
+}
+.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,
+.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible {
+  background-color: var(--theme-input--background--focus);
+  border-color: var(--theme-input--border-color--focus);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  box-shadow: var(--theme-input--box-shadow);
+  outline: 1px solid var(--theme-color-focus-bdr);
+}
+
+.ix-form-control:focus-visible {
+  color: var(--theme-input--color);
+}
+
+.ix-form-control[type=number] {
+  text-align: right;
+}
+.ix-form-control[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+
+.ix-form-control.readonly,
+.ix-form-control[readonly] {
+  background: transparent !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
+  border-radius: 0rem;
+}
+
+.ix-form-control:-moz-read-only {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+}
+
+.ix-form-control:read-only,
+.ix-form-control[readonly],
+.ix-form-control[readOnly],
+.ix-form-control.readonly {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+}
+.ix-form-control:read-only::-moz-placeholder, .ix-form-control[readonly]::-moz-placeholder, .ix-form-control[readOnly]::-moz-placeholder, .ix-form-control.readonly::-moz-placeholder {
+  color: transparent;
+}
+.ix-form-control:-moz-read-only::placeholder {
+  color: transparent;
+}
+.ix-form-control:read-only::placeholder,
+.ix-form-control[readonly]::placeholder,
+.ix-form-control[readOnly]::placeholder,
+.ix-form-control.readonly::placeholder {
+  color: transparent;
+}
+
+.ix-form-control:disabled,
+.ix-form-control.disabled {
+  background: transparent !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
+  border-radius: 0rem;
+  color: var(--theme-color-weak-text);
+  border-color: var(--theme-input--border-color-bottom--disabled);
+}
+.ix-form-control:disabled::-moz-placeholder, .ix-form-control.disabled::-moz-placeholder {
+  color: transparent;
+}
+.ix-form-control:disabled::placeholder,
+.ix-form-control.disabled::placeholder {
+  color: transparent;
+}
+
+.ix-form-control-plaintext {
+  outline: 0;
+}
+
+.form-group {
+  position: relative;
+}
+
+.input-wrapper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.input-wrapper > .glyph {
+  display: block;
+  position: absolute;
+  margin-inline-start: 0.312rem;
+  color: var(--theme-color-std-text);
+}
+.input-wrapper > input {
+  padding-inline-start: 2.2rem;
+}
+
+select.ix-form-control {
+  padding: 0 0.312rem;
+}
+
+textarea.ix-form-control {
+  padding: 0.375rem 0.5rem;
+}
+
+input.ix-form-control.disabled, input.ix-form-control:disabled {
+  color: var(--theme-input--color--disabled);
+}
+input.ix-form-control:-moz-read-only {
+  cursor: default;
+}
+input.ix-form-control:read-only, input.ix-form-control.readonly {
+  cursor: default;
+}
+
+/*
+ * SPDX-FileCopyrightText: 2025 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+input {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: auto;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  text-overflow: ellipsis;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+input[type=number] {
+  text-align: right;
+}
+input[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+input:-webkit-autofill, input:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+input::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+input::placeholder {
+  color: var(--theme-input-hint--color);
+}
+input.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), input:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+input.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), input:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+input.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), input:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+input.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), input:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+input:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+input.read-only, input:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+input.read-only::-moz-placeholder, input:read-only::-moz-placeholder {
+  color: transparent;
+}
+input:-moz-read-only::placeholder {
+  color: transparent;
+}
+input.read-only::placeholder, input:read-only::placeholder {
+  color: transparent;
+}
+input:disabled, input.disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+input:disabled::-moz-placeholder, input.disabled::-moz-placeholder {
+  color: transparent;
+}
+input:disabled::placeholder, input.disabled::placeholder {
+  color: transparent;
+}
+
+textarea {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: auto;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  text-overflow: ellipsis;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+textarea[type=number] {
+  text-align: right;
+}
+textarea[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+textarea:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+textarea:-webkit-autofill, textarea:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+textarea::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+textarea::placeholder {
+  color: var(--theme-input-hint--color);
+}
+textarea.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), textarea:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+textarea.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), textarea:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+textarea.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), textarea:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+textarea.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), textarea:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+textarea:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+textarea.read-only, textarea:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+textarea.read-only::-moz-placeholder, textarea:read-only::-moz-placeholder {
+  color: transparent;
+}
+textarea:-moz-read-only::placeholder {
+  color: transparent;
+}
+textarea.read-only::placeholder, textarea:read-only::placeholder {
+  color: transparent;
+}
+textarea:disabled, textarea.disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
+  color: transparent;
+}
+textarea:disabled::placeholder, textarea.disabled::placeholder {
+  color: transparent;
+}
+textarea {
+  min-height: 2rem;
+  height: 3.25rem;
+  padding: calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness));
+}
+
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),
+input.ix-info:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--info);
+}
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,
+input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--info--hover) !important;
+}
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,
+input.ix-info:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--info--active) !important;
+}
+
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]) {
+  background-color: var(--theme-input--background--invalid);
+  border-color: var(--theme-input--border-color--invalid) !important;
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--invalid--hover) !important;
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--invalid--active) !important;
+}
+
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: block;
+  position: relative;
+  height: auto;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .reset-button {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+}
+:host .reset-button.hide-reset-button {
+  display: none;
+}
+:host .input-container {
+  display: flex;
+  height: auto;
+  max-height: 3.75rem;
+  padding: 1px 1.5rem 1px 1.75rem !important;
+}
+:host .input-container:not(.readonly):not(.disabled) {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: auto;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  text-overflow: ellipsis;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+:host .input-container:not(.readonly):not(.disabled)[type=number] {
+  text-align: right;
+}
+:host .input-container:not(.readonly):not(.disabled)[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+:host .input-container:not(.readonly):not(.disabled):-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container:not(.readonly):not(.disabled):-webkit-autofill, :host .input-container:not(.readonly):not(.disabled):autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container:not(.readonly):not(.disabled)::placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container:not(.readonly):not(.disabled).hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container:not(.readonly):not(.disabled):hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container:not(.readonly):not(.disabled).hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container:not(.readonly):not(.disabled):hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container:not(.readonly):not(.disabled).focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container:not(.readonly):not(.disabled):focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+:host .input-container:not(.readonly):not(.disabled).focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container:not(.readonly):not(.disabled):focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+:host .input-container:not(.readonly):not(.disabled):disabled, :host .input-container:not(.readonly):not(.disabled).disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder, :host .input-container:not(.readonly):not(.disabled).disabled::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container:not(.readonly):not(.disabled):disabled::placeholder, :host .input-container:not(.readonly):not(.disabled).disabled::placeholder {
+  color: transparent;
+}
+:host .input-container:not(.readonly):not(.disabled):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container:not(.readonly):not(.disabled).focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+:host .input-container.disabled {
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+:host .input-container.readonly {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: auto;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  text-overflow: ellipsis;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+:host .input-container.readonly[type=number] {
+  text-align: right;
+}
+:host .input-container.readonly[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+:host .input-container.readonly:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container.readonly:-webkit-autofill, :host .input-container.readonly:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container.readonly::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container.readonly::placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container.readonly.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container.readonly:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container.readonly.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container.readonly:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container.readonly.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container.readonly:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+:host .input-container.readonly.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container.readonly:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+:host .input-container.readonly:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+:host .input-container.readonly.read-only, :host .input-container.readonly:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+:host .input-container.readonly.read-only::-moz-placeholder, :host .input-container.readonly:read-only::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container.readonly:-moz-read-only::placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.read-only::placeholder, :host .input-container.readonly:read-only::placeholder {
+  color: transparent;
+}
+:host .input-container.readonly:disabled, :host .input-container.readonly.disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+:host .input-container.readonly:disabled::-moz-placeholder, :host .input-container.readonly.disabled::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container.readonly:disabled::placeholder, :host .input-container.readonly.disabled::placeholder {
+  color: transparent;
+}
+:host .input-container.no-icon {
+  padding-left: 0.25rem;
+}
+:host .token-container {
+  flex-grow: 1;
+  overflow: hidden;
+}
+:host .text-input {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+  width: auto;
+  height: 1.75rem;
+  min-height: 1.5rem;
+  background: transparent;
+  flex-grow: 1;
+  box-shadow: none;
+}
+:host .text-input, :host .text-input:hover, :host .text-input:focus, :host .text-input:focus-visible {
+  border: none !important;
+  outline: none !important;
+}
+:host .text-input.hide-placeholder::-moz-placeholder {
+  opacity: 0;
+}
+:host .text-input.hide-placeholder::placeholder {
+  opacity: 0;
+}
+:host .list-unstyled {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  overflow-y: auto;
+}
+:host ix-icon {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+}
+:host ix-filter-chip {
+  margin-right: 0.25rem;
+}
+:host .category-preview {
+  display: flex;
+  align-items: center;
+  height: 1.5rem;
+  background-color: var(--theme-bg-3);
+  border-top-left-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+  padding: 0.5rem;
+  margin: 2px 0;
+}
+:host ul {
+  height: 100%;
+}
+:host .list-unstyled > span:not(.category-preview),
+:host input {
+  padding-inline-start: 0;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+:host ix-dropdown {
+  min-width: 10rem !important;
+}
+:host ix-dropdown .dropdown-item-container {
+  display: flex;
+  flex-direction: column;
+}
+:host ix-dropdown .dropdown-item-container .dropdown-item {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 2.5rem;
+  margin: 0.25rem 0.5rem;
+  padding-inline: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 100rem;
+  width: auto;
+  justify-content: flex-start;
+  flex-grow: 1;
+}
+:host ix-dropdown .dropdown-item-container .dropdown-item:not(.disabled):not(:disabled):focus-visible {
+  border-color: var(--theme-color-focus-bdr);
+}
+:host ix-dropdown .dropdown-item-container .category-item {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+:host ix-dropdown .dropdown-item-container .category-item-value {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+:host ix-dropdown .btn-toggle-operator {
+  width: 2rem;
+  height: 2rem;
+  margin-inline: 0.5rem;
+}
+:host .display-none {
+  display: none;
+}