@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/button/button.css

@@ -65,6 +65,14 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/*
+* 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.
+*/
 :host {
   --ix-button-border-radius-left: var(--theme-btn--border-radius);
   --ix-button-border-radius-right: var(--theme-btn--border-radius);
@@ -85,7 +93,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -94,37 +102,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 button,
@@ -196,7 +204,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -205,37 +213,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 button,
@@ -337,6 +345,12 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -399,6 +413,12 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -461,6 +481,12 @@
   color: var(--theme-btn-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-tertiary--border-color--active);
+  background-color: var(--theme-btn-tertiary--background--active);
+  color: var(--theme-btn-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -523,6 +549,12 @@
   color: var(--theme-btn-subtle-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-primary--border-color--active);
+  background-color: var(--theme-btn-subtle-primary--background--active);
+  color: var(--theme-btn-subtle-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -585,6 +617,12 @@
   color: var(--theme-btn-subtle-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-secondary--border-color--active);
+  background-color: var(--theme-btn-subtle-secondary--background--active);
+  color: var(--theme-btn-subtle-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -647,6 +685,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -709,6 +753,12 @@
   color: var(--theme-btn-danger-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-primary--border-color--active);
+  background-color: var(--theme-btn-danger-primary--background--active);
+  color: var(--theme-btn-danger-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -771,6 +821,12 @@
   color: var(--theme-btn-danger-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-secondary--border-color--active);
+  background-color: var(--theme-btn-danger-secondary--background--active);
+  color: var(--theme-btn-danger-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -833,6 +889,12 @@
   color: var(--theme-btn-danger-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-tertiary--border-color--active);
+  background-color: var(--theme-btn-danger-tertiary--background--active);
+  color: var(--theme-btn-danger-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }

package/dist/collection/components/card/card.css

@@ -47,7 +47,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -56,37 +56,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 .card-content {

package/dist/collection/components/card/card.js

@@ -18,11 +18,11 @@ export class Card {
      */
     passive = false;
     render() {
-        return (h(Host, { key: 'f03127d68ad6d11da72bcc3fd2b35c7f2f45c390', class: {
+        return (h(Host, { key: '15a5290b3c7e7741e0ffd7c3447e115361e6207b', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
                 passive: this.passive,
-            } }, h("div", { key: 'd509b3f44bd4a18fcb681d5c0679f1ee878d6a12', class: "card-content" }, h("slot", { key: 'f3517a1efda8bcf1a5ee9652450effdd04a01ea9' })), h("div", { key: '7e188b0dff328111f405b3c24b17cdf5ffe98c8d', class: "card-footer" }, h("slot", { key: '249d1d75a93c74866a112efc6cd8a1918740e4f2', name: "card-accordion" }))));
+            } }, h("div", { key: '57d26d3803b3fd0073a757763f9d1fac16c7aca8', class: "card-content" }, h("slot", { key: '552d0ac9710be3f27163e21044257a02a40ef7a5' })), h("div", { key: '81c426f0602f0004967ded8e1fc148db6fd252b1', class: "card-footer" }, h("slot", { key: '8905cdb307be920a456a74991dbfd2b4c278f5b0', name: "card-accordion" }))));
     }
     static get is() { return "ix-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-accordion/card-accordion.css

@@ -44,13 +44,14 @@
   flex-direction: column;
   width: 100%;
   transition: var(--theme-default-time) ease-in-out;
+  --ix-card-accordion-expanded-height: 14.75rem;
 }
 :host *,
 :host *::after,
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -59,37 +60,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 .expand-action {
@@ -124,40 +125,47 @@
   transform: rotate(180deg);
 }
 :host .expand-content {
-  display: grid;
+  display: block;
   position: relative;
-  grid-template-rows: 0fr;
-  transition: var(--theme-default-time) ease-in-out;
   width: 100%;
-  max-height: 14.75rem;
-  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  transition: height var(--theme-default-time) ease-in-out;
+}
+:host .expand-content::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: var(--ix-card-accordion-expand-content--border-radius, 0);
+  border-top: none;
 }
 :host .expand-content.show {
-  grid-template-rows: 14.75rem;
-  opacity: 1;
+  height: var(--ix-card-accordion-expanded-height);
 }
 :host .expand-content-inner {
   position: relative;
   height: 100%;
   overflow: hidden;
 }
-:host .expand-content.show .expand-content-body {
-  display: none;
-  overflow: hidden;
-  color: var(--theme-color-std-text);
+:host .expand-content-body {
+  opacity: 0;
+  transition: opacity var(--theme-default-time) ease-in-out;
 }
 :host .expand-content.show .expand-content-body {
   display: block;
   overflow: auto;
-  height: calc(100% - 1rem);
+  height: calc(var(--ix-card-accordion-expanded-height) - 1rem);
+  color: var(--theme-color-std-text);
+  opacity: 1;
 }
 :host .expand-content-footer {
   display: block;
-  position: relative;
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 1rem;
-  margin-top: auto;
-  margin-bottom: 0px;
   background-color: var(--theme-color-component-1);
   border-bottom-left-radius: var(--theme-default-border-radius);
   border-bottom-right-radius: var(--theme-default-border-radius);
@@ -175,8 +183,9 @@
 :host(.variant-outline) .expand-content {
   background-color: var(--theme-push-card-outline-accordion-frame--background);
 }
-:host(.variant-outline) .expand-content.show {
-  border: var(--theme-push-card-outline-accordion-frame--border-width, 0px) solid var(--theme-push-card-outline-accordion-frame--border-color);
+:host(.variant-outline) .expand-content::after {
+  border: var(--theme-push-card-outline-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-outline-accordion-frame--border-color);
 }
 :host(.variant-outline) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -197,8 +206,9 @@
 :host(.variant-filled) .expand-content {
   background-color: var(--theme-push-card-filled-accordion-frame--background);
 }
-:host(.variant-filled) .expand-content.show {
-  border: var(--theme-push-card-filled-accordion-frame--border-width, 0px) solid var(--theme-push-card-filled-accordion-frame--border-color);
+:host(.variant-filled) .expand-content::after {
+  border: var(--theme-push-card-filled-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-filled-accordion-frame--border-color);
 }
 :host(.variant-filled) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -219,8 +229,9 @@
 :host(.variant-alarm) .expand-content {
   background-color: var(--theme-push-card-alarm-accordion-frame--background);
 }
-:host(.variant-alarm) .expand-content.show {
-  border: var(--theme-push-card-alarm-accordion-frame--border-width, 0px) solid var(--theme-push-card-alarm-accordion-frame--border-color);
+:host(.variant-alarm) .expand-content::after {
+  border: var(--theme-push-card-alarm-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-alarm-accordion-frame--border-color);
 }
 :host(.variant-alarm) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -241,8 +252,9 @@
 :host(.variant-critical) .expand-content {
   background-color: var(--theme-push-card-critical-accordion-frame--background);
 }
-:host(.variant-critical) .expand-content.show {
-  border: var(--theme-push-card-critical-accordion-frame--border-width, 0px) solid var(--theme-push-card-critical-accordion-frame--border-color);
+:host(.variant-critical) .expand-content::after {
+  border: var(--theme-push-card-critical-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-critical-accordion-frame--border-color);
 }
 :host(.variant-critical) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -263,8 +275,9 @@
 :host(.variant-warning) .expand-content {
   background-color: var(--theme-push-card-warning-accordion-frame--background);
 }
-:host(.variant-warning) .expand-content.show {
-  border: var(--theme-push-card-warning-accordion-frame--border-width, 0px) solid var(--theme-push-card-warning-accordion-frame--border-color);
+:host(.variant-warning) .expand-content::after {
+  border: var(--theme-push-card-warning-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-warning-accordion-frame--border-color);
 }
 :host(.variant-warning) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -285,8 +298,9 @@
 :host(.variant-success) .expand-content {
   background-color: var(--theme-push-card-success-accordion-frame--background);
 }
-:host(.variant-success) .expand-content.show {
-  border: var(--theme-push-card-success-accordion-frame--border-width, 0px) solid var(--theme-push-card-success-accordion-frame--border-color);
+:host(.variant-success) .expand-content::after {
+  border: var(--theme-push-card-success-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-success-accordion-frame--border-color);
 }
 :host(.variant-success) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -307,8 +321,9 @@
 :host(.variant-info) .expand-content {
   background-color: var(--theme-push-card-info-accordion-frame--background);
 }
-:host(.variant-info) .expand-content.show {
-  border: var(--theme-push-card-info-accordion-frame--border-width, 0px) solid var(--theme-push-card-info-accordion-frame--border-color);
+:host(.variant-info) .expand-content::after {
+  border: var(--theme-push-card-info-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-info-accordion-frame--border-color);
 }
 :host(.variant-info) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -329,8 +344,9 @@
 :host(.variant-neutral) .expand-content {
   background-color: var(--theme-push-card-neutral-accordion-frame--background);
 }
-:host(.variant-neutral) .expand-content.show {
-  border: var(--theme-push-card-neutral-accordion-frame--border-width, 0px) solid var(--theme-push-card-neutral-accordion-frame--border-color);
+:host(.variant-neutral) .expand-content::after {
+  border: var(--theme-push-card-neutral-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-neutral-accordion-frame--border-color);
 }
 :host(.variant-neutral) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -351,8 +367,9 @@
 :host(.variant-primary) .expand-content {
   background-color: var(--theme-push-card-primary-accordion-frame--background);
 }
-:host(.variant-primary) .expand-content.show {
-  border: var(--theme-push-card-primary-accordion-frame--border-width, 0px) solid var(--theme-push-card-primary-accordion-frame--border-color);
+:host(.variant-primary) .expand-content::after {
+  border: var(--theme-push-card-primary-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-primary-accordion-frame--border-color);
 }
 :host(.variant-primary) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);

package/dist/collection/components/card-accordion/card-accordion.js

@@ -51,6 +51,9 @@ export class CardAccordion {
     }
     scrollExpandedContentIntoView() {
         setTimeout(() => {
+            if (!this.expandedContent) {
+                return;
+            }
             const rect = this.expandedContent.getBoundingClientRect();
             if (rect.bottom > window.innerHeight) {
                 this.hostElement
@@ -63,15 +66,15 @@ export class CardAccordion {
         this.onInitialExpandChange();
     }
     render() {
-        return (h(Host, { key: '5895eac0bfacb903c7c0d4b8119fa1c5740d0a38', slot: "card-accordion", class: {
+        return (h(Host, { key: '6ab37d107ccca9e0d342653a80b4ebb05f838bf6', slot: "card-accordion", class: {
                 [`variant-${this.variant}`]: true,
-            } }, h("button", { key: '269999da5591350946e1f2cf9f767617f0afbeec', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId(), "aria-label": this.ariaLabelExpandButton }, h("ix-icon", { key: '566dd098a706b8a6f3e6d92d00f05d768fe429c3', name: iconChevronDownSmall, class: {
+            } }, h("button", { key: 'c2d9f8703cd03d006a1f0a10488c65df7f25d07d', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId(), "aria-label": this.ariaLabelExpandButton }, h("ix-icon", { key: 'e52734bc0d748eb648737af3ecff9c809ec5f7eb', name: iconChevronDownSmall, class: {
                 'expand-icon': true,
                 show: this.expandContent,
-            } })), h("div", { key: '38259672ff7307ab14d1f90216950aace14bfe1b', class: {
+            } })), h("div", { key: '0f000ebd3e93623fe4c0cf9c3c322f98bc79c23d', class: {
                 'expand-content': true,
                 show: this.expandContent,
-            } }, h("div", { key: 'a9c79af5f2beea7bc3cc5f9f5c182438c363e220', class: "expand-content-inner" }, h("div", { key: 'a460bd87f4f7e1eb40072a756f9f1ffcd23451eb', class: "expand-content-body" }, h("slot", { key: '916a58024ec98a54b9e348de6544d48981824e5f' })), h("div", { key: '9f45502dfb26f863e4a010e237bc7db3de534f45', class: "expand-content-footer" })))));
+            } }, h("div", { key: '1bdc7c69f1c256e509a4b6c55e99eeb1c2959f40', class: "expand-content-inner" }, h("div", { key: 'c9d502bdbb504f220a2c89831ef102916cd2dbcc', class: "expand-content-body" }, h("slot", { key: '647904aa76abd086e3ff80970cdee286c8fb1cf9' })), h("div", { key: '5fdbf86a8769e2cca9f2174eafd4e7e80e6058a3', class: "expand-content-footer" })))));
     }
     static get is() { return "ix-card-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -42,37 +42,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-wrapper {

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h(Host, { key: '1198efe8d8ff7651bf7388ef59a441dacb56893d' }, h("div", { key: 'af4efb9e309955fd6ec9e07e32d477655a6db7c3', class: "content-wrapper" }, h("slot", { key: '661b91d70973f16ae60a9eacb1f58a8b7e3cdc98' }))));
+        return (h(Host, { key: '4c2a84698ddf61f4184e993456d79b07550dc042' }, h("div", { key: '5ec46b0774b98ba160e327b476cfdec7eefcde53', class: "content-wrapper" }, h("slot", { key: '301740b685022b62e8d45eb236c926992158fa49' }))));
     }
     static get is() { return "ix-card-content"; }
     static get encapsulation() { return "shadow"; }