@siemens/ix 2.6.0 → 2.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../../src/components/pill/pill.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,IAAI;;uBAcA,SAAS;uBAKN,KAAK;;;;;yBA4BH,KAAK;;IAEzB,MAAM;;QACJ,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC9B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,UAAU;aACpE,CAAC;QACJ,CAAC;QACD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACvB,CAAC,CAAC;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;gBACH,CAAC,CAAC,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B;YAED,4DACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;oBACL,SAAS,EAAE,IAAI;oBACf,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,QAAQ,EAAE,KAAK;oBACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;oBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;oBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;oBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;oBACjC,QAAQ,EAAE,KAAK;oBACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;iBAClB;gBAED,gEACE,KAAK,EAAE;wBACL,WAAW,EAAE,IAAI;wBACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;qBACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV;gBACF,6DAAM,KAAK,EAAC,gBAAgB;oBAC1B,8DAAa,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-pill',\n  styleUrl: 'pill.scss',\n  shadow: true,\n})\nexport class Pill {\n  @Element() el: HTMLIxPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   *\n   * @deprecated since 2.1.0 use `pill-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() pillColor: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.pillColor ?? this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n    return (\n      <Host\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.pillColor ?? this.color,\n              }\n            : {}\n        }\n        title={this.el.textContent}\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: false,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: false,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: this.icon === undefined || this.icon === '',\n            }}\n            name={this.icon}\n            size={'16'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../../src/components/pill/pill.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQzE,MAAM,OAAO,IAAI;;uBAcA,SAAS;uBAKN,KAAK;;;;;yBA4BH,KAAK;wBAEL,KAAK;;IAEzB,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAEO,uBAAuB;QAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QACzD,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;QAEtD,IAAI,CAAC,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,cAAc,CAAC;IAClD,CAAC;IAED,MAAM;;QACJ,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC9B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,UAAU;aACpE,CAAC;QACJ,CAAC;QACD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACvB,CAAC,CAAC;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;gBACH,CAAC,CAAC,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,EACnC,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B;YAED,4DACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;oBACL,SAAS,EAAE,IAAI;oBACf,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,QAAQ,EAAE,KAAK;oBACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;oBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;oBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;oBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;oBACjC,QAAQ,EAAE,KAAK;oBACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;oBACjB,UAAU,EAAE,CAAC,IAAI,CAAC,QAAQ;iBAC3B;gBAED,gEACE,KAAK,EAAE;wBACL,WAAW,EAAE,IAAI;wBACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;qBACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV;gBACF,6DAAM,KAAK,EAAC,gBAAgB;oBAC1B,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,GAAS,CAC5D,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-pill',\n  styleUrl: 'pill.scss',\n  shadow: true,\n})\nexport class Pill implements IxComponent {\n  @Element() hostElement!: HTMLIxPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   *\n   * @deprecated since 2.1.0 use `pill-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() pillColor: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  @State() iconOnly = false;\n\n  componentWillLoad() {\n    this.checkIfContentAvailable();\n  }\n\n  private checkIfContentAvailable() {\n    const hasChildren = this.hostElement.children.length > 0;\n    const hasTextContent = !!this.hostElement.textContent;\n\n    this.iconOnly = !hasChildren && !hasTextContent;\n  }\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.pillColor ?? this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n    return (\n      <Host\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.pillColor ?? this.color,\n              }\n            : {}\n        }\n        title={this.hostElement.textContent}\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: false,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: false,\n            icon: !!this.icon,\n            'with-gap': !this.iconOnly,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: this.icon === undefined || this.icon === '',\n            }}\n            name={this.icon}\n            size={'16'}\n          />\n          <span class=\"slot-container\">\n            <slot onSlotchange={() => this.checkIfContentAvailable()}></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2025 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 { test } from "../../../tests/utils/test/index";
+import { expect } from "@playwright/test";
+test.describe('Pill', () => {
+    test('dynamic gap behavior', async ({ mount, page }) => {
+        await mount('<ix-pill icon="star">Dynamic gap</ix-pill>');
+        const pill = page.locator('ix-pill');
+        const innerContainer = pill.locator('.container');
+        await expect(innerContainer).toHaveClass(/with-gap/);
+        await pill.evaluate((el) => {
+            el.innerText = '';
+        });
+        await expect(innerContainer).not.toHaveClass(/with-gap/);
+    });
+});
+//# sourceMappingURL=pill.ct.js.map

package/dist/collection/components/pill/tests/pill.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.ct.js","sourceRoot":"","sources":["../../../../src/components/pill/tests/pill.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;QACrD,MAAM,KAAK,CAAC,4CAA4C,CAAC,CAAC;QAC1D,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACrC,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAElD,MAAM,MAAM,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAErD,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAqB,EAAE,EAAE;YAC5C,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QAEH,MAAM,MAAM,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { test } from '@utils/test';\nimport { expect } from '@playwright/test';\n\ntest.describe('Pill', () => {\n  test('dynamic gap behavior', async ({ mount, page }) => {\n    await mount('<ix-pill icon=\"star\">Dynamic gap</ix-pill>');\n    const pill = page.locator('ix-pill');\n    const innerContainer = pill.locator('.container');\n\n    await expect(innerContainer).toHaveClass(/with-gap/);\n\n    await pill.evaluate((el: HTMLIxPillElement) => {\n      el.innerText = '';\n    });\n\n    await expect(innerContainer).not.toHaveClass(/with-gap/);\n  });\n});\n"]}

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

@@ -10,8 +10,15 @@
   display: block;
   position: relative;
 }
+:host ix-card {
+  cursor: default;
+}
+:host ix-card-accordion {
+  cursor: pointer;
+}
 :host .icon {
-  transform: scale(1.25);
+  height: 2.5rem;
+  width: 2.5rem;
 }
 :host .notification {
   font-size: 40px;

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

@@ -45,7 +45,7 @@ export class PushCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -63,7 +63,7 @@ export class PushCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -80,7 +80,7 @@ export class PushCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -97,7 +97,7 @@ export class PushCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -135,19 +135,15 @@
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(:disabled),
 :host(.disabled) {
   pointer-events: none;
 }
-:host(:disabled) button,
 :host(.disabled) button {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.checked:disabled) button,
 :host(.checked.disabled) button,
-:host([indeterminate]:disabled) button,
 :host([indeterminate].disabled) button {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
@@ -211,15 +207,12 @@ ix-typography {
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(.ix-info:disabled) button,
 :host(.ix-info.disabled) button {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.ix-info.checked:disabled) button,
 :host(.ix-info.checked.disabled) button,
-:host(.ix-info[indeterminate]:disabled) button,
 :host(.ix-info[indeterminate].disabled) button {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
@@ -279,15 +272,12 @@ ix-typography {
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(.ix-warning:disabled) button,
 :host(.ix-warning.disabled) button {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.ix-warning.checked:disabled) button,
 :host(.ix-warning.checked.disabled) button,
-:host(.ix-warning[indeterminate]:disabled) button,
 :host(.ix-warning[indeterminate].disabled) button {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
@@ -347,15 +337,12 @@ ix-typography {
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(.ix-invalid--required:disabled) button,
 :host(.ix-invalid--required.disabled) button {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.ix-invalid--required.checked:disabled) button,
 :host(.ix-invalid--required.checked.disabled) button,
-:host(.ix-invalid--required[indeterminate]:disabled) button,
 :host(.ix-invalid--required[indeterminate].disabled) button {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
@@ -415,15 +402,12 @@ ix-typography {
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(.ix-invalid:disabled) button,
 :host(.ix-invalid.disabled) button {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.ix-invalid.checked:disabled) button,
 :host(.ix-invalid.checked.disabled) button,
-:host(.ix-invalid[indeterminate]:disabled) button,
 :host(.ix-invalid[indeterminate].disabled) button {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);

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

@@ -8,6 +8,7 @@
  */
 import { Host, h, } from "@stencil/core";
 import { makeRef } from "../utils/make-ref";
+import { a11yBoolean } from "../utils/a11y";
 /**
  * @since 2.6.0
  * @form-ready 2.6.0
@@ -66,17 +67,17 @@ export class Radio {
         return Promise.resolve(this.formInternals.form);
     }
     render() {
-        return (h(Host, { key: '11d1cadf723d642f0591cb49635cd13771190258', "aria-checked": `${this.checked}`, "aria-disabled": `${this.disabled}`, role: "radio", class: {
+        return (h(Host, { key: '9e8b93bff9225644977905afb2cade77e3fa282c', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", class: {
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("label", { key: '9e93f5f146dc7798f0a7cf254a47ee1d35ef8c14' }, h("input", { key: 'fc2e99c93b347221cd905ea4572b6657a68fb314', "aria-checked": `${this.checked}`, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "radio", onChange: () => {
+            } }, h("label", { key: '6776e954c1118e707e161ac04c84162fd2eb0792' }, h("input", { key: '3674431ef6a480f3eace29a82ffdf6f6eddbd29c', "aria-checked": a11yBoolean(this.checked), disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "radio", onChange: () => {
                 const ref = this.inputRef.current;
                 if (ref) {
                     this.setCheckedState(ref.checked);
                 }
-            } }), h("button", { key: '3134b9849b111543886c2dd028dc7f71c1b171a2', disabled: this.disabled, class: {
+            } }), h("button", { key: '9464d56a7448886983c4603c2ec1a53bef30f9f3', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, this.checked && h("div", { key: 'e311bab1c26e47016ab6594d6e2dab648580d270', class: "checkmark" })), h("ix-typography", { key: 'd68fa858f9fc9856153380d69e631fad74588c31', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '2b4de064a6c233b61e672a2799493b846c2586af' })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, this.checked && h("div", { key: 'e4a3ac25fa19f3fe755b0d0d6c4535187a123b4e', class: "checkmark" })), h("ix-typography", { key: '908f9aae8f8e2930be34bca5d92be343dc057823', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '30f3bb73204bbf54ce436072a78535932ae777e6' })))));
     }
     static get is() { return "ix-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -98,7 +99,7 @@ export class Radio {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -115,7 +116,7 @@ export class Radio {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -132,7 +133,7 @@ export class Radio {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -251,7 +252,7 @@ export class Radio {
                             "id": "global::HTMLFormElement"
                         }
                     },
-                    "return": "Promise<HTMLFormElement>"
+                    "return": "Promise<HTMLFormElement | null>"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Method,\n  Element,\n} from '@stencil/core';\nimport { makeRef } from '../utils/make-ref';\nimport { IxFormComponent } from '../utils/input';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxRadioElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the radio component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the radio component\n   */\n  @Prop({ reflect: true }) value?: string;\n\n  /**\n   * Label for the radio component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Disabled state of the radio component\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Checked state of the radio component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Event emitted when the checked state of the radio changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the radio changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Single radio cannot be required\n   * */\n  required = false;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((radiobuttonRef) => {\n    radiobuttonRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    if (this.checked) {\n      return;\n    }\n    const result = this.checkedChange.emit(newChecked);\n    if (result.defaultPrevented) {\n      return;\n    }\n\n    this.checked = newChecked;\n  }\n\n  @Watch('checked')\n  async onCheckedChange() {\n    const radiobuttonRef = await this.inputRef.waitForCurrent();\n    radiobuttonRef.checked = this.checked;\n\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={`${this.checked}`}\n        aria-disabled={`${this.disabled}`}\n        role=\"radio\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n        }}\n      >\n        <label>\n          <input\n            aria-checked={`${this.checked}`}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"radio\"\n            onChange={() => {\n              const ref = this.inputRef.current;\n              if (ref) {\n                this.setCheckedState(ref.checked);\n              }\n            }}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.checked && <div class=\"checkmark\"></div>}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Method,\n  Element,\n} from '@stencil/core';\nimport { makeRef } from '../utils/make-ref';\nimport { IxFormComponent } from '../utils/input';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxRadioElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the radio component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the radio component\n   */\n  @Prop({ reflect: true }) value?: string;\n\n  /**\n   * Label for the radio component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Disabled state of the radio component\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Checked state of the radio component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Event emitted when the checked state of the radio changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the radio changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Single radio cannot be required\n   * */\n  required = false;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((radiobuttonRef) => {\n    radiobuttonRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    if (this.checked) {\n      return;\n    }\n    const result = this.checkedChange.emit(newChecked);\n    if (result.defaultPrevented) {\n      return;\n    }\n\n    this.checked = newChecked;\n  }\n\n  @Watch('checked')\n  async onCheckedChange() {\n    const radiobuttonRef = await this.inputRef.waitForCurrent();\n    radiobuttonRef.checked = this.checked;\n\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"radio\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n        }}\n      >\n        <label>\n          <input\n            aria-checked={a11yBoolean(this.checked)}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"radio\"\n            onChange={() => {\n              const ref = this.inputRef.current;\n              if (ref) {\n                this.setCheckedState(ref.checked);\n              }\n            }}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.checked && <div class=\"checkmark\"></div>}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio/test/radio.ct.js

@@ -33,4 +33,23 @@ test(`form-ready default active`, async ({ mount, page }) => {
     const formData = await getFormValue(formElement, 'my-field-name', page);
     expect(formData).toBe('on');
 });
+test(`disabled = undefined`, async ({ mount, page }) => {
+    await mount(`<ix-radio label="test"></ix-radio>`);
+    const radioElement = page.locator('ix-radio');
+    const nativeInput = radioElement.locator('input');
+    const label = radioElement.locator('label');
+    const checkedChange$ = radioElement.evaluate((element) => {
+        // Needed for testcase
+        element.disabled = undefined;
+        return new Promise((resolve) => {
+            element.addEventListener('checkedChange', () => resolve());
+        });
+    });
+    await radioElement.click();
+    await checkedChange$;
+    await expect(radioElement).not.toHaveClass(/disabled/);
+    await expect(nativeInput).not.toBeDisabled();
+    const disableLabelColor = 'rgba(245, 252, 255, 0.93)';
+    await expect(label).toHaveCSS('color', disableLabelColor);
+});
 //# sourceMappingURL=radio.ct.js.map

package/dist/collection/components/radio/test/radio.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.ct.js","sourceRoot":"","sources":["../../../../src/components/radio/test/radio.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC3C,MAAM,KAAK,CACT,iEAAiE,CAClE,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAChC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9D,MAAM,KAAK,CAAC,oDAAoD,CAAC,CAAC;IAElE,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,KAAK,CACT,iEAAiE,CAClE,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;IACxE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { getFormValue, preventFormSubmission, test } from '@utils/test';\n\ntest('form-ready', async ({ mount, page }) => {\n  await mount(\n    `<form><ix-radio name=\"my-radio\" value=\"Test\"></ix-radio></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const radio = page.locator('ix-radio');\n  await radio.click();\n\n  const formData = await getFormValue(formElement, 'my-radio', page);\n  expect(formData).toBe('Test');\n});\n\ntest('form-ready with default value', async ({ mount, page }) => {\n  await mount(`<form><ix-radio name=\"my-radio\"></ix-radio></form>`);\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const radio = page.locator('ix-radio');\n  await radio.click();\n\n  const formData = await getFormValue(formElement, 'my-radio', page);\n  expect(formData).toBe('on');\n});\n\ntest(`form-ready default active`, async ({ mount, page }) => {\n  await mount(\n    `<form><ix-radio name=\"my-field-name\" checked></ix-radio></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const formData = await getFormValue(formElement, 'my-field-name', page);\n  expect(formData).toBe('on');\n});\n"]}
+{"version":3,"file":"radio.ct.js","sourceRoot":"","sources":["../../../../src/components/radio/test/radio.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { getFormValue, preventFormSubmission, test } from '@utils/test';\n\ntest('form-ready', async ({ mount, page }) => {\n  await mount(\n    `<form><ix-radio name=\"my-radio\" value=\"Test\"></ix-radio></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const radio = page.locator('ix-radio');\n  await radio.click();\n\n  const formData = await getFormValue(formElement, 'my-radio', page);\n  expect(formData).toBe('Test');\n});\n\ntest('form-ready with default value', async ({ mount, page }) => {\n  await mount(`<form><ix-radio name=\"my-radio\"></ix-radio></form>`);\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const radio = page.locator('ix-radio');\n  await radio.click();\n\n  const formData = await getFormValue(formElement, 'my-radio', page);\n  expect(formData).toBe('on');\n});\n\ntest(`form-ready default active`, async ({ mount, page }) => {\n  await mount(\n    `<form><ix-radio name=\"my-field-name\" checked></ix-radio></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const formData = await getFormValue(formElement, 'my-field-name', page);\n  expect(formData).toBe('on');\n});\n\ntest(`disabled = undefined`, async ({ mount, page }) => {\n  await mount(`<ix-radio label=\"test\"></ix-radio>`);\n\n  const radioElement = page.locator('ix-radio');\n  const nativeInput = radioElement.locator('input');\n  const label = radioElement.locator('label');\n\n  const checkedChange$ = radioElement.evaluate(\n    (element: HTMLIxCheckboxElement) => {\n      // Needed for testcase\n      element.disabled = undefined as any;\n      return new Promise<void>((resolve) => {\n        element.addEventListener('checkedChange', () => resolve());\n      });\n    }\n  );\n\n  await radioElement.click();\n  await checkedChange$;\n\n  await expect(radioElement).not.toHaveClass(/disabled/);\n  await expect(nativeInput).not.toBeDisabled();\n\n  const disableLabelColor = 'rgba(245, 252, 255, 0.93)';\n  await expect(label).toHaveCSS('color', disableLabelColor);\n});\n"]}

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

@@ -100,10 +100,10 @@ export class RadiobuttonGroup {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: 'e34f29dfa844a5d74969e0d7d4524ac0b35ed819' }, h("ix-field-wrapper", { key: 'f146673dd9ff78690cc0b52378793b0c94b20fac', 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 }, h("div", { key: '9280999ed1c6630ae9500e2f73de26a12ea1c417', class: {
+        return (h(Host, { key: '24b5de13751d99c48248531714c42365e986152d' }, h("ix-field-wrapper", { key: 'd28ab4313b67fb3228b314c9f11035b562517873', 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 }, h("div", { key: '5fe4b009d25e7b0e292797c73608bbbf58cbd619', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '7556d4a6396633bc085ebf5cb12070d7a3c673e5' })))));
+            } }, h("slot", { key: '16ad7233184eb11c073a6243860ede06f97b0944' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -124,7 +124,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -141,7 +141,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -158,7 +158,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -175,7 +175,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -192,7 +192,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -209,7 +209,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -226,7 +226,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -243,7 +243,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: '89172693b9ba7a6cbe639e50e72992d5028af953' }, h("slot", { key: 'bb424e5fe98e377dd765192debdf0a268bb4f7a2' })));
+        return (h(Host, { key: 'c06bbc4d7e3250ed08dd6206811f2547fd87dddb' }, h("slot", { key: 'dbea65d73ce27b58a8b3b51185c59e60c7f04827' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -250,6 +250,9 @@
 :host .input-container input.hide-placeholder::placeholder {
   opacity: 0;
 }
+:host ix-dropdown {
+  max-width: 100%;
+}
 :host .dropdown-visible {
   --ix-icon-button-color: var(--theme-color-dynamic--hover);
 }