@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/pane-layout/pane-layout.css

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

package/dist/collection/components/pane-layout/pane-layout.js

@@ -245,7 +245,7 @@ export class Panes {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: '59257c3e7c7b3b309f151706e51a1730c36ebec0' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: 'a444c673030d9f134bea3842c2e2610715c45752' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/dist/collection/components/pill/pill.css

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

package/dist/collection/components/pill/pill.js

@@ -91,13 +91,13 @@ export class Pill extends Mixin(...DefaultMixins) {
             hostRole = 'group';
         }
         const iconIsDecorative = !this.ariaLabelIcon?.trim();
-        return (h(Host, { key: '827e58b1bdd980292651befee4ad756cbea0699f', style: this.variant === 'custom'
+        return (h(Host, { key: 'a68cdabb69942bd85c2d229ff0de5b0e4870fac8', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.pillColor,
                 }
                 : {}, class: {
                 'align-left': this.alignLeft,
-            }, role: hostRole }, h("div", { key: 'f50b1d1f5a36ae985e55c66d97723640dcbd667f', ref: this.containerElementRef, style: { ...customStyle }, class: {
+            }, role: hostRole }, h("div", { key: '7fea53cccace32e07ca035dcf78382c237d60e4e', ref: this.containerElementRef, style: { ...customStyle }, class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -112,9 +112,9 @@ export class Pill extends Mixin(...DefaultMixins) {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, this.icon && (h("ix-icon", { key: '8f24375cb42813b0a651997a672fda5c9c16b8d3', class: {
+            } }, this.icon && (h("ix-icon", { key: '7961f3198ebd6c876284f624f59f356968f56768', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative) })), h("span", { key: '356a8805398e1978e5c7bfe61e3c383d0f4af640', class: "slot-container" }, h("slot", { key: 'ac249a29b4cbf9cba9d0fef7b2c5a8992d4f9c3d', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative) })), h("span", { key: '51c432b9308c9196ba5dc1c0875a4e081c856589', class: "slot-container" }, h("slot", { key: '1aee2adfc52e1e1ed00d6947bb73fd0f5dcae6ff', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/popover.js

@@ -187,6 +187,7 @@ export class Popover extends Mixin(...DefaultMixins, InheritAriaAttributesMixin,
         }
     }
     connectedCallback() {
+        super.connectedCallback();
         if (this.hasDisconnected) {
             popoverController.connected(this);
             void this.initializePopover();
@@ -208,6 +209,7 @@ export class Popover extends Mixin(...DefaultMixins, InheritAriaAttributesMixin,
         }
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         this.hasDisconnected = true;
         this.clearHideTimeout();
         this.disposeAutoUpdate?.();
@@ -670,7 +672,7 @@ export class Popover extends Mixin(...DefaultMixins, InheritAriaAttributesMixin,
         }
     }
     render() {
-        return (h(Host, { key: '95dbf143e674bcb0cd976c114a892201c42af6f4', class: { visible: this.show }, "data-ix-popover": this.popoverPanelId }, h("dialog", { key: 'd674675e90ef6288047117e5058c18dd8233378d', ref: this.dialogRef, id: this.popoverPanelId, class: "dialog", popover: "manual", inert: !this.show, ...this.inheritAriaAttributes, role: this.inheritAriaAttributes['role'] ?? 'dialog', onMouseEnter: () => this.onDialogMouseEnter(), onMouseLeave: () => this.onDialogMouseLeave() }, h("div", { key: 'b0a7901412a53cff56518a7776b58ba392ba7b21', class: "popover-container" }, h("div", { key: '1226cfeb2110a8d628e50404d72d4ecd0c4f3a8b', class: "popover-body" }, h("slot", { key: '6c5701b2a20896db8fccf4edd67d9c65c1a81d36' })), this.hasSpike ? h("div", { class: "spike" }) : null))));
+        return (h(Host, { key: '800528be7326703a5fca61e0a03e90b3e6231905', class: { visible: this.show }, "data-ix-popover": this.popoverPanelId }, h("dialog", { key: 'a7b501ed22173801f1820b2ae1e47edd50d3a596', ref: this.dialogRef, id: this.popoverPanelId, class: "dialog", popover: "manual", inert: !this.show, ...this.inheritAriaAttributes, role: this.inheritAriaAttributes['role'] ?? 'dialog', onMouseEnter: () => this.onDialogMouseEnter(), onMouseLeave: () => this.onDialogMouseLeave() }, h("div", { key: '804589dd5243897bd9965abee685fcf0608b3398', class: "popover-container" }, h("div", { key: '0607a218729bd1715ee8eccf06f83cdd1938db8e', class: "popover-body" }, h("slot", { key: '481b1891c9a092597f2b483d3e8237821769d583' })), this.hasSpike ? h("div", { class: "spike" }) : null))));
     }
     static get is() { return "ix-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/test/popover.page.js

@@ -257,8 +257,9 @@ export async function expectPlacement(page, triggerSelector, popover, placement)
     await expect(async () => {
         const triggerBox = await page.locator(triggerSelector).boundingBox();
         const dialogBox = await getDialog(popover).boundingBox();
-        expect(triggerBox).not.toBeNull();
-        expect(dialogBox).not.toBeNull();
+        if (!triggerBox || !dialogBox) {
+            throw new Error('Expected trigger and popover dialog bounding boxes to exist');
+        }
         const tolerance = 24;
         if (placement === 'bottom') {
             expect(dialogBox.y).toBeGreaterThanOrEqual(triggerBox.y + triggerBox.height - tolerance);

package/dist/collection/components/popover-content/popover-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;
 }
 

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

@@ -23,7 +23,7 @@ export class PopoverContent {
      */
     noPadding = false;
     render() {
-        return (h(Host, { key: '4905ed4b5a260f7e700c05a4a5525a8fdc14c8e9', class: { 'no-padding': this.noPadding }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("slot", { key: '03f85fc0aaea7387b08019f8ed7c4e80378d0c3a' })));
+        return (h(Host, { key: '62863d14ea5e0bb9f56e6e1f179a377beb6b7395', class: { 'no-padding': this.noPadding }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("slot", { key: '389aef8f188d4770e11ffd7ac9e67b7f845b01c7' })));
     }
     static get is() { return "ix-popover-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-footer/popover-footer.css

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

package/dist/collection/components/popover-footer/popover-footer.js

@@ -24,7 +24,7 @@ export class PopoverFooter {
      */
     alignment = 'horizontal';
     render() {
-        return (h(Host, { key: '66ac122a1578b7645271c21515ab100447035640', class: { [`alignment-${this.alignment}`]: true }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("div", { key: '5f5a73150f77fb39f7ef3b704bbecbde88c6fd5c', class: "footer-start" }, h("slot", { key: '84e99847b724a2acf40417513820e23c9dc95fed', name: "start" })), h("div", { key: '95cf2bbf6ce27684c37974d64b3d4c36b8e60bd6', class: "footer-end" }, h("slot", { key: 'bb9ea5b049a7d6716cfcad5fc6a25bc5b59443c1' }))));
+        return (h(Host, { key: '6807df77153dc545a04a6babd5d55dcf9f3e0adb', class: { [`alignment-${this.alignment}`]: true }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("div", { key: '25af3f6651e72be055e0e4d0c4ff89c644b059dd', class: "footer-start" }, h("slot", { key: '43142b46cfe1334343d38cdc5d3b0340916cbfaf', name: "start" })), h("div", { key: '8cdd1696cc0bf0091266d40dad5aff071cb0e74d', class: "footer-end" }, h("slot", { key: '3810b5a7bdebd817494ccbf0e46e5d41db3cb43c' }))));
     }
     static get is() { return "ix-popover-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-header/popover-header.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 .popover-title {

package/dist/collection/components/popover-header/popover-header.js

@@ -66,7 +66,7 @@ export class PopoverHeader {
         this.parentPopover?.hidePopover();
     }
     render() {
-        return (h(Host, { key: 'd6b5d04790192d4212e60d39ce685a18b5dcc72a', [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "24", "aria-hidden": a11yBoolean(true) })) : null, h("div", { key: '37a9433e60b19c2a191db75ee475586a36b7d4a0', class: "popover-title" }, h("ix-typography", { key: '866758b0c589aef950896e06f00096520311851a', format: "h5" }, h("slot", { key: '6cfa745b62f705ddd2b8076ecf9e634cc8fac309' }))), h("div", { key: '671bfd6538e4540d75051c960a963949bd26d9d8', class: "additional-items" }, h("slot", { key: '8b8c48055f58111077cfdede40f977691180250e', name: "additional-items" })), this.hideClose ? null : (h("ix-icon-button", { class: "popover-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, "aria-label": this.ariaLabelCloseIconButton }))));
+        return (h(Host, { key: '76d1a3d16977a65199b5fe65bf1695936ef32261', [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "24", "aria-hidden": a11yBoolean(true) })) : null, h("div", { key: '657a03037f738a7d6eda5882e81daee2adb865dc', class: "popover-title" }, h("ix-typography", { key: 'b2b73f314f4831e17e77187126be81ba7c349ca1', format: "h5" }, h("slot", { key: '4b2764e2af36d94fdfb7f175354291fcacbb701e' }))), h("div", { key: '18708b2c35c85c1a9bafe0b66b004fa142b2c116', class: "additional-items" }, h("slot", { key: '8ff6074594f854d8e220f8da8364b4b69f8c6c7e', name: "additional-items" })), this.hideClose ? null : (h("ix-icon-button", { class: "popover-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, "aria-label": this.ariaLabelCloseIconButton }))));
     }
     static get is() { return "ix-popover-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-image/popover-image.css

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

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -96,17 +96,17 @@ export class ProgressIndicator {
     render() {
         const normalizedValue = ((this.value - this.min) / (this.max - this.min)) * 100;
         const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
-        return (h(Host, { key: 'a0fda23f6a532303c9995fbf7815bfec062a14ab', class: {
+        return (h(Host, { key: '05a0f4409950bd14852a4b4e8573ddd8ecd3288a', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, h("div", { key: 'e02e07ba370860bfe2be7ce663b78c4cf71f12c3', class: {
+            }, tabIndex: -1 }, h("div", { key: '7a4e59690c101846dfbcb57ee04f8143b9f7b71b', class: {
                 'progress-indicator': true,
                 [this.size]: true,
                 [this.status]: true,
                 ['text-center']: this.textAlignment === 'center',
                 ['text-left']: this.textAlignment === 'left',
                 ['text-right']: this.textAlignment === 'right',
-            } }, this.label && (h("ix-typography", { key: 'd9789ab69c7879fcaf0142fc5751162c5b7b2106', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: '7c10251bb3f06e02985df158da20d539ec23c4d2', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
+            } }, this.label && (h("ix-typography", { key: 'ce97142eb085bac72ea662adcb2c486c186e03b0', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: '8a188d3971f1016f3fc858d59fac134d33a43153', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
     }
     static get is() { return "ix-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,35 +38,105 @@
 :host(.card-outline) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-outline-accordion--border-color);
 }
+:host(.card-outline) ix-card-accordion {
+  --theme-push-card-outline-accordion--background--hover: var(--theme-push-card-outline-accordion--background);
+  --theme-push-card-outline-accordion--background--active: var(--theme-push-card-outline-accordion--background);
+  --theme-push-card-outline-accordion-frame--border-color: var(--theme-push-card-outline-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-background: var(--theme-color-component-1);
+  --theme-push-card-outline-accordion-frame--border-color: var(--theme-color-soft-bdr);
+}
+:host(.card-outline) ix-card {
+  --ix-card-border-color: var(--theme-color-soft-bdr);
+}
+:host(.card-outline) ix-card:hover, :host(.card-outline) ix-card:active {
+  --ix-card-border-color: var(--theme-color-soft-bdr);
+}
 
 :host(.card-filled) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-filled-accordion--border-color);
 }
+:host(.card-filled) ix-card-accordion {
+  --theme-push-card-filled-accordion--background--hover: var(--theme-push-card-filled-accordion--background);
+  --theme-push-card-filled-accordion--background--active: var(--theme-push-card-filled-accordion--background);
+  --theme-push-card-filled-accordion-frame--border-color: var(--theme-push-card-filled-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-background: var(--theme-color-component-1);
+}
 
 :host(.card-alarm) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-alarm-accordion--border-color);
 }
+:host(.card-alarm) ix-card-accordion {
+  --theme-push-card-alarm-accordion--background--hover: var(--theme-push-card-alarm-accordion--background);
+  --theme-push-card-alarm-accordion--background--active: var(--theme-push-card-alarm-accordion--background);
+  --theme-push-card-alarm-accordion-frame--border-color: var(--theme-push-card-alarm-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-accordion-expand-content--border-radius: 0 0 calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width)) calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width));
+}
 
 :host(.card-critical) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-critical-accordion--border-color);
 }
+:host(.card-critical) ix-card-accordion {
+  --theme-push-card-critical-accordion--background--hover: var(--theme-push-card-critical-accordion--background);
+  --theme-push-card-critical-accordion--background--active: var(--theme-push-card-critical-accordion--background);
+  --theme-push-card-critical-accordion-frame--border-color: var(--theme-push-card-critical-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-accordion-expand-content--border-radius: 0 0 calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width)) calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width));
+}
 
 :host(.card-warning) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-warning-accordion--border-color);
 }
+:host(.card-warning) ix-card-accordion {
+  --theme-push-card-warning-accordion--background--hover: var(--theme-push-card-warning-accordion--background);
+  --theme-push-card-warning-accordion--background--active: var(--theme-push-card-warning-accordion--background);
+  --theme-push-card-warning-accordion-frame--border-color: var(--theme-push-card-warning-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-accordion-expand-content--border-radius: 0 0 calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width)) calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width));
+}
 
 :host(.card-success) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-success-accordion--border-color);
 }
+:host(.card-success) ix-card-accordion {
+  --theme-push-card-success-accordion--background--hover: var(--theme-push-card-success-accordion--background);
+  --theme-push-card-success-accordion--background--active: var(--theme-push-card-success-accordion--background);
+  --theme-push-card-success-accordion-frame--border-color: var(--theme-push-card-success-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-accordion-expand-content--border-radius: 0 0 calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width)) calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width));
+}
 
 :host(.card-info) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-info-accordion--border-color);
 }
+:host(.card-info) ix-card-accordion {
+  --theme-push-card-info-accordion--background--hover: var(--theme-push-card-info-accordion--background);
+  --theme-push-card-info-accordion--background--active: var(--theme-push-card-info-accordion--background);
+  --theme-push-card-info-accordion-frame--border-color: var(--theme-push-card-info-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-accordion-expand-content--border-radius: 0 0 calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width)) calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width));
+}
 
 :host(.card-neutral) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-neutral-accordion--border-color);
 }
+:host(.card-neutral) ix-card-accordion {
+  --theme-push-card-neutral-accordion--background--hover: var(--theme-push-card-neutral-accordion--background);
+  --theme-push-card-neutral-accordion--background--active: var(--theme-push-card-neutral-accordion--background);
+  --theme-push-card-neutral-accordion-frame--border-color: var(--theme-push-card-neutral-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-accordion-expand-content--border-radius: 0 0 calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width)) calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width));
+}
 
 :host(.card-primary) ix-card-content {
   border-bottom: var(--theme-push-card--border-width) solid var(--theme-push-card-primary-accordion--border-color);
+}
+:host(.card-primary) ix-card-accordion {
+  --theme-push-card-primary-accordion--background--hover: var(--theme-push-card-primary-accordion--background);
+  --theme-push-card-primary-accordion--background--active: var(--theme-push-card-primary-accordion--background);
+  --theme-push-card-primary-accordion-frame--border-color: var(--theme-push-card-primary-accordion--background);
+  --ix-card-accordion-expand-content--border-radius: 0 0 var(--theme-default-border-radius) var(--theme-default-border-radius);
+  --ix-card-accordion-expand-content--border-radius: 0 0 calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width)) calc(var(--theme-default-border-radius) + var(--theme-push-card--border-width));
 }

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

@@ -47,7 +47,7 @@ export class PushCard {
      */
     passive = false;
     render() {
-        return (h(Host, { key: '559d12fce394d034e88a67d1792cf89db5e1f9d6', class: `card-${this.variant}` }, h("ix-card", { key: '74a3295376423e02defc79637f53905f1975a10e', variant: this.variant, passive: this.passive }, h("ix-card-content", { key: 'e88ae5131c174acebb759628d6de18bdf26d8141' }, h("ix-card-title", { key: '6c1df74de6c6e7b82a6301db6ecc6268d4891e47' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '0f1b79fd78aa5b954c6320b9f61dbbcab61ef3c7', format: "display-xxl" }, this.notification ?? 0), h("slot", { key: '778a56994a47ad9e8fbcee8526c592e6e0459930', name: "title-action" })), h("ix-typography", { key: '5a3b385c75a69f0324fc890c2519476111bc2a4e', format: "h4" }, this.heading), h("ix-typography", { key: '6f261327133e30244fe398c91e099b3dcba848fa' }, this.subheading)), h("ix-card-accordion", { key: '3175d45b32f0d9a1eaccb205a3052b5746fc5287', collapse: !this.expanded, variant: this.variant }, h("slot", { key: '08b90be54cd2d292349ead1ce20a173104ce266e' })))));
+        return (h(Host, { key: '0f239a6558a0ccb0287124bb256a7d7d6256dc8e', class: `card-${this.variant}` }, h("ix-card", { key: 'e512c612e4c0fef3a5ec1d375d653db177b90aca', variant: this.variant, passive: this.passive }, h("ix-card-content", { key: '5c587c9b4698117ffda6104a402f3887cae9cdcc' }, h("ix-card-title", { key: '5f541549ea22b378bc26446f0f68feb8b8926c33' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '363d4ecfe1196bbc591376b9a0405f91c8b6f55d', format: "display-xxl" }, this.notification ?? 0), h("slot", { key: '8ab001894e21f7bd60861015c5d54d2eb14ab3d1', name: "title-action" })), h("ix-typography", { key: '831bc352f52398683fd251dfacfcc2292539a3b5', format: "h4" }, this.heading), h("ix-typography", { key: '8e47745fbef875019a99a7f017975ac4a722db09' }, this.subheading)), h("ix-card-accordion", { key: '43d0965dd8950bba104de8b207cae142c69e1d58', collapse: !this.expanded, variant: this.variant }, h("slot", { key: '92a7fe73f9b6561707057d9daef3f70bba13a667' })))));
     }
     static get is() { return "ix-push-card"; }
     static get encapsulation() { return "shadow"; }