@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1373-20240705054533

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

@@ -1,15 +0,0 @@
-:host {
-  display: block;
-  position: relative;
-  margin: 0 0.5rem;
-}
-:host .container {
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-:host ::slotted(*) {
-  flex-grow: 0;
-  flex-shrink: 0;
-}

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

@@ -1,126 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class LayoutForm {
-    constructor() {
-        this.mediaQueryList = [];
-        this.observer = new MutationObserver(() => this.calculateGridTemplateColumns());
-        this.resizeObserver = new ResizeObserver(() => {
-            this.calculateGridTemplateColumns();
-        });
-        this.layout = [
-            { minWidth: '0', columns: 1 },
-            { minWidth: '35rem', columns: 2 },
-        ];
-        this.gridTemplateColumns = undefined;
-    }
-    connectedCallback() {
-        this.observer.observe(this.hostElement, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['data-colspan'],
-        });
-        this.resizeObserver.observe(this.hostElement);
-        this.updateMediaQueryList();
-    }
-    componentWillLoad() {
-        this.calculateGridTemplateColumns();
-    }
-    disconnectedCallback() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    updateMediaQueryList() {
-        this.mediaQueryList = [];
-        this.layout.forEach((layout) => {
-            const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);
-            this.mediaQueryList.push({
-                mediaQuery,
-                layout,
-            });
-        });
-    }
-    parseNumber(number) {
-        if (!number) {
-            return 1;
-        }
-        const result = parseInt(number);
-        if (isNaN(result)) {
-            return 1;
-        }
-        return result;
-    }
-    calculateGridTemplateColumns() {
-        let layoutColumns = 1;
-        let columnSpacing = '0.5rem';
-        this.mediaQueryList.forEach((mediaQuery) => {
-            if (mediaQuery.mediaQuery.matches) {
-                layoutColumns = mediaQuery.layout.columns;
-            }
-        });
-        let column = 0;
-        Array.from(this.hostElement.children).forEach((child) => {
-            let colspan = this.parseNumber(child.getAttribute('data-colspan'));
-            colspan = Math.min(colspan, layoutColumns);
-            const childRatio = colspan / layoutColumns;
-            child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
-            if (column + colspan > layoutColumns) {
-                column = 0;
-            }
-            column = (column + colspan) % layoutColumns;
-        });
-    }
-    render() {
-        return (h(Host, { key: 'd2fa4c6a9f79d88482f665cd46bc96dfe8536535' }, h("div", { key: '32c2e2f039e5545b039d073200f1575aafe2b625', class: "container", style: {
-                gridTemplateColumns: this.gridTemplateColumns,
-            } }, h("slot", { key: '59930603690b5d72f584817f0e0e3a44e423ca6e' }))));
-    }
-    static get is() { return "ix-layout-form"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["layout-form.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["layout-form.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "layout": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{\n    minWidth: string;\n    columns: number;\n  }[]",
-                    "resolved": "{ minWidth: string; columns: number; }[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the layout of the form."
-                },
-                "defaultValue": "[\n    { minWidth: '0', columns: 1 },\n    { minWidth: '35rem', columns: 2 },\n  ]"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "gridTemplateColumns": {}
-        };
-    }
-    static get elementRef() { return "hostElement"; }
-    static get watchers() {
-        return [{
-                "propName": "layout",
-                "methodName": "updateMediaQueryList"
-            }];
-    }
-}
-//# sourceMappingURL=layout-form.js.map

package/dist/collection/components/layout-form/layout-form.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout-form.js","sourceRoot":"","sources":["../../../src/components/layout-form/layout-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-layout-form',\n  styleUrl: 'layout-form.scss',\n  shadow: true,\n})\nexport class LayoutForm implements IxComponent {\n  @Element() hostElement!: HTMLIxLayoutFormElement;\n\n  /**\n   * Defines the layout of the form.\n   */\n  @Prop() layout: {\n    minWidth: string;\n    columns: number;\n  }[] = [\n    { minWidth: '0', columns: 1 },\n    { minWidth: '35rem', columns: 2 },\n  ];\n\n  @State() gridTemplateColumns?: string;\n\n  private mediaQueryList: {\n    mediaQuery: MediaQueryList;\n    layout: {\n      minWidth: string;\n      columns: number;\n    };\n  }[] = [];\n\n  private observer = new MutationObserver(() =>\n    this.calculateGridTemplateColumns()\n  );\n\n  private resizeObserver = new ResizeObserver(() => {\n    this.calculateGridTemplateColumns();\n  });\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['data-colspan'],\n    });\n    this.resizeObserver.observe(this.hostElement);\n\n    this.updateMediaQueryList();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.calculateGridTemplateColumns();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  @Watch('layout')\n  updateMediaQueryList() {\n    this.mediaQueryList = [];\n    this.layout.forEach((layout) => {\n      const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);\n      this.mediaQueryList.push({\n        mediaQuery,\n        layout,\n      });\n    });\n  }\n\n  private parseNumber(number: string | null) {\n    if (!number) {\n      return 1;\n    }\n\n    const result = parseInt(number);\n    if (isNaN(result)) {\n      return 1;\n    }\n\n    return result;\n  }\n\n  private calculateGridTemplateColumns() {\n    let layoutColumns = 1;\n    let columnSpacing = '0.5rem';\n\n    this.mediaQueryList.forEach((mediaQuery) => {\n      if (mediaQuery.mediaQuery.matches) {\n        layoutColumns = mediaQuery.layout.columns;\n      }\n    });\n\n    let column = 0;\n    Array.from(this.hostElement.children).forEach((child: HTMLElement) => {\n      let colspan = this.parseNumber(child.getAttribute('data-colspan'));\n      colspan = Math.min(colspan, layoutColumns);\n      const childRatio = colspan / layoutColumns;\n\n      child.style.width = `calc(${childRatio * 99.9}% - ${\n        1 - childRatio\n      } * ${columnSpacing})`;\n\n      if (column + colspan > layoutColumns) {\n        column = 0;\n      }\n\n      column = (column + colspan) % layoutColumns;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"container\"\n          style={{\n            gridTemplateColumns: this.gridTemplateColumns,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,428 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 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.
- */
-/*
- * SPDX-FileCopyrightText: 2024 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.
- */
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-:host {
-  /* width */
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
-  display: inline-block;
-  position: relative;
-}
-:host *,
-:host *::after,
-:host *::before {
-  box-sizing: border-box;
-}
-:host ::-webkit-scrollbar-button {
-  display: none;
-}
-@-moz-document url-prefix() {
-  :host * {
-    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
-    scrollbar-width: thin;
-  }
-}
-:host ::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-:host ::-webkit-scrollbar-track {
-  border-radius: 5px;
-  background: var(--theme-scrollbar-track--background);
-}
-:host ::-webkit-scrollbar-track:hover {
-  background: var(--theme-scrollbar-track--background--hover);
-}
-:host ::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background: var(--theme-scrollbar-thumb--background);
-}
-:host ::-webkit-scrollbar-thumb:hover {
-  background: var(--theme-scrollbar-thumb--background--hover);
-}
-:host ::-webkit-scrollbar-corner {
-  display: none;
-}
-:host button {
-  all: unset;
-}
-:host button {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  width: 1.125rem;
-  min-width: 1.125rem;
-  max-width: 1.125rem;
-  height: 1.125rem;
-  min-height: 1.125rem;
-  max-height: 1.125rem;
-  border: 1px solid white;
-  border-radius: 100px;
-  margin-right: 0.5rem;
-}
-:host button:focus-visible {
-  outline: 0.0625rem solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-radiobtn--focus--outline-offset);
-}
-:host input[type=radio] {
-  display: none;
-}
-:host label {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  height: 100%;
-}
-:host .checkmark {
-  border-radius: 100px;
-  background-color: var(--theme-color-primary--contrast);
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-:host button {
-  background-color: var(--theme-radiobtn-unchecked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
-}
-
-:host(:hover) button {
-  background-color: var(--theme-radiobtn-unchecked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
-}
-
-:host(:active) button {
-  background-color: var(--theme-radiobtn-unchecked--background--active);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
-}
-
-:host(.checked) button,
-:host([indeterminate]) button {
-  background-color: var(--theme-radiobtn-checked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
-}
-
-:host(.checked:hover) button,
-:host([indeterminate]:hover) button {
-  background-color: var(--theme-radiobtn-checked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
-}
-
-:host(.checked:active) button,
-:host([indeterminate]:active) button {
-  background-color: var(--theme-radiobtn-checked--background--active);
-  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);
-}
-
-:host(.ix-info:not(.disabled)) button {
-  --theme-radiobtn-unchecked--background: var(--theme-radiobtn-unchecked--background--info);
-  --theme-radiobtn-unchecked--background--hover: var(--theme-radiobtn-unchecked--background--info--hover);
-  --theme-radiobtn-unchecked--background--active: var(--theme-radiobtn-unchecked--background--info--active);
-  --theme-radiobtn-unchecked--border-color: var(--theme-radiobtn-unchecked--border-color--info);
-  --theme-radiobtn-unchecked--border-color--hover: var(--theme-radiobtn-unchecked--border-color--info--hover);
-  --theme-radiobtn-unchecked--border-color--active: var(--theme-radiobtn-unchecked--border-color--info--active);
-  --theme-radiobtn-checked--background: var(--theme-radiobtn-checked--background--info);
-  --theme-radiobtn-checked--background--hover: var(--theme-radiobtn-checked--background--info--hover);
-  --theme-radiobtn-checked--background--active: var(--theme-radiobtn-checked--background--info--active);
-  --theme-radiobtn-checked--border-color: var(--theme-radiobtn-checked--border-color--info);
-  --theme-radiobtn-checked--border-color--hover: var(--theme-radiobtn-checked--border-color--info--hover);
-  --theme-radiobtn-checked--border-color--active: var(--theme-radiobtn-checked--border-color--info--active);
-  --theme-radiobtn-mixed--background: var(--theme-radiobtn-mixed--background--info);
-  --theme-radiobtn-mixed--background--hover: var(--theme-radiobtn-mixed--background--info--hover);
-  --theme-radiobtn-mixed--background--active: var(--theme-radiobtn-mixed--background--info--active);
-  --theme-radiobtn-mixed--border-color: var(--theme-radiobtn-mixed--border-color--info);
-  --theme-radiobtn-mixed--border-color--hover: var(--theme-radiobtn-mixed--border-color--info--hover);
-  --theme-radiobtn-mixed--border-color--active: var(--theme-radiobtn-mixed--border-color--info--active);
-}
-
-:host(.ix-info) button {
-  background-color: var(--theme-radiobtn-unchecked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
-}
-
-:host(.ix-info:hover) button {
-  background-color: var(--theme-radiobtn-unchecked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
-}
-
-:host(.ix-info:active) button {
-  background-color: var(--theme-radiobtn-unchecked--background--active);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
-}
-
-:host(.ix-info.checked) button,
-:host(.ix-info[indeterminate]) button {
-  background-color: var(--theme-radiobtn-checked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
-}
-
-:host(.ix-info.checked:hover) button,
-:host(.ix-info[indeterminate]:hover) button {
-  background-color: var(--theme-radiobtn-checked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
-}
-
-:host(.ix-info.checked:active) button,
-:host(.ix-info[indeterminate]:active) button {
-  background-color: var(--theme-radiobtn-checked--background--active);
-  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);
-}
-
-:host(.ix-warning:not(.disabled)) button {
-  --theme-radiobtn-unchecked--background: var(--theme-radiobtn-unchecked--background--warning);
-  --theme-radiobtn-unchecked--background--hover: var(--theme-radiobtn-unchecked--background--warning--hover);
-  --theme-radiobtn-unchecked--background--active: var(--theme-radiobtn-unchecked--background--warning--active);
-  --theme-radiobtn-unchecked--border-color: var(--theme-radiobtn-unchecked--border-color--warning);
-  --theme-radiobtn-unchecked--border-color--hover: var(--theme-radiobtn-unchecked--border-color--warning--hover);
-  --theme-radiobtn-unchecked--border-color--active: var(--theme-radiobtn-unchecked--border-color--warning--active);
-  --theme-radiobtn-checked--background: var(--theme-radiobtn-checked--background--warning);
-  --theme-radiobtn-checked--background--hover: var(--theme-radiobtn-checked--background--warning--hover);
-  --theme-radiobtn-checked--background--active: var(--theme-radiobtn-checked--background--warning--active);
-  --theme-radiobtn-checked--border-color: var(--theme-radiobtn-checked--border-color--warning);
-  --theme-radiobtn-checked--border-color--hover: var(--theme-radiobtn-checked--border-color--warning--hover);
-  --theme-radiobtn-checked--border-color--active: var(--theme-radiobtn-checked--border-color--warning--active);
-  --theme-radiobtn-mixed--background: var(--theme-radiobtn-mixed--background--warning);
-  --theme-radiobtn-mixed--background--hover: var(--theme-radiobtn-mixed--background--warning--hover);
-  --theme-radiobtn-mixed--background--active: var(--theme-radiobtn-mixed--background--warning--active);
-  --theme-radiobtn-mixed--border-color: var(--theme-radiobtn-mixed--border-color--warning);
-  --theme-radiobtn-mixed--border-color--hover: var(--theme-radiobtn-mixed--border-color--warning--hover);
-  --theme-radiobtn-mixed--border-color--active: var(--theme-radiobtn-mixed--border-color--warning--active);
-}
-
-:host(.ix-warning) button {
-  background-color: var(--theme-radiobtn-unchecked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
-}
-
-:host(.ix-warning:hover) button {
-  background-color: var(--theme-radiobtn-unchecked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
-}
-
-:host(.ix-warning:active) button {
-  background-color: var(--theme-radiobtn-unchecked--background--active);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
-}
-
-:host(.ix-warning.checked) button,
-:host(.ix-warning[indeterminate]) button {
-  background-color: var(--theme-radiobtn-checked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
-}
-
-:host(.ix-warning.checked:hover) button,
-:host(.ix-warning[indeterminate]:hover) button {
-  background-color: var(--theme-radiobtn-checked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
-}
-
-:host(.ix-warning.checked:active) button,
-:host(.ix-warning[indeterminate]:active) button {
-  background-color: var(--theme-radiobtn-checked--background--active);
-  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);
-}
-
-:host(.ix-invalid--required:not(.disabled)) button {
-  --theme-radiobtn-unchecked--background: var(--theme-radiobtn-unchecked--background--invalid);
-  --theme-radiobtn-unchecked--background--hover: var(--theme-radiobtn-unchecked--background--invalid--hover);
-  --theme-radiobtn-unchecked--background--active: var(--theme-radiobtn-unchecked--background--invalid--active);
-  --theme-radiobtn-unchecked--border-color: var(--theme-radiobtn-unchecked--border-color--invalid);
-  --theme-radiobtn-unchecked--border-color--hover: var(--theme-radiobtn-unchecked--border-color--invalid--hover);
-  --theme-radiobtn-unchecked--border-color--active: var(--theme-radiobtn-unchecked--border-color--invalid--active);
-  --theme-radiobtn-checked--background: var(--theme-radiobtn-checked--background--invalid);
-  --theme-radiobtn-checked--background--hover: var(--theme-radiobtn-checked--background--invalid--hover);
-  --theme-radiobtn-checked--background--active: var(--theme-radiobtn-checked--background--invalid--active);
-  --theme-radiobtn-checked--border-color: var(--theme-radiobtn-checked--border-color--invalid);
-  --theme-radiobtn-checked--border-color--hover: var(--theme-radiobtn-checked--border-color--invalid--hover);
-  --theme-radiobtn-checked--border-color--active: var(--theme-radiobtn-checked--border-color--invalid--active);
-  --theme-radiobtn-mixed--background: var(--theme-radiobtn-mixed--background--invalid);
-  --theme-radiobtn-mixed--background--hover: var(--theme-radiobtn-mixed--background--invalid--hover);
-  --theme-radiobtn-mixed--background--active: var(--theme-radiobtn-mixed--background--invalid--active);
-  --theme-radiobtn-mixed--border-color: var(--theme-radiobtn-mixed--border-color--invalid);
-  --theme-radiobtn-mixed--border-color--hover: var(--theme-radiobtn-mixed--border-color--invalid--hover);
-  --theme-radiobtn-mixed--border-color--active: var(--theme-radiobtn-mixed--border-color--invalid--active);
-}
-
-:host(.ix-invalid--required) button {
-  background-color: var(--theme-radiobtn-unchecked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
-}
-
-:host(.ix-invalid--required:hover) button {
-  background-color: var(--theme-radiobtn-unchecked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
-}
-
-:host(.ix-invalid--required:active) button {
-  background-color: var(--theme-radiobtn-unchecked--background--active);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
-}
-
-:host(.ix-invalid--required.checked) button,
-:host(.ix-invalid--required[indeterminate]) button {
-  background-color: var(--theme-radiobtn-checked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
-}
-
-:host(.ix-invalid--required.checked:hover) button,
-:host(.ix-invalid--required[indeterminate]:hover) button {
-  background-color: var(--theme-radiobtn-checked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
-}
-
-:host(.ix-invalid--required.checked:active) button,
-:host(.ix-invalid--required[indeterminate]:active) button {
-  background-color: var(--theme-radiobtn-checked--background--active);
-  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);
-}
-
-:host(.ix-invalid:not(.disabled)) button {
-  --theme-radiobtn-unchecked--background: var(--theme-radiobtn-unchecked--background--invalid);
-  --theme-radiobtn-unchecked--background--hover: var(--theme-radiobtn-unchecked--background--invalid--hover);
-  --theme-radiobtn-unchecked--background--active: var(--theme-radiobtn-unchecked--background--invalid--active);
-  --theme-radiobtn-unchecked--border-color: var(--theme-radiobtn-unchecked--border-color--invalid);
-  --theme-radiobtn-unchecked--border-color--hover: var(--theme-radiobtn-unchecked--border-color--invalid--hover);
-  --theme-radiobtn-unchecked--border-color--active: var(--theme-radiobtn-unchecked--border-color--invalid--active);
-  --theme-radiobtn-checked--background: var(--theme-radiobtn-checked--background--invalid);
-  --theme-radiobtn-checked--background--hover: var(--theme-radiobtn-checked--background--invalid--hover);
-  --theme-radiobtn-checked--background--active: var(--theme-radiobtn-checked--background--invalid--active);
-  --theme-radiobtn-checked--border-color: var(--theme-radiobtn-checked--border-color--invalid);
-  --theme-radiobtn-checked--border-color--hover: var(--theme-radiobtn-checked--border-color--invalid--hover);
-  --theme-radiobtn-checked--border-color--active: var(--theme-radiobtn-checked--border-color--invalid--active);
-  --theme-radiobtn-mixed--background: var(--theme-radiobtn-mixed--background--invalid);
-  --theme-radiobtn-mixed--background--hover: var(--theme-radiobtn-mixed--background--invalid--hover);
-  --theme-radiobtn-mixed--background--active: var(--theme-radiobtn-mixed--background--invalid--active);
-  --theme-radiobtn-mixed--border-color: var(--theme-radiobtn-mixed--border-color--invalid);
-  --theme-radiobtn-mixed--border-color--hover: var(--theme-radiobtn-mixed--border-color--invalid--hover);
-  --theme-radiobtn-mixed--border-color--active: var(--theme-radiobtn-mixed--border-color--invalid--active);
-}
-
-:host(.ix-invalid) button {
-  background-color: var(--theme-radiobtn-unchecked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
-}
-
-:host(.ix-invalid:hover) button {
-  background-color: var(--theme-radiobtn-unchecked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
-}
-
-:host(.ix-invalid:active) button {
-  background-color: var(--theme-radiobtn-unchecked--background--active);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
-}
-
-:host(.ix-invalid.checked) button,
-:host(.ix-invalid[indeterminate]) button {
-  background-color: var(--theme-radiobtn-checked--background);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
-}
-
-:host(.ix-invalid.checked:hover) button,
-:host(.ix-invalid[indeterminate]:hover) button {
-  background-color: var(--theme-radiobtn-checked--background--hover);
-  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
-}
-
-:host(.ix-invalid.checked:active) button,
-:host(.ix-invalid[indeterminate]:active) button {
-  background-color: var(--theme-radiobtn-checked--background--active);
-  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);
-}