@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/chat-user-message/chat-user-message.css

@@ -0,0 +1,145 @@
+/*
+ * SPDX-FileCopyrightText: 2026 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 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+: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 * {
+  /* width */
+}
+:host *::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host * {
+  /* Track */
+}
+: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 * {
+  /* Handle */
+}
+:host *::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host * {
+  /* Handle on hover */
+}
+:host *::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host *::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .message {
+  width: -moz-fit-content;
+  width: fit-content;
+  min-width: max(15.375rem, 45%);
+  max-width: 80%;
+  box-sizing: border-box;
+  padding: var(--theme-space-2) var(--theme-space-3);
+  border-radius: var(--theme-default-border-radius);
+  background-color: var(--theme-color-component-8);
+  color: var(--theme-color-std-text);
+}
+:host .attachments {
+  display: none;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--theme-space-1) 0;
+  width: 100%;
+  max-width: 75%;
+  margin-bottom: var(--theme-space-1);
+  overflow: hidden;
+}
+:host .attachments ::slotted(ix-chat-attachment) {
+  flex: 0 1 6.375rem;
+  padding-left: var(--theme-space-1);
+}
+:host .attachment-overflow {
+  margin-bottom: var(--theme-space-1);
+  --ix-dropdown-button-border-radius-left: var(--theme-small-border-radius);
+  --ix-dropdown-button-border-radius-right: var(--theme-small-border-radius);
+}
+:host .message-text {
+  display: block;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+:host .actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--theme-space-1);
+  min-height: 2rem;
+  margin-top: var(--theme-space-1);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+:host .actions ::slotted(ix-icon-button) {
+  flex: 0 0 auto;
+}
+
+:host(.has-attachments) .attachments {
+  display: flex;
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+:host(:focus-visible) .message {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-focus-outline-offset);
+}
+
+:host(.has-actions:focus) .actions,
+:host(.has-actions:hover) .actions,
+:host(.has-actions:focus-within) .actions {
+  opacity: 1;
+}

package/dist/collection/components/chat-user-message/chat-user-message.js

@@ -0,0 +1,112 @@
+/*
+ * SPDX-FileCopyrightText: 2026 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.
+ */
+import { Host, h } from "@stencil/core";
+/**
+ * @since 5.2.0
+ * @slot - Message content displayed in the user message bubble
+ * @slot actions - Optional actions displayed below the user message bubble
+ * @slot attachments - ix-chat-attachment elements with variant="sent" displayed above the user message bubble
+ */
+export class ChatUserMessage {
+    hostElement;
+    /**
+     * Text displayed in the user message bubble.
+     */
+    message;
+    hasActions = false;
+    hasAttachments = false;
+    hasMessageContent = false;
+    componentWillLoad() {
+        this.updateHasMessageContent();
+    }
+    handleActionsSlotChange(event) {
+        const slot = event.target;
+        this.hasActions =
+            slot.assignedElements({
+                flatten: true,
+            }).length > 0;
+    }
+    handleAttachmentsSlotChange(event) {
+        const slot = event.target;
+        this.hasAttachments =
+            slot.assignedElements({
+                flatten: true,
+            }).length > 0;
+    }
+    handleMessageSlotChange(event) {
+        this.updateHasMessageContent(event.target);
+    }
+    hasAssignedMessageContent(slot) {
+        if (slot) {
+            return slot.assignedNodes({ flatten: true }).some((node) => {
+                return node.nodeType === 1 || !!node.textContent?.trim();
+            });
+        }
+        return Array.from(this.hostElement.childNodes).some((node) => {
+            if (node.nodeType === 1) {
+                return node.slot === '';
+            }
+            return !!node.textContent?.trim();
+        });
+    }
+    updateHasMessageContent(slot) {
+        this.hasMessageContent = this.hasAssignedMessageContent(slot);
+    }
+    render() {
+        return (h(Host, { key: 'e9376e0015376ada61acab85f71f2e4ecd6352ef', class: {
+                'has-actions': this.hasActions,
+                'has-attachments': this.hasAttachments,
+            }, tabIndex: this.hasActions ? 0 : undefined }, h("div", { key: '89f8e746ec79a7ec1e8489a7ea658055c807e37b', class: "attachments" }, h("slot", { key: '7d8162d206e2fa2f55d14982b78ae97e975f5bf4', name: "attachments", onSlotchange: (event) => this.handleAttachmentsSlotChange(event) })), h("div", { key: '2169c12123fa3e36933274dcdc79a55a87533f29', class: "message" }, h("ix-typography", { key: '8b502f9e39d9eba42cbe39919eb88388d0d4fbac', class: "message-text", format: "body", textColor: "std" }, this.message, h("span", { key: '3d8a626592b4ccdcbb4ad60025b10fba74882e70', style: {
+                display: this.hasMessageContent ? undefined : 'none',
+            } }, h("slot", { key: '4030806fcddb274fa0dd35dc89367ecf75cf2868', onSlotchange: (event) => this.handleMessageSlotChange(event) })))), h("div", { key: '3f740a55deaaa178d8939730d2553c7b32b1f21d', class: "actions", "aria-hidden": !this.hasActions ? 'true' : undefined }, h("slot", { key: '465edf12f452fe3c88f910e0d657b4c76894878c', name: "actions", onSlotchange: (event) => this.handleActionsSlotChange(event) }))));
+    }
+    static get is() { return "ix-chat-user-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chat-user-message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chat-user-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text displayed in the user message bubble."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasActions": {},
+            "hasAttachments": {},
+            "hasMessageContent": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/checkbox/checkbox.css

@@ -32,7 +32,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -41,37 +41,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .checkbox-button {

package/dist/collection/components/checkbox/checkbox.js

@@ -126,14 +126,14 @@ export class Checkbox {
         return (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, this.indeterminate && (h(Fragment, null, h("rect", { width: "18", height: "18", fill: "transparent" }), h("rect", { x: "3", y: "8", width: "12", height: "2", fill: "var(--ix-checkbox-check-color)" }))), this.checked && (h("path", { d: "M3.65625 8.15625L8.4375 12.9375L14.625 3.9375", stroke: "var(--ix-checkbox-check-color)", "stroke-width": "2" }))));
     }
     render() {
-        return (h(Host, { key: '35812b8dead64c244b7a52eb16928bad8d7ab3ac', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
+        return (h(Host, { key: '05fdc1eb3f6a434211e126fb459e436c468476f8', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
                 disabled: this.disabled,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
                 'label-less': this.isLabelLess,
-            }, onFocus: () => (this.touched = true), onBlur: () => this.ixBlur.emit() }, h("label", { key: '95d7ed9fcd59474b6978819a9b7c97ba80ba26fd' }, h("input", { key: 'cf9c3545c17df102d35900d5243c1f1c50f18c6f', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("div", { key: 'bd5a04e233b741022ee5398b13d60db12a5fd128', class: "checkbox-button" }, h("button", { key: 'ab34c031e430e2f867288961d6e2aad70bd0efff', disabled: this.disabled, class: {
+            }, onFocus: () => (this.touched = true), onBlur: () => this.ixBlur.emit() }, h("label", { key: '5744fe6dba111b58198ba38de30d376444721edb' }, h("input", { key: '45bd0ed2504a239e6ffe363d1129b3932eab9080', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("div", { key: '64a0a64c6852864c9fb740760998fd56fbd44f91', class: "checkbox-button" }, h("button", { key: '8d61df6001508ca11db0befd17e2e481f69645bf', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark())), h("ix-typography", { key: '1de00db72c4eb6c2d259eead82e76e07ec10922b', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '781bb2d36b1e5b006fea618ad39b0af0a2000b21', onSlotchange: () => this.updateDefaultSlotElements(), ref: (element) => (this.defaultSlotElement = element) })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark())), h("ix-typography", { key: '20a3e1dee55ba2d6920450b7cb257588ebbc405d', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '2741ee937a1351059df0bcc0a5923053e771f01f', onSlotchange: () => this.updateDefaultSlotElements(), ref: (element) => (this.defaultSlotElement = element) })))));
     }
     static get is() { return "ix-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox-group/checkbox-group.css

@@ -29,7 +29,7 @@
 :host .checkbox-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
   margin: 0.375rem 0;
   flex-wrap: wrap;
 }

package/dist/collection/components/checkbox-group/checkbox-group.js

@@ -103,10 +103,10 @@ export class CheckboxGroup {
         return Promise.resolve(this.checkboxElements.some((checkbox) => checkbox.checked));
     }
     render() {
-        return (h(Host, { key: 'd6718d48f2596083126ff7d697c1defea55d5a03', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: 'dc0cdf907e3aed04ba33dd10802af6cad2621d58', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: '95782aa76994a8867fa31a7f4ba3a5c5fa8811bb', class: {
+        return (h(Host, { key: '7f2ab8f11b50445a818721c3c9466189f38c2f61', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: '79fe9178363a3f9ed7c44cb59ef3ec6031fcd653', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: 'b099ba2443912a77775cad96fd007a92e1b312e1', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: 'f0c035b2293f104bdd57bcebb392c2d9fdca9c56' })))));
+            } }, h("slot", { key: '828cdaf4ae4295b0c1597987d4ca7f1e9fbe80c7' })))));
     }
     static get is() { return "ix-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,7 +52,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -61,44 +61,40 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 
-:host(.inactive) {
-  pointer-events: none;
-}
-
 .chip-wrap {
   display: inline-flex;
   width: inherit;
@@ -152,27 +148,36 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.chip-wrap .chip-main .slot-container slot::slotted(*) {
+  max-width: 100%;
+  min-width: 0;
 }
 .chip-wrap.centerContent .chip-main .content-wrapper {
   justify-content: center;
   text-align: center;
 }
+.chip-wrap.inactive .chip-main {
+  pointer-events: none;
+}
 .chip-wrap.outline .chip-main {
   padding-left: calc(0.75rem - 0.0625rem);
 }
-.chip-wrap.outline:not(.closable) .chip-main, .chip-wrap.outline.closable.inactive .chip-main {
+.chip-wrap.outline:not(.closable) .chip-main {
   padding-right: calc(0.75rem - 0.0625rem);
 }
-.chip-wrap.outline.closable:not(.inactive) .chip-main {
+.chip-wrap.outline.closable .chip-main {
   padding-right: calc(0.25rem + 1.5rem + 0.375rem - 0.0625rem);
 }
 .chip-wrap:not(.outline) .chip-main {
   padding-left: 0.75rem;
 }
-.chip-wrap:not(.outline):not(.closable) .chip-main, .chip-wrap:not(.outline).closable.inactive .chip-main {
+.chip-wrap:not(.outline):not(.closable) .chip-main {
   padding-right: 0.75rem;
 }
-.chip-wrap:not(.outline).closable:not(.inactive) .chip-main {
+.chip-wrap:not(.outline).closable .chip-main {
   padding-right: calc(0.25rem + 1.5rem + 0.375rem);
 }
 .chip-wrap .chip-close {
@@ -629,4 +634,8 @@
 }
 .chip-wrap.custom:not(.outline) .chip-close:active {
   background-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+:host(.attachment-chip) .chip-wrap {
+  border-radius: var(--theme-btn--border-radius);
 }

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

@@ -28,7 +28,7 @@ export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     variant = 'primary';
     /**
      * Determines if the chip is interactive. If true no user input (e.g. mouse states, keyboard navigation)
-     * will be possible and also the close button will not be present.
+     * will be possible on the main chip content.
      */
     inactive = false;
     /**
@@ -133,7 +133,6 @@ export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
             ? this.variant
             : 'primary';
         const { wrap: customWrapStyle, main: customMainStyle } = this.getCustomStyles(variant);
-        const showClose = !this.inactive && this.closable;
         const wrapClasses = {
             'chip-wrap': true,
             outline: this.outline,
@@ -154,15 +153,15 @@ export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         const hasAccessibleName = !!this.inheritAriaAttributes['aria-label']?.trim() ||
             !!this.inheritAriaAttributes['aria-labelledby']?.trim();
         const hasTooltip = !!this.tooltipText || this.hostElement.hasAttribute('tooltip-text');
-        const needsGroupRole = hasAccessibleName && (showClose || hasTooltip);
-        return (h(Host, { key: '074e1b8df0edfe5db620b313070c952d94fb6764', role: this.getHostRole(needsGroupRole), class: {
+        const needsGroupRole = hasAccessibleName && (this.closable || hasTooltip);
+        return (h(Host, { key: 'fb0bdb2d7e9042b738534485b9a061d02b46ccf2', role: this.getHostRole(needsGroupRole), class: {
                 inactive: this.inactive,
-            } }, h("div", { key: '4f3be99387f137357324a14e4b66c60c61e95c36', ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: '37c9d95256b2d0b1567cb6d9679cfedc319ae32a', type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: '44b27264ee46a492016c92085f2ca13370ba311f', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: '05c6d7f19b9132c120e99110c76181557cb82c64', class: {
+            } }, h("div", { key: 'ac5c890cc499cc2fa835826ec0a6ef615334cc71', ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: 'e60254d5485bd02877dd115e07a8591b2ed92df6', type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: 'dd5313f7aab3494be6651eeac948bc3b741f349b', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: 'cffde7c889b2cf176bd4b663f7d7c818147959ba', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '24', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative), style: this.getIconStyle(variant) })), h("span", { key: '303f4abb9ae0bff1d823d9a8960767df237282a6', class: "slot-container" }, h("slot", { key: '8918f352f8e7e73e8b9c1276025b9a440058173f' })))), showClose && (h("button", { key: '56f34dccef82fc49349dd0b323cd84f25ab3c401', type: "button", class: "chip-close", "aria-label": this.ariaLabelCloseButton, onClick: (event) => {
+            }, name: this.icon, size: '24', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative), style: this.getIconStyle(variant) })), h("span", { key: 'db3887d98ddf485d5763360d3911b04e65bd993b', class: "slot-container" }, h("slot", { key: 'ebd75fd75b61b68ae066d3070025ffbc60dccb40' })))), this.closable && (h("button", { key: 'a635317fbce69bfb8df673f0784618c2203bf4e2', type: "button", class: "chip-close", "aria-label": this.ariaLabelCloseButton, onClick: (event) => {
                 this.closeChip.emit(event);
                 event.stopPropagation();
-            } }, h("ix-icon", { key: '6bc6e05f59525c5819b95805fd95be372af1ec65', class: "chip-close__icon", name: iconCloseSmall, size: "16", "aria-hidden": "true" })))), this.getTooltip()));
+            } }, h("ix-icon", { key: '8c82a81006d96f6e67bdb42ef1eb82381660a1bc', class: "chip-close__icon", name: iconCloseSmall, size: "16", "aria-hidden": "true" })))), this.getTooltip()));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -217,7 +216,7 @@ export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the chip is interactive. If true no user input (e.g. mouse states, keyboard navigation)\nwill be possible and also the close button will not be present."
+                    "text": "Determines if the chip is interactive. If true no user input (e.g. mouse states, keyboard navigation)\nwill be possible on the main chip content."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/col/col.css

@@ -36,7 +36,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -45,36 +45,36 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }

package/dist/collection/components/col/col.js

@@ -80,9 +80,9 @@ export class Col {
         };
     }
     render() {
-        return (h(Host, { key: '6cb1bfd2e52e79b9904cbed20b2e6f8ba09b5945', style: {
+        return (h(Host, { key: '4100338d123bd8bb83087547168f7b5949c203ff', style: {
                 ...this.getColumnSizeStyling(),
-            } }, h("slot", { key: 'd3bcb1164a364e62f23200fc06d49e8f2a5c72ae' })));
+            } }, h("slot", { key: '90c209c3c011c132a654fb0a546ef149992def3c' })));
     }
     static get is() { return "ix-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.css

@@ -36,7 +36,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -45,37 +45,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .content {

package/dist/collection/components/content/content.js

@@ -19,12 +19,12 @@ export class Content {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '94c6e2d97d8194e53a2084003dc128037795da39' }, h("div", { key: '3bca63790f8f524bc807b7745effcfe6091efec4', class: {
+        return (h(Host, { key: 'b0090d73abb383f550111eb0adc7b143d8e605de' }, h("div", { key: 'ec8cce11ef773bb5b6665063558e33882c2c3d53', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: 'b362b15e253b4e714b1d6f8c631e00d6a01f5668', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '04ecaaeebdf17a57efd35cba932bc09928911fdd', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '9e774c3fa07536e14f377d3188632e9fbb548d29', class: "content" }, h("slot", { key: '48301d9bc95492ee103a7a3d4767009147888994' }))));
+            } })), h("div", { key: '2fdeaacd37f4fe25c30b4807c61035297253385b', class: "content" }, h("slot", { key: 'd9ee1690a88d8f8a587a23cb1520a9b0598f2949' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }