npm - @siemens/ix - Versions diffs - 5.1.0 → 5.2.0 - Mend

@siemens/ix 5.1.0 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (941) hide show

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

@@ -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 CHANGED Viewed

@@ -11,7 +11,7 @@ import { TRAP_FOCUS_INCLUDE_ATTRIBUTE } from "../utils/focus/focus-trap";
 /**
  * Footer section for actions and optional leading metadata.
  *
- * @slot - Footer actions (typically buttons), aligned to the end.
+ * @slot default - Footer actions (typically buttons), aligned to the end.
  * @slot start - Optional leading content (for example version text or step indicators).
  *
  * @since 5.1.0
@@ -24,7 +24,7 @@ export class PopoverFooter {
      */
     alignment = 'horizontal';
     render() {
-        return (h(Host, { key: '7bab2eff391dce0ec212153f377ae18cc17df0d7', class: { [`alignment-${this.alignment}`]: true }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("div", { key: '238db3b5532bf4bf6cbe07018a204e1bf4a85a07', class: "footer-start" }, h("slot", { key: '8bdafda85a6c0a4e8f0e5e0bc7f3d9e61fed5b99', name: "start" })), h("div", { key: '42f53fb182fe5a0b91df29cef856c94e87756e2a', class: "footer-end" }, h("slot", { key: 'bb4dab35e016c975e7d29c1dbbff53222d801228' }))));
+        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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -14,7 +14,7 @@ import { closestPassShadow } from "../utils/shadow-dom";
 /**
  * Header section with optional icon, title, additional items, and close button.
  *
- * @slot - Popover title (rendered as heading text).
+ * @slot default - Popover title (rendered as heading text).
  * @slot additional-items - Optional content beside the title (for example `ix-pill`).
  *
  * @since 5.1.0
@@ -66,7 +66,7 @@ export class PopoverHeader {
         this.parentPopover?.hidePopover();
     }
     render() {
-        return (h(Host, { key: 'd75ad6fc30a8b3df9d1588fc18be610f19946a15', [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: 'c5db5b3c4d9537f1b5ec2d53eda5d94aba0984d5', class: "popover-title" }, h("ix-typography", { key: '0c87f6cb01be5089a35f0eeb30e6aa7743865eef', format: "h5" }, h("slot", { key: 'd5bcd06f9dd501f7f52861d0ed2c6dd967bd8196' }))), h("div", { key: 'fa7365f8ddce2cd12f92165160fb780426a994ce', class: "additional-items" }, h("slot", { key: 'b093c196c32eff075d65a5a9e570292174a1f943', 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -12,6 +12,8 @@ import { iconCirclePause, iconError, iconInfo, iconSuccess, iconWarning, } from
 import { CircularProgress } from "./circular";
 /**
  * @since 3.2.0
+ * @slot helper-text - Custom helper text content.
+ * @slot default - Content displayed with the progress indicator.
  */
 export class ProgressIndicator {
     hostElement;
@@ -94,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: '4c8ce44855219cefbe2adc70d46d6194d02edc2d', class: {
+        return (h(Host, { key: '05a0f4409950bd14852a4b4e8573ddd8ecd3288a', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, h("div", { key: '4204012c4368150615e95d16bc52026a9ae893c6', 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: '522744e8f2be71e94fa6e87ec1f053c9f2b141fe', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: 'c5a2069c251c44ff3a33bfe7caea66f657b03d5e', 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -7,6 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot title-action - Action displayed next to the card title.
+ * @slot default - Expandable card content.
+ */
 export class PushCard {
     /**
      * Card icon
@@ -43,7 +47,7 @@ export class PushCard {
      */
     passive = false;
     render() {
-        return (h(Host, { key: '4f607dbe48bd80e6528f16d3dd70b1759e00f643', class: `card-${this.variant}` }, h("ix-card", { key: '4fafba1c8dbdd0b8503c14c53dc3c888567725c7', variant: this.variant, passive: this.passive }, h("ix-card-content", { key: 'c7ac7e9ea9061af15c28ad79b3773ac4cd511a93' }, h("ix-card-title", { key: '4206e4413e42e914b11526b40e44cd5e5360d403' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '91384db0e1c690aa9715bda38220127f545353b3', format: "display-xxl" }, this.notification ?? 0), h("slot", { key: '37cb75b3f6c2578cfa958982c20a5f0c9fa661dc', name: "title-action" })), h("ix-typography", { key: '349b36fe5eaa7faf0b8fa9da84b8b201fd1a173d', format: "h4" }, this.heading), h("ix-typography", { key: 'edd40ab8765df06b960b8014e318f06cd8c0f56f' }, this.subheading)), h("ix-card-accordion", { key: 'db0a3f66d0ea0fc8bed61b15651bea6381d812b1', collapse: !this.expanded, variant: this.variant }, h("slot", { key: '5095d6f7f3f9b23c17daccf9599ede0426db8b01' })))));
+        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"; }

package/dist/collection/components/radio/radio.css CHANGED Viewed

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

package/dist/collection/components/radio/radio.js CHANGED Viewed

@@ -11,6 +11,7 @@ import { a11yBoolean } from "../utils/a11y";
 import { createClassMutationObserver, } from "../utils/input";
 /**
  * @form-ready
+ * @slot default - Radio button label.
  */
 export class Radio {
     hostElement;
@@ -137,17 +138,17 @@ export class Radio {
         if (this.disabled) {
             tabIndex = -1;
         }
-        return (h(Host, { key: '38a5132a44f733662ff6b744cb4469595df3d2b9', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
+        return (h(Host, { key: '18a9d8d27e3da2d36681f0681caeee84ed943efd', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
                 disabled: this.disabled,
                 checked: this.checked,
             }, onClick: () => {
                 if (this.disabled)
                     return;
                 this.setCheckedState(true);
-            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: '2505290137ef4bf9771119b347c95896afd3bfb2' }, h("div", { key: '774c09d5a0bb29a13cf6fb091e912f81d17e3ea8', class: "radio-button" }, h("div", { key: '1a44e92780fa8fa8ecee253400b23febfa3de481', "aria-hidden": "true", class: {
+            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: '22db33f534a61abca396ce3c05f30b490327e417' }, h("div", { key: '0ad8548b87a63cded792ad6dee63e4ba018a0aa0', class: "radio-button" }, h("div", { key: '9b8fbaa25b7f4307f4a820a99a80dd3a01272604', "aria-hidden": "true", class: {
                 ['radio-checkmark']: true,
                 checked: this.checked,
-            } }, h("div", { key: 'e2e26bd36cbc7c94be84fed124f30dda3aee4086', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'c96621fb5011671d18b32d38bb619585ba2aaa35', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '849c0c96db14348798bb2ca509e3e828dfd40600' }))))));
+            } }, h("div", { key: 'a8e10d030150643478be8e859e47b7654ecdcdba', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'a0c8ddcf036d2ade8ed14813dff4d3ce8fc664ff', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '35fd78b7b432ced026ac0824f64633f64b8b4441' }))))));
     }
     static get is() { return "ix-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/radio-group.js CHANGED Viewed

@@ -21,6 +21,7 @@ import { HookValidationLifecycle, } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
 /**
  * @form-ready
+ * @slot default - Radio buttons displayed in the group.
  */
 export class RadiobuttonGroup {
     hostElement;
@@ -182,10 +183,10 @@ export class RadiobuttonGroup {
         nextRadio.focus();
     }
     render() {
-        return (h(Host, { key: '52fe1cdeb484f3114564701e714e686479ad27cb', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '21591f15dbea1dbbe7fcf625b4f866ecfc95f8bb', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '1acbd13c448af7fc4b76690ceafe8afbf19e66b8', class: {
+        return (h(Host, { key: 'cf5b18bd56a508fd420c9c3708e484e511b7fe0d', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '2337eef1982364f930394ab1d0493e990e836390', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: 'e478c75175c239733f25e0f183d353b8bbbc07a5', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: 'cca579b75a01d8bd2755de0eb5d1e48e1eb2125d' })))));
+            } }, h("slot", { key: '136f6fd87c1f3d367cc5dff13040e7fa176726aa' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/range-field/range-field.css CHANGED Viewed

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

package/dist/collection/components/range-field/range-field.js CHANGED Viewed

@@ -12,6 +12,9 @@ import { isIxInputFieldComponent, isIxInputFieldWithPickerComponent, } from "../
 import { DefaultMixins } from "../utils/internal/component";
 import { hasKeyboardMode } from "../utils/internal/mixins/setup.mixin";
 import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+/**
+ * @slot default - Range field controls.
+ */
 export class RangeField extends Mixin(...DefaultMixins) {
     constructor() {
         super();
@@ -115,10 +118,10 @@ export class RangeField extends Mixin(...DefaultMixins) {
         requestAnimationFrameNoNgZone(() => secondElement.openPicker());
     }
     render() {
-        return (h(Host, { key: 'a3fe83cc2529f7b415a7c2b7cc6f03685078df51', class: { 'hide-arrow': this.hideArrow }, role: "group" }, !this.hideArrow && (h("ix-icon", { key: '10503bc358606a043a4cd3f56c399bc500fb4714', "aria-hidden": "true", class: {
+        return (h(Host, { key: '39e0e73fb8615f11206cf7e9d296d3ec5c671017', class: { 'hide-arrow': this.hideArrow }, role: "group" }, !this.hideArrow && (h("ix-icon", { key: 'df1a75792a9d184e1e705fd2a93ffbc8068ce8d6', "aria-hidden": "true", class: {
                 'range-delimiter': true,
                 'has-label': this.hasLabel,
-            }, name: iconArrowRight })), h("slot", { key: '2b97358a113fa98803c17dda0d1202d94d1cdc34' })));
+            }, name: iconArrowRight })), h("slot", { key: '8019b4ace67118363d86d719e3545419ddbad975' })));
     }
     static get is() { return "ix-range-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js CHANGED Viewed

@@ -7,9 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Row content.
+ */
 export class Row {
     render() {
-        return (h(Host, { key: 'd196cf5b6609b66fd1d8e60175373e6463faec5c' }, h("slot", { key: 'cd5208fe0e779fb69579e8f9bbc1af21572d8bbc' })));
+        return (h(Host, { key: 'dc089e8a0a641e78f237510b27c5198fe23915a4' }, h("slot", { key: '92cb22bde2c9b89a4dc57d0a8fc2434886cabc72' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.css CHANGED Viewed

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