@siemens/ix 3.0.0 → 3.1.0

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

@@ -112,11 +112,6 @@
 .container .with-icon {
   margin-right: 0.25rem;
 }
-.container .hidden {
-  display: none;
-  width: 0;
-  margin-right: 0;
-}
 .container .close-button-container {
   display: inline-flex;
   margin-left: auto;
@@ -131,6 +126,24 @@
 .container.outline.icon {
   padding-left: calc(0.75rem - 1px);
 }
+.container.outline.icon.alarm .with-icon {
+  color: var(--theme-color-alarm);
+}
+.container.outline.icon.critical .with-icon {
+  color: var(--theme-color-critical);
+}
+.container.outline.icon.warning .with-icon {
+  color: var(--theme-color-warning);
+}
+.container.outline.icon.info .with-icon {
+  color: var(--theme-color-info);
+}
+.container.outline.icon.neutral .with-icon {
+  color: var(--theme-color-neutral);
+}
+.container.outline.icon.success .with-icon {
+  color: var(--theme-color-success);
+}
 .container.outline:not(.icon) {
   padding-left: calc(0.5rem - 1px);
 }
@@ -173,13 +186,16 @@
 }
 
 .container.primary.outline {
-  color: var(--theme-chip-primary-outline--color);
+  color: var(--theme-chip-outline--color);
   background-color: transparent;
   border: solid 1px var(--theme-chip-primary-outline--border-color);
 }
 .container.primary.outline .close-button {
-  color: var(--theme-chip-primary-outline--color);
-  --ix-icon-button-color: var(--theme-chip-primary-outline--color);
+  color: var(--theme-chip-outline--color);
+  --ix-icon-button-color: var(--theme-chip-outline--color);
+}
+.container.primary.outline .with-icon {
+  color: var(--theme-color-primary);
 }
 
 .container.outline {

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

@@ -78,10 +78,9 @@ export class Pill {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, h("ix-icon", { key: '63479b45b4f2b6a77dd815bd2f4eca2584fbca30', class: {
+            } }, this.icon && (h("ix-icon", { key: 'dd45d19b124560abca8e13386e09475287e2a646', class: {
                 'with-icon': true,
-                hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), h("span", { key: '6c73cf4bd3361f1e9621f90d39f6327d5e38df8a', class: "slot-container" }, h("slot", { key: '9c80aeddc144c1485605f761577c6e05c7eb39c4', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16' })), h("span", { key: 'cbfda4bbaf4a0cbfba3c1b27b1626845f6365079', class: "slot-container" }, h("slot", { key: 'a186da99796d23caf3618f67370573a49102c420', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +142,7 @@ export class Pill {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -162,7 +161,7 @@ export class Pill {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -181,7 +180,7 @@ export class Pill {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../../src/components/pill/pill.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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\nimport { makeRef } from '../utils/make-ref';\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;\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  @Prop() pillColor: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  /**\n   * Display a tooltip. By default, no tooltip will be displayed.\n   * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.\n   * @since 3.0.0\n   */\n  @Prop() tooltipText: string | boolean = false;\n\n  @State() iconOnly = false;\n\n  private readonly containerElementRef = makeRef<HTMLElement>();\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  private getTooltip() {\n    if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {\n      return null;\n    }\n\n    const text =\n      typeof this.tooltipText === 'string' && this.tooltipText.trim()\n        ? this.tooltipText\n        : this.hostElement.textContent?.trim();\n\n    return (\n      <ix-tooltip for={this.containerElementRef.waitForCurrent()}>\n        {text}\n      </ix-tooltip>\n    );\n  }\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.pillColor,\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,\n              }\n            : {}\n        }\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          ref={this.containerElementRef}\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        {this.getTooltip()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../../src/components/pill/pill.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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\nimport { makeRef } from '../utils/make-ref';\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;\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  @Prop() pillColor: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  /**\n   * Display a tooltip. By default, no tooltip will be displayed.\n   * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.\n   * @since 3.0.0\n   */\n  @Prop() tooltipText: string | boolean = false;\n\n  @State() iconOnly = false;\n\n  private readonly containerElementRef = makeRef<HTMLElement>();\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  private getTooltip() {\n    if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {\n      return null;\n    }\n\n    const text =\n      typeof this.tooltipText === 'string' && this.tooltipText.trim()\n        ? this.tooltipText\n        : this.hostElement.textContent?.trim();\n\n    return (\n      <ix-tooltip for={this.containerElementRef.waitForCurrent()}>\n        {text}\n      </ix-tooltip>\n    );\n  }\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.pillColor,\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,\n              }\n            : {}\n        }\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          ref={this.containerElementRef}\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          {this.icon && (\n            <ix-icon\n              class={{\n                'with-icon': true,\n              }}\n              name={this.icon}\n              size={'16'}\n            />\n          )}\n          <span class=\"slot-container\">\n            <slot onSlotchange={() => this.checkIfContentAvailable()}></slot>\n          </span>\n        </div>\n        {this.getTooltip()}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -42,7 +42,7 @@ export class PushCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -61,7 +61,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,
@@ -99,7 +99,7 @@ export class PushCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -85,17 +85,17 @@ export class Radio {
         return Promise.resolve(this.formInternals.form);
     }
     render() {
-        return (h(Host, { key: 'e49795a12ee614091e288edead7f842d892c6ae1', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", class: {
+        return (h(Host, { key: 'e21641242953374ff8a74d09ee6f084018cf9d6b', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", class: {
                 disabled: this.disabled,
                 checked: this.checked,
-            }, onBlur: () => this.ixBlur.emit() }, h("label", { key: '336bb07623eabcc32f2e074f53b0583418e549af' }, h("input", { key: 'f14f476a25b4b6016c305f6602a2bd6566964eb3', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, name: this.name, ref: this.inputRef, type: "radio", onChange: () => {
+            }, onBlur: () => this.ixBlur.emit() }, h("label", { key: 'c60c7da62c9d2e5306f2fe2ceb6106f14c76ca23' }, h("input", { key: '605c5689eefb954a5e285916283f37977ab7d975', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, name: this.name, ref: this.inputRef, type: "radio", onChange: () => {
                 const ref = this.inputRef.current;
                 if (ref) {
                     this.setCheckedState(ref.checked);
                 }
-            } }), h("button", { key: '62a18813a23df2b6ecd7d2b0d4b7ec3d34e2ebb5', disabled: this.disabled, class: {
+            } }), h("button", { key: 'f96476e4f8d57286d3860fdd18ec876362946384', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, h("div", { key: '31b7b63134c50640a12a39ebc78a7d555cefbe34', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } })), h("ix-typography", { key: '95c4c01749ad136fb93bc49b19fa1d4526525f6b', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'ee9a61d6f99dd163c3dc6135f5275f6167db9f9b' })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, h("div", { key: 'edc887b31ab455574351838b05c9169d183615f4', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } })), h("ix-typography", { key: '9050e3f81b9eaab36e649118db3df417437ea86b', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'c173bdaffb5875ddaca6f0ab5acdae9d93514ca0' })))));
     }
     static get is() { return "ix-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +118,7 @@ export class Radio {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -137,7 +137,7 @@ export class Radio {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -156,7 +156,7 @@ export class Radio {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -318,7 +318,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 {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  IxFormComponent,\n} from '../utils/input';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @form-ready\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   * Requires the radio component and its group to be checked for the form to be submittable\n   *\n   * @since 3.0.0\n   */\n  @Prop({ reflect: true }) required: 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   * Event emitted when the radio is blurred\n   */\n  @Event() ixBlur: EventEmitter<void>;\n\n  private classMutationObserver?: ClassMutationObserver;\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  connectedCallback(): void {\n    const parent = this.hostElement.closest('ix-radio-group');\n    if (parent) {\n      this.classMutationObserver = createClassMutationObserver(parent, () => {\n        this.hostElement.classList.toggle(\n          'ix-invalid--required',\n          parent.classList.contains('ix-invalid--required')\n        );\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.classMutationObserver) {\n      this.classMutationObserver.destroy();\n    }\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        onBlur={() => this.ixBlur.emit()}\n      >\n        <label>\n          <input\n            aria-checked={a11yBoolean(this.checked)}\n            required={this.required}\n            disabled={this.disabled}\n            checked={this.checked}\n            name={this.name}\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            <div\n              class=\"checkmark\"\n              style={{ visibility: this.checked ? 'visible' : 'hidden' }}\n            ></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 {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  IxFormComponent,\n} from '../utils/input';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @form-ready\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   * Requires the radio component and its group to be checked for the form to be submittable\n   *\n   * @since 3.0.0\n   */\n  @Prop({ reflect: true }) required: 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   * Event emitted when the radio is blurred\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private classMutationObserver?: ClassMutationObserver;\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  connectedCallback(): void {\n    const parent = this.hostElement.closest('ix-radio-group');\n    if (parent) {\n      this.classMutationObserver = createClassMutationObserver(parent, () => {\n        this.hostElement.classList.toggle(\n          'ix-invalid--required',\n          parent.classList.contains('ix-invalid--required')\n        );\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.classMutationObserver) {\n      this.classMutationObserver.destroy();\n    }\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        onBlur={() => this.ixBlur.emit()}\n      >\n        <label>\n          <input\n            aria-checked={a11yBoolean(this.checked)}\n            required={this.required}\n            disabled={this.disabled}\n            checked={this.checked}\n            name={this.name}\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            <div\n              class=\"checkmark\"\n              style={{ visibility: this.checked ? 'visible' : 'hidden' }}\n            ></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-group/radio-group.js

@@ -117,10 +117,10 @@ export class RadiobuttonGroup {
         return Promise.resolve(this.touched);
     }
     render() {
-        return (h(Host, { key: '82f7344f3c62f6d3edab91ab97575a353349409d', onIxBlur: () => (this.touched = true), ref: this.groupRef }, h("ix-field-wrapper", { key: 'c820bb3ca72f60391ad8607466d5c129792c811a', 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: '7df5d5acb15bc90da19687c95033b187f74238c6', class: {
+        return (h(Host, { key: '203a7e035db4618a46b19cd8f2fdc95c29a523c9', onIxBlur: () => (this.touched = true), ref: this.groupRef }, h("ix-field-wrapper", { key: 'e57767b89761a81570b6c07271009895b3590fa8', 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: '4022286816732dbb6f831e2818e37a5b8ce97737', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: 'abb7dd22d12f81ec87c816d68b368c5485ccb821' })))));
+            } }, h("slot", { key: '82a37de491ea6fbd6ee90c624f87b882f43f99cd' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -142,7 +142,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -161,7 +161,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -180,7 +180,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -199,7 +199,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -218,7 +218,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -237,7 +237,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -256,7 +256,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -275,7 +275,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -314,7 +314,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 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 {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Alignment of the radio buttons in the group\n   */\n  @Prop() direction: 'column' | 'row' = 'column';\n\n  /**\n   * Required state of the checkbox component\n   *\n   * @internal\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private touched = false;\n  private readonly groupRef = makeRef<HTMLIxRadioGroupElement>();\n\n  private readonly observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked', 'required'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n  }\n\n  private hasNestedRequiredRadio() {\n    this.required = this.radiobuttonElements.some(\n      (radiobutton) => radiobutton.required\n    );\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.touched = true;\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({\n    isInvalid,\n    isInfo,\n    isValid,\n    isWarning,\n    isInvalidByRequired,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(\n      !!Array.from(this.hostElement.querySelectorAll('ix-radio')).find(\n        (radio) => radio.checked\n      )\n    );\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    return (\n      <Host onIxBlur={() => (this.touched = true)} ref={this.groupRef}>\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n          controlRef={this.groupRef}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 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 {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Alignment of the radio buttons in the group\n   */\n  @Prop() direction: 'column' | 'row' = 'column';\n\n  /**\n   * Required state of the checkbox component\n   *\n   * @internal\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private touched = false;\n  private readonly groupRef = makeRef<HTMLElement>();\n\n  private readonly observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked', 'required'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n  }\n\n  private hasNestedRequiredRadio() {\n    this.required = this.radiobuttonElements.some(\n      (radiobutton) => radiobutton.required\n    );\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.touched = true;\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({\n    isInvalid,\n    isInfo,\n    isValid,\n    isWarning,\n    isInvalidByRequired,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(\n      !!Array.from(this.hostElement.querySelectorAll('ix-radio')).find(\n        (radio) => radio.checked\n      )\n    );\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    return (\n      <Host onIxBlur={() => (this.touched = true)} ref={this.groupRef}>\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n          controlRef={this.groupRef}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -137,7 +137,7 @@
 :host .select:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .select:not(.disabled):not(:disabled):hover, :host .select:not(.disabled):not(:disabled):hover {
+:host .select:not(.disabled):not(:disabled):hover, :host .select:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-input--background--hover);
   border-color: var(--theme-input--border-color--hover);
 }

package/dist/collection/components/select/select.js

@@ -644,7 +644,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -683,7 +683,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -702,7 +702,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -721,7 +721,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -740,7 +740,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -759,7 +759,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -778,7 +778,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -797,7 +797,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1036,7 +1036,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1055,7 +1055,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1183,7 +1183,7 @@ export class Select {
                             "id": "global::HTMLFormElement"
                         }
                     },
-                    "return": "Promise<HTMLFormElement>"
+                    "return": "Promise<HTMLFormElement | null>"
                 },
                 "docs": {
                     "text": "",

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

@@ -556,4 +556,39 @@ test('should preserve spaces within input and show add icon', async ({ mount, pa
     await expect(addItem).toHaveCount(1);
     await expect(input).toHaveValue(itemText);
 });
+test('last select item can be accessed via scrolling', async ({ mount, page, }) => {
+    await mount(`
+    <ix-select>
+      ${Array.from({
+        length: 20,
+    }, (_, i) => `<ix-select-item value="${i + 1}" label="Item ${i + 1}">Item ${i + 1}</ix-select-item>`).join('')}
+    </ix-select>
+  `);
+    const select = page.locator('ix-select');
+    await page.locator('[data-select-dropdown]').click();
+    const dropdown = select.locator('ix-dropdown');
+    await expect(dropdown).toBeVisible();
+    const lastItem = page.locator('ix-select-item').last();
+    await lastItem.evaluate((item) => {
+        item.scrollIntoView();
+    });
+    await expect(lastItem).toBeVisible();
+});
+test('last select item can be accessed via scrolling when select placed at center of the page', async ({ mount, page, }) => {
+    await mount(`
+    <div style="height:calc(50vh-1px)"></div>
+    <ix-select>
+      ${Array.from({ length: 20 }, (_, i) => `<ix-select-item value="${i + 1}" label="Item ${i + 1}">Item ${i + 1}</ix-select-item>`).join('')}
+    </ix-select>
+  `);
+    const select = page.locator('ix-select');
+    await page.locator('[data-select-dropdown]').click();
+    const dropdown = select.locator('ix-dropdown');
+    await expect(dropdown).toBeVisible();
+    const lastItem = page.locator('ix-select-item').last();
+    await lastItem.evaluate((item) => {
+        item.scrollIntoView();
+    });
+    await expect(lastItem).toBeVisible();
+});
 //# sourceMappingURL=select.ct.js.map