@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/tab-item/tab-item.css

@@ -35,12 +35,31 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-ix-tab-item {
+/*
+ * 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 40px;
   padding: 10px 1.5rem;
   line-height: 20px;
   font-size: 14px;
@@ -48,16 +67,36 @@ ix-tab-item {
   background-color: var(--theme-tab--background);
   color: var(--theme-tab--color);
 }
-ix-tab-item.circle {
-  height: 72px;
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
 }
-ix-tab-item.top::after {
-  top: 0;
+:host ::-webkit-scrollbar-button {
+  display: none;
 }
-ix-tab-item.bottom::after {
-  bottom: 0;
+: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);
 }
-ix-tab-item::after {
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host ::after {
   content: "";
   position: absolute;
   background-color: var(--theme-tab-indicator--background);
@@ -65,105 +104,50 @@ ix-tab-item::after {
   height: var(--theme-tab-indicator--height);
   left: 0;
 }
-ix-tab-item.stretched {
-  flex-basis: 100%;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-ix-tab-item .text {
+:host .text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
 }
-ix-tab-item .text span,
-ix-tab-item .text span::before {
+:host .text span,
+:host .text span::before {
   pointer-events: none;
 }
-ix-tab-item:hover:not(.circle) {
-  background-color: var(--theme-tab--background--hover);
-  color: var(--theme-tab-color-hover);
-  cursor: pointer;
-}
-ix-tab-item:hover:not(.circle)::after {
-  background-color: var(--theme-tab-indicator--background--hover);
-}
-ix-tab-item:active:not(.circle) {
-  background-color: var(--theme-tab--background--active);
-  color: var(--theme-tab-color--active);
-}
-ix-tab-item:active:not(.circle)::after {
-  background-color: var(--theme-tab-indicator--background--active);
-}
-ix-tab-item:focus-visible {
-  outline: 0px solid var(--focus--border-color);
-}
-ix-tab-item:focus-visible .circle {
-  outline: 1px solid var(--focus--border-color);
-}
-ix-tab-item:focus-visible:not(.circle) {
-  outline: 1px solid var(--focus--border-color);
-}
-ix-tab-item.disabled {
-  color: var(--theme-tab--color--disabled);
-  background-color: var(--theme-tab--background--disabled);
-}
-ix-tab-item.disabled::after {
-  background-color: var(--theme-tab-indicator--background--disabled);
-}
-ix-tab-item.selected:not(.disabled) {
-  background-color: var(--theme-tab--background--selected);
-  color: var(--theme-tab--color--selected);
-}
-ix-tab-item.selected:not(.disabled)::after {
-  background-color: var(--theme-tab-indicator--background--selected);
-}
-ix-tab-item.icon {
-  padding: 1.5rem 0.5rem;
-}
-ix-tab-item.small-tab {
-  height: 32px;
-  padding: 1rem;
-}
-ix-tab-item.small-tab.icon {
-  padding: 1rem 0.25rem;
-}
-ix-tab-item .circle {
+:host .circle {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 48px;
-  width: 48px;
+  height: 3rem;
+  width: 3rem;
   background-color: var(--theme-animated-tab-indicator--background);
   border-radius: 50%;
   border: 2px solid var(--theme-animated-tab-circle--border-color);
   color: var(--theme-an…icon--color);
   cursor: pointer;
 }
-ix-tab-item .circle.selected:not(.disabled) {
+:host .circle.selected:not(.disabled) {
   background-color: var(--theme-animated-tab-circle--background--selected);
   color: var(--theme-animated-tab-icon--color--selected);
   border-color: var(--theme-animated-tab-circle--border-color--selected);
 }
-ix-tab-item .circle.selected:not(.disabled):hover {
+:host .circle.selected:not(.disabled):hover {
   background-color: var(--theme-animated-tab-circle--background--selected);
 }
-ix-tab-item .circle:hover {
+:host .circle:hover {
   background-color: var(--theme-animated-tab-circle--background--hover);
 }
-ix-tab-item .circle:active {
+:host .circle:active {
   background-color: var(--theme-animated-tab-circle--background--active);
 }
-ix-tab-item .circle:active {
+:host .circle:active {
   background-color: var(--theme-animated-tab-circle--background--active);
 }
-ix-tab-item .circle.disabled {
+:host .circle.disabled {
   background-color: var(--theme-animated-tab-circle--background--disabled);
   border-color: var(--theme-animated-tab-circle--border-color--disabled);
 }
-ix-tab-item .counter {
+:host .counter {
   position: absolute;
   z-index: 1;
   height: 16px;
@@ -178,16 +162,100 @@ ix-tab-item .counter {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 14px;
   color: var(--theme-pill-outline--color);
   cursor: pointer;
 }
-ix-tab-item .counter.selected {
+:host .counter.selected {
   border-color: var(--theme-tab-pill--border-color--selected);
 }
-ix-tab-item .counter.disabled {
+:host .counter.selected::after {
+  display: none;
+}
+:host .counter.disabled {
   border-color: var(--theme-tab-pill--border-color--disabled);
 }
-ix-tab-item .hidden {
+:host .counter::after {
+  display: none;
+}
+:host .hidden {
   display: none;
+}
+
+:host(.circle) {
+  height: 72px;
+}
+
+:host(.top) ::after {
+  top: 0;
+}
+
+:host(.bottom) ::after {
+  bottom: 0;
+}
+
+:host(.stretched) {
+  flex-basis: 100%;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(:hover:not(.circle)) {
+  background-color: var(--theme-tab--background--hover);
+  color: var(--theme-tab-color-hover);
+  cursor: pointer;
+}
+:host(:hover:not(.circle)) ::after {
+  background-color: var(--theme-tab-indicator--background--hover);
+}
+
+:host(:active:not(.circle)) {
+  background-color: var(--theme-tab--background--active);
+  color: var(--theme-tab-color--active);
+}
+:host(:active:not(.circle)) ::after {
+  background-color: var(--theme-tab-indicator--background--active);
+}
+
+:host(:focus-visible) {
+  outline: 0px solid var(--focus--border-color);
+}
+:host(:focus-visible) .circle {
+  outline: 1px solid var(--focus--border-color);
+}
+
+:host(:focus-visible:not(.circle)) {
+  outline: 1px solid var(--focus--border-color);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+  color: var(--theme-tab--color--disabled);
+  background-color: var(--theme-tab--background--disabled);
+}
+:host(.disabled) ::after {
+  background-color: var(--theme-tab-indicator--background--disabled);
+}
+
+:host(.selected:not(.disabled)) {
+  background-color: var(--theme-tab--background--selected);
+  color: var(--theme-tab--color--selected);
+}
+:host(.selected:not(.disabled)) ::after {
+  background-color: var(--theme-tab-indicator--background--selected);
+}
+
+:host(.icon) {
+  padding: 1.5rem 0.5rem;
+}
+
+:host(.small-tab) {
+  height: 32px;
+  padding: 1rem;
+}
+
+:host(.small-tab.icon) {
+  padding: 1rem 0.25rem;
 }

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

@@ -39,7 +39,14 @@ export class TabItem {
         layout: this.layout,
         placement: this.placement,
         circle: this.rounded,
-      }), tabIndex: 0 }, h("div", { class: {
+      }), tabIndex: 0, onClick: (event) => {
+        const clientEvent = this.tabClick.emit({
+          nativeEvent: event,
+        });
+        if (clientEvent.defaultPrevented) {
+          event.stopPropagation();
+        }
+      } }, h("div", { class: {
         circle: this.rounded,
         text: !this.rounded,
         selected: this.selected,
@@ -52,6 +59,7 @@ export class TabItem {
       } }, this.counter)));
   }
   static get is() { return "ix-tab-item"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["tab-item.scss"]
@@ -209,5 +217,31 @@ export class TabItem {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "tabClick",
+        "name": "tabClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "On tab click"
+        },
+        "complexType": {
+          "original": "TabClickDetail",
+          "resolved": "{ nativeEvent: MouseEvent; }",
+          "references": {
+            "TabClickDetail": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/tab-item/tab-item.tsx"
+            }
+          }
+        }
+      }];
+  }
 }
 //# sourceMappingURL=tab-item.js.map

package/dist/collection/components/tab-item/tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;EAEtC,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC;MAEX,WACE,KAAK,EAAE;UACL,MAAM,EAAE,IAAI,CAAC,OAAO;UACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;UACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,eAAa,CACT;MACN,WACE,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;UACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,IAEA,IAAI,CAAC,OAAO,CACT,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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  scoped: false,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAW9E,MAAM,OAAO,OAAO;;oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;EAStC,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;QAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACrC,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QAEH,IAAI,WAAW,CAAC,gBAAgB,EAAE;UAChC,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;MACH,CAAC;MAED,WACE,KAAK,EAAE;UACL,MAAM,EAAE,IAAI,CAAC,OAAO;UACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;UACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,eAAa,CACT;MACN,WACE,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;UACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,IAEA,IAAI,CAAC,OAAO,CACT,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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * On tab click\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/tabs.css

@@ -26,22 +26,71 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-ix-tabs {
+/*
+ * 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   width: auto;
   display: flex;
   align-items: center;
   position: relative;
 }
-ix-tabs .tab-items {
+: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 .tab-items {
   overflow: hidden;
   scroll-behavior: smooth;
   width: 100%;
 }
-ix-tabs .tab-items .items-content {
+:host .tab-items .items-content {
   display: flex;
   align-items: center;
 }
-ix-tabs .arrow {
+:host .arrow {
   position: absolute;
   display: flex;
   align-items: center;
@@ -57,29 +106,34 @@ ix-tabs .arrow {
   background-color: var(--theme-btn-invisible-primary--background);
   z-index: 2;
 }
-ix-tabs .arrow:hover {
+:host .arrow:hover {
   color: var(--theme-btn-invisible-primary--color--hover);
   background-color: var(--theme-btn-invisible-primary--background--hover);
 }
-ix-tabs .arrow:active {
+:host .arrow:active {
   color: var(--theme-btn-invisible-primary--color--active);
   background-color: var(--theme-btn-invisible-primary--background--active);
 }
-ix-tabs .arrow.right {
+:host .arrow.right {
   left: auto;
   right: 0;
 }
-ix-tabs .overflow-shadow {
-  width: 50px;
-  height: 40px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: linear-gradient(90deg, var(--theme-color-1) 50%, transparent);
-  z-index: 1;
+:host .overflow-shadow {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  pointer-events: all;
 }
-ix-tabs .overflow-shadow.right {
-  left: auto;
-  right: 0;
-  background: linear-gradient(90deg, transparent, var(--theme-color-1) 50%);
+:host .overflow-shadow.shadow-left {
+  -webkit-mask-image: linear-gradient(90deg, transparent 0px, black 45px);
+          mask-image: linear-gradient(90deg, transparent 0px, black 45px);
+}
+:host .overflow-shadow.shadow-right {
+  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 45px), transparent 100%);
+          mask-image: linear-gradient(90deg, black calc(100% - 45px), transparent 100%);
+}
+:host .overflow-shadow.shadow-both {
+  -webkit-mask-image: linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);
+          mask-image: linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);
 }

package/dist/collection/components/tabs/tabs.js

@@ -41,7 +41,7 @@ export class Tabs {
     return this.getTabs()[tabIndex];
   }
   getTabsWrapper() {
-    return this.hostElement.getElementsByClassName('items-content')[0];
+    return this.hostElement.shadowRoot.querySelector('.items-content');
   }
   showArrows() {
     try {
@@ -106,8 +106,13 @@ export class Tabs {
     this.selected = index;
   }
   clickTab(index) {
-    if (this.dragStop())
+    if (this.dragStop()) {
       return;
+    }
+    const { defaultPrevented } = this.selectedChange.emit(index);
+    if (defaultPrevented) {
+      return;
+    }
     this.setSelected(index);
     this.moveTabToView(index);
   }
@@ -156,23 +161,41 @@ export class Tabs {
   }
   componentWillRender() {
     requestAnimationFrame(() => {
-      this.styleNextArrow = this.getArrowStyle(this.showNextArrow());
-      this.stylePreviousArrow = this.getArrowStyle(this.showPreviousArrow());
+      const showNextArrow = this.showNextArrow();
+      const previousArrow = this.showPreviousArrow();
+      this.styleNextArrow = this.getArrowStyle(showNextArrow);
+      this.stylePreviousArrow = this.getArrowStyle(previousArrow);
     });
   }
   componentDidLoad() {
     const tabs = this.getTabs();
-    tabs.forEach((element, index) => {
-      const isDisabled = element.getAttribute('disabled') !== null;
-      if (!isDisabled)
-        element.addEventListener('click', () => this.clickTab(index));
+    tabs.forEach((element) => {
       element.addEventListener('mousedown', (event) => this.dragStart(element, event));
     });
   }
+  onTabClick(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const target = event.target;
+    const tabs = this.getTabs();
+    tabs.forEach((tab, index) => {
+      if (!tab.disabled && tab === target) {
+        this.clickTab(index);
+      }
+    });
+  }
   render() {
-    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.stylePreviousArrow }), h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.styleNextArrow }), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
+    return (h(Host, null, h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { name: "chevron-left-small" })), h("div", { class: {
+        'tab-items': true,
+        'overflow-shadow': true,
+        'shadow-left': this.showPreviousArrow(),
+        'shadow-right': this.showNextArrow(),
+        'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
+      } }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { name: "chevron-right-small" }))));
   }
   static get is() { return "ix-tabs"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["tabs.scss"]
@@ -287,6 +310,27 @@ export class Tabs {
       "scrollActionAmount": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "selectedChange",
+        "name": "selectedChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "`selected` property changed"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
   static get listeners() {
     return [{
@@ -295,6 +339,12 @@ export class Tabs {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "tabClick",
+        "method": "onTabClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }