@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/event-list-item/event-list-item.css

@@ -30,36 +30,95 @@
  * 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: 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.
+ */
 /* Dimensions */
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
-.ix-event-list-item {
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+: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 .event-list-item {
   display: flex;
   align-items: center;
   position: relative;
-  height: 2.5rem;
-  max-height: 2.5rem;
-  border-radius: 0.25rem;
+  height: var(--event-list-item-height, 2.5rem);
+  max-height: var(--event-list-item-height, 2.5rem);
+  border-radius: var(--event-list-item-border-radius, 0.25rem);
   background-color: var(--theme-event-item--background);
   overflow: hidden;
   transition: 150ms;
   cursor: pointer;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--event-list-item-margin-bottom, 0.5rem);
 }
-.ix-event-list-item .indicator {
+:host .event-list-item .indicator {
   height: 100%;
   width: 0.5rem;
   max-width: 0.5rem;
   min-width: 0.5rem;
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: var(--event-list-item-border-radius, 0.25rem);
+  border-bottom-left-radius: var(--event-list-item-border-radius, 0.25rem);
 }
-.ix-event-list-item .indicator-empty {
+:host .event-list-item .indicator-empty {
   border: var(--theme-weak-bdr-1);
   border-right: none;
 }
-.ix-event-list-item .event-list-item-container {
+:host .event-list-item .event-list-item-container {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -70,57 +129,63 @@
   border: 0.062rem solid;
   border-color: var(--theme-event-item--border);
   border-top-left-radius: 0;
-  border-top-right-radius: 0.25rem;
+  border-top-right-radius: var(--event-list-item-border-radius, 0.25rem);
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0.25rem;
+  border-bottom-right-radius: var(--event-list-item-border-radius, 0.25rem);
   border-left: none;
   padding-left: 1rem;
 }
-.ix-event-list-item:not(.selected):not(.disabled):not(:disabled) {
+:host .event-list-item .event-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--event-list-item-height, 100%);
+  max-height: var(--event-list-item-height, 100%);
+  white-space: var(--event-list-item-content-white-space, inherit);
+  overflow: hidden;
+}
+:host .event-list-item .chevron-icon {
+  margin-left: auto;
+  margin-right: 0.5rem;
+  opacity: 0.6;
+  align-self: center;
+}
+:host .event-list-item:not(.selected):not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):hover {
+:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover, :host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover {
   background-color: var(--theme-event-item--background--hover);
 }
-.ix-event-list-item:not(.selected):not(.disabled):not(:disabled) {
+:host .event-list-item:not(.selected):not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):active {
+:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active, :host .event-list-item:not(.selected):not(.disabled):not(:disabled).active {
   background-color: var(--theme-event-item--background--active);
 }
-.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled) {
+:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover {
+:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover, :host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover {
   border-color: var(--theme-event-item--border--hover);
 }
-.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled) {
+:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active {
+:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active, :host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).active {
   border-color: var(--theme-event-item--border--active);
 }
-.ix-event-list-item.selected .event-list-item-container {
+:host .event-list-item.selected .event-list-item-container {
   background-color: var(--theme-event-item--background--selected);
   border-color: var(--theme-event-item--border--selected);
 }
-.ix-event-list-item[disabled], .ix-event-list-item.disabled {
+:host .event-list-item[disabled], :host .event-list-item.disabled {
   pointer-events: none;
 }
-.ix-event-list-item[disabled] .event-list-item-container, .ix-event-list-item.disabled .event-list-item-container {
+:host .event-list-item[disabled] .event-list-item-container, :host .event-list-item.disabled .event-list-item-container {
   background-color: var(--theme-event-item--background--disabled);
   border-color: var(--theme-event-item--border--disabled);
 }
-.ix-event-list-item .chevron-icon {
-  margin-left: auto;
-  margin-right: 0.5rem;
-  opacity: 0.6;
-  align-self: center;
-}
-.ix-event-list-item .event-content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+
+:host(.disabled) {
+  pointer-events: none;
 }

package/dist/collection/components/event-list-item/event-list-item.js

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 export class EventListItem {
   constructor() {
     this.color = undefined;
@@ -19,18 +19,23 @@ export class EventListItem {
     this.itemClick.emit();
   }
   render() {
-    return (h("div", { class: {
-        'ix-event-list-item': true,
+    var _a;
+    const color = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
+      ? `var(${this.color})`
+      : `var(--theme-${this.color})`;
+    return (h(Host, { class: {
+        disabled: this.disabled,
+      } }, h("div", { class: {
+        'event-list-item': true,
         selected: this.selected,
         disabled: this.disabled,
       } }, h("div", { class: `indicator ${!this.color ? 'indicator-empty' : ''}`, style: {
-        'background-color': this.color
-          ? `var(--theme-${this.color})`
-          : 'inherit',
+        'background-color': this.color ? color : 'inherit',
         opacity: `${this.disabled ? 0.4 : this.opacity}`,
-      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron ? (h("i", { class: "glyph glyph-16 glyph-chevron-right chevron-icon" })) : (''))));
+      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron && (h("ix-icon", { name: "chevron-right", size: "16", class: "chevron-icon" }))))));
   }
   static get is() { return "ix-event-list-item"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["event-list-item.scss"]
@@ -54,8 +59,11 @@ export class EventListItem {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "Color of the status indicator.\nAllowed values are all Core UI color names."
+          "tags": [{
+              "name": "see",
+              "text": "https://ix.siemens.io/docs/theming/colors/"
+            }],
+          "text": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`"
         },
         "attribute": "color",
         "reflect": false
@@ -152,7 +160,6 @@ export class EventListItem {
         }
       }];
   }
-  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "click",

package/dist/collection/components/event-list-item/event-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-list-item.js","sourceRoot":"","sources":["../../../src/components/event-list-item/event-list-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,aAAa;;;;;;mBA8BN,CAAC;;EAQnB,eAAe;IACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,oBAAoB,EAAE,IAAI;QAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,WACE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1D,KAAK,EAAE;UACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;YAC5B,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG;YAC9B,CAAC,CAAC,SAAS;UACb,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;SACjD,GACI;MAEP,WAAK,KAAK,EAAC,2BAA2B;QACpC,WAAK,KAAK,EAAC,eAAe;UACxB,eAAa,CACT;QACL,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,SAAG,KAAK,EAAC,iDAAiD,GAAK,CAChE,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACG,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  scoped: false,\n})\nexport class EventListItem {\n  @Element() el!: HTMLIxEventListItemElement;\n\n  /**\n   * Color of the status indicator.\n   * Allowed values are all Core UI color names.\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Opacity of the status indicator.\n   * Defaults to 1.0\n   *\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() opacity = 1;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'ix-event-list-item': true,\n          selected: this.selected,\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n          style={{\n            'background-color': this.color\n              ? `var(--theme-${this.color})`\n              : 'inherit',\n            opacity: `${this.disabled ? 0.4 : this.opacity}`,\n          }}\n        ></div>\n\n        <div class=\"event-list-item-container\">\n          <div class=\"event-content\">\n            <slot></slot>\n          </div>\n          {this.chevron ? (\n            <i class=\"glyph glyph-16 glyph-chevron-right chevron-icon\"></i>\n          ) : (\n            ''\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"event-list-item.js","sourceRoot":"","sources":["../../../src/components/event-list-item/event-list-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,aAAa;;;;;;mBA+BN,CAAC;;EAQnB,eAAe;IACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAED,MAAM;;IACJ,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;MAC7C,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG;MACtB,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,WACE,KAAK,EAAE;UACL,iBAAiB,EAAE,IAAI;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,WACE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1D,KAAK,EAAE;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;WACjD,GACI;QAEP,WAAK,KAAK,EAAC,2BAA2B;UACpC,WAAK,KAAK,EAAC,eAAe;YACxB,eAAa,CACT;UACL,IAAI,CAAC,OAAO,IAAI,CACf,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @see https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Opacity of the status indicator.\n   * Defaults to 1.0\n   *\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() opacity = 1;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    const color = this.color?.startsWith('--theme')\n      ? `var(${this.color})`\n      : `var(--theme-${this.color})`;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n            style={{\n              'background-color': this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : this.opacity}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name=\"chevron-right\"\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/expanding-search/expanding-search.css

@@ -18,6 +18,263 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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: 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.
+ */
+.form-control,
+.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);
+  -webkit-padding-start: 0.5rem;
+          padding-inline-start: 0.5rem;
+  -webkit-padding-end: 0.5rem;
+          padding-inline-end: 0.5rem;
+}
+.form-control::-moz-placeholder, .form-control-plaintext::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+.form-control::placeholder,
+.form-control-plaintext::placeholder {
+  color: var(--theme-input-hint--color);
+}
+.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled), .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),
+.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .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;
+}
+.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+.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;
+}
+.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible, .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);
+}
+.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,
+.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);
+}
+
+.form-control:focus-visible {
+  color: var(--theme-input--color);
+}
+
+.form-control[type=number] {
+  text-align: right;
+}
+.form-control[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+
+.form-control.readonly,
+.form-control[readonly] {
+  background: transparent !important;
+  -webkit-border-before: none !important;
+          border-block-start: none !important;
+  -webkit-border-start: none !important;
+          border-inline-start: none !important;
+  -webkit-border-end: none !important;
+          border-inline-end: none !important;
+  border-radius: 0rem;
+}
+
+.form-control:-moz-read-only {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+}
+
+.form-control:read-only,
+.form-control[readonly],
+.form-control[readOnly],
+.form-control.readonly {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+}
+.form-control:read-only::-moz-placeholder, .form-control[readonly]::-moz-placeholder, .form-control[readOnly]::-moz-placeholder, .form-control.readonly::-moz-placeholder {
+  color: transparent;
+}
+.form-control:-moz-read-only::placeholder {
+  color: transparent;
+}
+.form-control:read-only::placeholder,
+.form-control[readonly]::placeholder,
+.form-control[readOnly]::placeholder,
+.form-control.readonly::placeholder {
+  color: transparent;
+}
+
+.form-control:disabled,
+.form-control.disabled {
+  background: transparent !important;
+  -webkit-border-before: none !important;
+          border-block-start: none !important;
+  -webkit-border-start: none !important;
+          border-inline-start: none !important;
+  -webkit-border-end: 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);
+}
+.form-control:disabled::-moz-placeholder, .form-control.disabled::-moz-placeholder {
+  color: transparent;
+}
+.form-control:disabled::placeholder,
+.form-control.disabled::placeholder {
+  color: transparent;
+}
+
+.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;
+  -webkit-margin-start: 0.312rem;
+          margin-inline-start: 0.312rem;
+  color: var(--theme-color-std-text);
+}
+.input-wrapper > input {
+  -webkit-padding-start: 2.2rem;
+          padding-inline-start: 2.2rem;
+}
+
+select.form-control {
+  padding: 0 0.312rem;
+}
+
+textarea.form-control {
+  padding: 0.375rem 0.5rem;
+}
+
+.was-validated .form-control:invalid,
+.was-validated .is-invalid {
+  background-color: var(--theme-input-error--background);
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+  background-position: left calc(0.375em + 0.1875rem) center !important;
+  padding-right: 0.75rem;
+  padding-left: calc(1.5em + 0.75rem);
+  background-size: 18px;
+  background-repeat: no-repeat;
+}
+
+input.disabled, input:disabled {
+  color: var(--theme-input--color--disabled);
+}
+input:-moz-read-only {
+  cursor: default;
+}
+input:read-only, input.readonly {
+  cursor: default;
+}
+
+/*
+ * 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: 2023 Siemens AG
  *
@@ -35,6 +292,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: inline-flex;
   width: auto;
   height: 2rem;
@@ -44,21 +305,42 @@
   /*collapsed view*/
   /*expanded view*/
 }
-:host.right-position {
-  width: 11.5625rem !important;
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
 }
-:host.right-position.fullWidth {
-  width: 100% !important;
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+: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 .input-container {
   transition: all 0.3s ease-in-out;
 }
-:host .disable-pointer {
-  pointer-events: none;
-}
 :host input {
   box-shadow: var(--theme-input--box-shadow);
   cursor: auto !important;
+  width: 100%;
 }
 :host .expanded {
   width: 11.5625rem;
@@ -89,13 +371,13 @@
 :host .btn-search:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-search:not(.disabled):not(:disabled):hover {
+:host .btn-search:not(.disabled):not(:disabled):hover, :host .btn-search:not(.disabled):not(:disabled):hover {
   border-color: transparent;
 }
 :host .btn-search:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-search:not(.disabled):not(:disabled):active {
+:host .btn-search:not(.disabled):not(:disabled):active, :host .btn-search:not(.disabled):not(:disabled).active {
   border-color: transparent;
 }
 :host .btn-search:not(.disabled):not(:disabled):focus-visible {
@@ -106,6 +388,10 @@
   outline-width: 1px;
   outline-style: solid;
 }
+:host .btn-search.btn-search--expanded {
+  margin-left: 0.25rem;
+  pointer-events: none;
+}
 :host .btn-search:active {
   width: 2rem;
   height: 2rem;
@@ -133,4 +419,15 @@
 }
 :host .opacity-after {
   opacity: 1;
+}
+
+:host(.right-position) {
+  width: 11.5625rem !important;
+}
+
+:host(.right-position.fullWidth) {
+  width: 100% !important;
+}
+:host(.right-position.fullWidth) .fullWidth {
+  width: 100% !important;
 }

package/dist/collection/components/expanding-search/expanding-search.js

@@ -56,13 +56,10 @@ export class ExpandingSearch {
         expanded: this.expanded,
         'right-position': this.expanded,
         fullWidth: this.fullWidth,
-      } }, h("button", { class: {
-        btn: true,
-        'btn-invisible-primary': true,
-        'btn-icon': true,
+      } }, h("ix-icon-button", { size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
         'btn-search': true,
-        'disable-pointer': this.expanded,
-      }, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0 }, h("ix-icon", { class: "btn-search-icon", name: this.icon, size: this.expanded ? '16' : '24', color: this.hasFocus ? 'input-search-icon--color--focus' : undefined })), h("div", { class: {
+        'btn-search--expanded': this.expanded,
+      } }), h("div", { class: {
         expanded: this.expanded,
         fullWidth: this.fullWidth,
         collapsed: !this.expanded,
@@ -80,7 +77,7 @@ export class ExpandingSearch {
       }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "16", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
   }
   static get is() { return "ix-expanding-search"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["expanding-search.scss"]