@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/chip/chip.css

@@ -22,10 +22,26 @@
  * 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
  *
@@ -35,75 +51,129 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-block;
+  position: relative;
+  height: 2rem;
+  max-height: 2rem;
+  margin-left: 0.25rem;
+}
+: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(.inactive) {
+  pointer-events: none;
+}
+
+.container {
   display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: inherit;
+  box-sizing: border-box;
   position: relative;
   align-items: center;
   border-radius: 100px;
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem;
   height: 2rem;
   max-height: 2rem;
   cursor: pointer;
-  margin-left: 0.25rem;
 }
-:host .with-icon {
+.container .with-icon {
   margin-right: 0.25rem;
 }
-:host .hidden {
+.container .hidden {
   width: 0px;
   margin-right: 0px;
 }
-:host .close-button-container {
+.container .close-button-container {
   display: inline-flex;
-  flex-grow: 1;
-  margin-left: 0.75rem;
-}
-:host .close-button {
-  position: relative;
-  width: 1rem;
-  height: 1rem;
-  min-width: unset;
-  min-height: unset;
   margin-left: auto;
-  margin-right: 0;
+  padding-left: 0.5rem;
+}
+.container .slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.container.icon {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.container.closable {
+  padding-right: 0.25rem;
 }
-:host[variant=primary] {
+
+.container.primary {
   background-color: var(--theme-color-primary);
   color: var(--theme-chip-primary--color);
 }
-:host[variant=primary] .close-button {
+.container.primary .close-button {
   color: var(--theme-chip-primary--color);
+  --ix-icon-button-color: var(--theme-chip-primary--color);
   pointer-events: auto;
 }
-:host[variant=primary]:hover {
+.container.primary:hover {
   background-color: var(--theme-chip-primary--background--hover);
 }
-:host[variant=primary]:active {
+.container.primary:active {
   background-color: var(--theme-chip-primary--background--active);
 }
-:host[variant=primary]:focus-visible {
+.container.primary:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=primary].outline {
+
+.container.primary.outline {
   color: var(--theme-chip-primary-outline--color);
   background-color: transparent;
   border: solid 1px var(--theme-chip-primary-outline--border-color);
 }
-:host[variant=primary].outline .close-button {
+.container.primary.outline .close-button {
   color: var(--theme-chip-primary-outline--color);
+  --ix-icon-button-color: var(--theme-chip-primary-outline--color);
 }
-:host[variant=primary].outline:hover {
+.container.primary.outline:hover {
   background-color: var(--theme-chip-primary-outline--background--hover);
 }
-:host[variant=primary].outline:active {
+.container.primary.outline:active {
   background-color: var(--theme-chip-primary-outline--background--active);
 }
-:host[variant=alarm] {
+
+.container.alarm {
   color: var(--theme-color-alarm--contrast);
 }
-:host[variant=alarm]:hover::after {
+.container.alarm:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -114,7 +184,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=alarm].active::after, :host[variant=alarm]:active::after {
+.container.alarm.active::after, .container.alarm:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -125,43 +195,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=alarm]:not(.outline) {
+.container.alarm:not(.outline) {
   background-color: var(--theme-color-alarm);
 }
-:host[variant=alarm]:not(.outline) .close-button {
+.container.alarm:not(.outline) .close-button {
   color: var(--theme-color-alarm--contrast);
+  --ix-icon-button-color: var(--theme-color-alarm--contrast);
 }
-:host[variant=alarm]:not(.outline):hover::after {
+.container.alarm:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=alarm]:not(.outline).active::after, :host[variant=alarm]:not(.outline):active::after {
+.container.alarm:not(.outline).active::after, .container.alarm:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=alarm].outline {
+.container.alarm.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-alarm);
 }
-:host[variant=alarm].outline:hover::after {
+.container.alarm.outline:hover::after {
   display: none;
 }
-:host[variant=alarm].outline:hover {
+.container.alarm.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=alarm].outline.active::after, :host[variant=alarm].outline:active::after {
+.container.alarm.outline.active::after, .container.alarm.outline:active::after {
   display: none;
 }
-:host[variant=alarm].outline.active, :host[variant=alarm].outline:active {
+.container.alarm.outline.active, .container.alarm.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=alarm]:focus-visible {
+.container.alarm:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=critical] {
+
+.container.critical {
   color: var(--theme-color-critical--contrast);
 }
-:host[variant=critical]:hover::after {
+.container.critical:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -172,7 +244,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=critical].active::after, :host[variant=critical]:active::after {
+.container.critical.active::after, .container.critical:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -183,43 +255,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=critical]:not(.outline) {
+.container.critical:not(.outline) {
   background-color: var(--theme-color-critical);
 }
-:host[variant=critical]:not(.outline) .close-button {
+.container.critical:not(.outline) .close-button {
   color: var(--theme-color-critical--contrast);
+  --ix-icon-button-color: var(--theme-color-critical--contrast);
 }
-:host[variant=critical]:not(.outline):hover::after {
+.container.critical:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=critical]:not(.outline).active::after, :host[variant=critical]:not(.outline):active::after {
+.container.critical:not(.outline).active::after, .container.critical:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=critical].outline {
+.container.critical.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-critical);
 }
-:host[variant=critical].outline:hover::after {
+.container.critical.outline:hover::after {
   display: none;
 }
-:host[variant=critical].outline:hover {
+.container.critical.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=critical].outline.active::after, :host[variant=critical].outline:active::after {
+.container.critical.outline.active::after, .container.critical.outline:active::after {
   display: none;
 }
-:host[variant=critical].outline.active, :host[variant=critical].outline:active {
+.container.critical.outline.active, .container.critical.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=critical]:focus-visible {
+.container.critical:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=warning] {
+
+.container.warning {
   color: var(--theme-color-warning--contrast);
 }
-:host[variant=warning]:hover::after {
+.container.warning:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -230,7 +304,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=warning].active::after, :host[variant=warning]:active::after {
+.container.warning.active::after, .container.warning:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -241,43 +315,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=warning]:not(.outline) {
+.container.warning:not(.outline) {
   background-color: var(--theme-color-warning);
 }
-:host[variant=warning]:not(.outline) .close-button {
+.container.warning:not(.outline) .close-button {
   color: var(--theme-color-warning--contrast);
+  --ix-icon-button-color: var(--theme-color-warning--contrast);
 }
-:host[variant=warning]:not(.outline):hover::after {
+.container.warning:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=warning]:not(.outline).active::after, :host[variant=warning]:not(.outline):active::after {
+.container.warning:not(.outline).active::after, .container.warning:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=warning].outline {
+.container.warning.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-warning);
 }
-:host[variant=warning].outline:hover::after {
+.container.warning.outline:hover::after {
   display: none;
 }
-:host[variant=warning].outline:hover {
+.container.warning.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=warning].outline.active::after, :host[variant=warning].outline:active::after {
+.container.warning.outline.active::after, .container.warning.outline:active::after {
   display: none;
 }
-:host[variant=warning].outline.active, :host[variant=warning].outline:active {
+.container.warning.outline.active, .container.warning.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=warning]:focus-visible {
+.container.warning:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=info] {
+
+.container.info {
   color: var(--theme-color-info--contrast);
 }
-:host[variant=info]:hover::after {
+.container.info:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -288,7 +364,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=info].active::after, :host[variant=info]:active::after {
+.container.info.active::after, .container.info:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -299,43 +375,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=info]:not(.outline) {
+.container.info:not(.outline) {
   background-color: var(--theme-color-info);
 }
-:host[variant=info]:not(.outline) .close-button {
+.container.info:not(.outline) .close-button {
   color: var(--theme-color-info--contrast);
+  --ix-icon-button-color: var(--theme-color-info--contrast);
 }
-:host[variant=info]:not(.outline):hover::after {
+.container.info:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=info]:not(.outline).active::after, :host[variant=info]:not(.outline):active::after {
+.container.info:not(.outline).active::after, .container.info:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=info].outline {
+.container.info.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-info);
 }
-:host[variant=info].outline:hover::after {
+.container.info.outline:hover::after {
   display: none;
 }
-:host[variant=info].outline:hover {
+.container.info.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=info].outline.active::after, :host[variant=info].outline:active::after {
+.container.info.outline.active::after, .container.info.outline:active::after {
   display: none;
 }
-:host[variant=info].outline.active, :host[variant=info].outline:active {
+.container.info.outline.active, .container.info.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=info]:focus-visible {
+.container.info:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=neutral] {
+
+.container.neutral {
   color: var(--theme-color-neutral--contrast);
 }
-:host[variant=neutral]:hover::after {
+.container.neutral:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -346,7 +424,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=neutral].active::after, :host[variant=neutral]:active::after {
+.container.neutral.active::after, .container.neutral:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -357,43 +435,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=neutral]:not(.outline) {
+.container.neutral:not(.outline) {
   background-color: var(--theme-color-neutral);
 }
-:host[variant=neutral]:not(.outline) .close-button {
+.container.neutral:not(.outline) .close-button {
   color: var(--theme-color-neutral--contrast);
+  --ix-icon-button-color: var(--theme-color-neutral--contrast);
 }
-:host[variant=neutral]:not(.outline):hover::after {
+.container.neutral:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=neutral]:not(.outline).active::after, :host[variant=neutral]:not(.outline):active::after {
+.container.neutral:not(.outline).active::after, .container.neutral:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=neutral].outline {
+.container.neutral.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-neutral);
 }
-:host[variant=neutral].outline:hover::after {
+.container.neutral.outline:hover::after {
   display: none;
 }
-:host[variant=neutral].outline:hover {
+.container.neutral.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=neutral].outline.active::after, :host[variant=neutral].outline:active::after {
+.container.neutral.outline.active::after, .container.neutral.outline:active::after {
   display: none;
 }
-:host[variant=neutral].outline.active, :host[variant=neutral].outline:active {
+.container.neutral.outline.active, .container.neutral.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=neutral]:focus-visible {
+.container.neutral:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=success] {
+
+.container.success {
   color: var(--theme-color-success--contrast);
 }
-:host[variant=success]:hover::after {
+.container.success:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -404,7 +484,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=success].active::after, :host[variant=success]:active::after {
+.container.success.active::after, .container.success:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -415,81 +495,37 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=success]:not(.outline) {
+.container.success:not(.outline) {
   background-color: var(--theme-color-success);
 }
-:host[variant=success]:not(.outline) .close-button {
+.container.success:not(.outline) .close-button {
   color: var(--theme-color-success--contrast);
+  --ix-icon-button-color: var(--theme-color-success--contrast);
 }
-:host[variant=success]:not(.outline):hover::after {
+.container.success:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=success]:not(.outline).active::after, :host[variant=success]:not(.outline):active::after {
+.container.success:not(.outline).active::after, .container.success:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=success].outline {
+.container.success.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-success);
 }
-:host[variant=success].outline:hover::after {
+.container.success.outline:hover::after {
   display: none;
 }
-:host[variant=success].outline:hover {
+.container.success.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=success].outline.active::after, :host[variant=success].outline:active::after {
+.container.success.outline.active::after, .container.success.outline:active::after {
   display: none;
 }
-:host[variant=success].outline.active, :host[variant=success].outline:active {
+.container.success.outline.active, .container.success.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=success]:focus-visible {
-  outline: 1px solid #199fff;
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
-:host[variant=custom]:hover::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, var(--theme-l-hover));
-  left: 0;
-  border-radius: 100px;
-  pointer-events: none;
-}
-:host[variant=custom].active::after, :host[variant=custom]:active::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, var(--theme-l-active));
-  left: 0;
-  border-radius: 100px;
-  pointer-events: none;
-}
-:host[variant=custom]:focus-visible {
+.container.success:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
-}
-:host[variant=custom].outline {
-  border: solid 1px transparent;
-  background-color: transparent;
-}
-:host[variant=custom].outline:hover {
-  background-color: rgba(0, 0, 0, var(--theme-l-hover));
-}
-:host[variant=custom].outline:active {
-  background-color: rgba(0, 0, 0, var(--theme-l-active));
-}
-:host .slot-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:host(.inactive) {
-  pointer-events: none;
 }

package/dist/collection/components/chip/chip.js

@@ -18,37 +18,45 @@ export class Chip {
     this.outline = false;
   }
   getCloseButton() {
-    return (h("div", { class: "close-button-container" }, h("button", { type: "button", class: "btn btn-invisible-secondary btn-icon btn-oval close-button", onClick: (event) => {
+    return (h("div", { class: "close-button-container" }, h("ix-icon-button", { type: "button", variant: "secondary", icon: "close-small", class: "close-button", oval: true, size: "16", style: this.variant === 'custom' ? { color: this.color } : {}, ghost: true, onClick: (event) => {
         this.close.emit(event);
         this.closeChip.emit(event);
         event.stopPropagation();
-      } }, this.variant === 'custom' ? (h("i", { class: "glyph glyph-16 glyph-close-small", style: { color: this.color } })) : (h("ix-icon", { name: 'close-small', size: '16' })))));
+      } })));
   }
   render() {
     const isInactive = this.active === false;
     let customStyle = {};
-    if (this.variant === 'custom' && this.outline === false) {
+    if (this.variant === 'custom') {
       customStyle = {
         color: this.color,
-        backgroundColor: this.background,
+        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
       };
     }
-    if (this.variant === 'custom' && this.outline === true) {
-      customStyle = {
-        color: this.color,
-        borderColor: this.background,
-      };
-    }
-    return (h(Host, { class: {
+    return (h(Host, { tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        ? {
+          '--ix-icon-button-color': this.color,
+        }
+        : {} }, h("div", { style: Object.assign({}, customStyle), class: {
+        container: true,
         outline: this.outline,
         inactive: isInactive,
-      }, tabIndex: "-1", title: this.el.textContent, style: Object.assign({}, customStyle) }, h("ix-icon", { class: {
+        alarm: this.variant === 'alarm',
+        critical: this.variant === 'critical',
+        info: this.variant === 'info',
+        neutral: this.variant === 'neutral',
+        primary: this.variant === 'primary',
+        success: this.variant === 'success',
+        warning: this.variant === 'warning',
+        closable: this.closable,
+        icon: !!this.icon,
+      } }, h("ix-icon", { class: {
         'with-icon': true,
         hidden: this.icon === undefined || this.icon === '',
-      }, name: this.icon, size: '24' }), h("span", { class: "slot-container" }, h("slot", null)), isInactive === false && this.closable ? this.getCloseButton() : null));
+      }, name: this.icon, size: '24' }), h("span", { class: "slot-container" }, h("slot", null)), isInactive === false && this.closable ? this.getCloseButton() : null)));
   }
   static get is() { return "ix-chip"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["chip.scss"]