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

package/dist/cjs/text-field.util-d7c5c1cd.js.map

@@ -1 +0,0 @@
-{"file":"text-field.util-d7c5c1cd.js","mappings":"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","names":["h","anime","shouldSuppressInternalValidation","a11yBoolean"],"sources":["src/components/text-field/input.fc.tsx","src/components/text-field/text-field.animation.ts","src/components/text-field/text-field.util.ts"],"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 { h } from '@stencil/core';\nimport { MakeRef } from '../utils/make-ref';\nimport { A11yAttributes } from '../utils/a11y';\n\nexport function TextareaElement(props: {\n  textareaHeight?: string;\n  textareaWidth?: string;\n  textareaRows?: string;\n  textareaCols?: string;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: number;\n  minLength?: number;\n  isInvalid: boolean;\n  required: boolean;\n  value: string;\n  placeholder?: string;\n  textAreaRef: (el: HTMLTextAreaElement) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <textarea\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      maxLength={props.maxLength}\n      minLength={props.minLength}\n      cols={Number(props.textareaCols)}\n      rows={Number(props.textareaRows)}\n      ref={props.textAreaRef}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      style={{ height: props.textareaHeight, width: props.textareaWidth }}\n      {...props.ariaAttributes}\n    ></textarea>\n  );\n}\n\nexport function InputElement(props: {\n  id: string;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: string | number;\n  minLength?: string | number;\n  max?: string | number;\n  min?: string | number;\n  pattern?: string;\n  type: string;\n  isInvalid: boolean;\n  required: boolean;\n  value: string | number;\n  placeholder?: string;\n  inputRef: (el: HTMLInputElement) => void;\n  onKeyPress: (event: KeyboardEvent) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <input\n      id={props.id}\n      autoComplete=\"off\"\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      min={props.min}\n      max={props.max}\n      maxLength={props.maxLength ? Number(props.maxLength) : undefined}\n      minLength={props.maxLength ? Number(props.minLength) : undefined}\n      ref={props.inputRef}\n      pattern={props.pattern}\n      type={props.type}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onKeyPress={(event) => props.onKeyPress(event)}\n      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      {...props.ariaAttributes}\n    ></input>\n  );\n}\n\nexport function PostfixSlot(\n  props: {\n    postfixRef: MakeRef<HTMLDivElement>;\n    onSlotChange?: (e: Event) => void;\n  },\n  children\n) {\n  return (\n    <div class=\"postfix-container\" ref={props.postfixRef}>\n      <slot name=\"postfix\" onSlotchange={props.onSlotChange}></slot>\n      {children}\n    </div>\n  );\n}\n\nexport function PrefixSlot(props: {\n  prefixRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}) {\n  return (\n    <div class=\"prefix-container\" ref={props.prefixRef}>\n      <slot name=\"prefix\" onSlotchange={props.onSlotChange}></slot>\n    </div>\n  );\n}\n","/*\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 anime from 'animejs';\n\nexport function shakeInput(input: HTMLInputElement) {\n  const xMax = 5;\n  anime({\n    targets: input,\n    duration: 200,\n    easing: 'easeInOutSine',\n    loop: 2,\n    translateX: [\n      {\n        value: xMax * -1,\n      },\n      {\n        value: xMax,\n      },\n      {\n        value: xMax / -2,\n      },\n      {\n        value: xMax / 2,\n      },\n      {\n        value: 0,\n      },\n    ],\n  });\n}\n","/*\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 { A11yAttributes, a11yBoolean } from '../utils/a11y';\nimport {\n  IxFormComponent,\n  IxInputFieldComponent,\n  ValidationResults,\n  shouldSuppressInternalValidation,\n} from '../utils/field';\nimport { generateUUID } from '../utils/uuid';\nimport { shakeInput } from './text-field.animation';\n\nexport function createIdIfNotExists(\n  element: IxFormComponent,\n  idPrefix: string = 'field'\n) {\n  return element.hasAttribute('id')\n    ? element.getAttribute('id')\n    : `${idPrefix}-${generateUUID()}`;\n}\n\nexport function mapValidationResult(\n  ref: IxInputFieldComponent<unknown>,\n  result: ValidationResults\n) {\n  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;\n  ref.isValid = result.isValid;\n  ref.isInfo = result.isInfo;\n  ref.isWarning = result.isWarning;\n}\n\nexport function checkAllowedKeys(\n  comp: IxInputFieldComponent<unknown>,\n  event: KeyboardEvent\n) {\n  if (comp.allowedCharactersPattern) {\n    const regex = new RegExp(comp.allowedCharactersPattern);\n    if (!regex.test(event.key)) {\n      event.preventDefault();\n      shakeInput(comp.inputRef.current);\n    }\n  }\n}\n\nexport async function checkInternalValidity(\n  comp: IxFormComponent<unknown>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  const validityState = input.validity;\n\n  const eventResult = comp.validityStateChange.emit(validityState);\n\n  if (eventResult.defaultPrevented) {\n    return;\n  }\n\n  if (!comp.value) {\n    return;\n  }\n\n  const skipValidation = await shouldSuppressInternalValidation(comp);\n  if (skipValidation) {\n    return;\n  }\n\n  const { valid } = validityState;\n  comp.hostElement.classList.toggle('ix-invalid', !valid);\n}\n\nexport function onInputBlur(\n  comp: IxInputFieldComponent<unknown>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  comp.ixBlur.emit();\n  checkInternalValidity(comp, input);\n}\n\nexport function applyPostfixPadding(\n  inputElement: HTMLElement,\n  width: number,\n  options: {\n    postfix: boolean;\n    additionalPaddingRight?: string;\n  }\n) {\n  if (!inputElement) {\n    return;\n  }\n\n  if (width === 0) {\n    return;\n  }\n\n  const padding = `${(width + 12) / 16}rem`;\n\n  if (options.postfix) {\n    inputElement.style.paddingRight = `calc(${padding} + ${\n      options.additionalPaddingRight ?? '0rem'\n    })`;\n  } else {\n    inputElement.style.paddingLeft = padding;\n  }\n}\n\nexport function adjustPaddingForPrefixAndPostfix(\n  prefixElement: HTMLElement,\n  postfixElement: HTMLElement,\n  inputElement: HTMLElement\n) {\n  const prefixBoundingRect = prefixElement.getBoundingClientRect();\n  const postfixBoundingRect = postfixElement.getBoundingClientRect();\n\n  if (prefixBoundingRect) {\n    applyPostfixPadding(inputElement, prefixBoundingRect.width, {\n      postfix: false,\n    });\n  }\n\n  if (postfixBoundingRect) {\n    applyPostfixPadding(inputElement, postfixBoundingRect.width, {\n      postfix: true,\n    });\n  }\n}\n\nexport function getAriaAttributesForInput(\n  component: IxInputFieldComponent\n): A11yAttributes {\n  const inputAria: A11yAttributes = {\n    'aria-invalid': `${a11yBoolean(component.isInvalid)}`,\n    'aria-required': `${a11yBoolean(component.required)}`,\n  };\n\n  if (component.isInvalid && component.invalidText) {\n    inputAria['aria-errormessage'] = component.invalidText;\n  }\n  return inputAria;\n}\n"],"version":3}

package/dist/cjs/validation-c5a41d68.js

@@ -1,117 +0,0 @@
-'use strict';
-
-const index = require('./index-0f6297c8.js');
-
-/*
- * 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.
- */
-async function shouldSuppressInternalValidation(host) {
-    if (host.getAssociatedFormElement &&
-        typeof host.getAssociatedFormElement === 'function') {
-        const form = await host.getAssociatedFormElement();
-        if (!form) {
-            return false;
-        }
-        return form.noValidate;
-    }
-    return false;
-}
-function createClassMutationObserver(element, callback, options) {
-    const observer = new MutationObserver(callback);
-    observer.observe(element, {
-        subtree: options === null || options === void 0 ? void 0 : options.includeChildren,
-        childList: options === null || options === void 0 ? void 0 : options.includeChildren,
-        attributes: true,
-        attributeFilter: ['class'],
-    });
-    return {
-        destroy() {
-            observer.disconnect();
-        },
-    };
-}
-function containsClass(hostElement, className, includeChildren) {
-    return (hostElement.classList.contains(`${className}`) ||
-        (includeChildren ? !!hostElement.querySelector(`.${className}`) : false));
-}
-function checkFieldClasses(hostElement, includeChildren = false) {
-    return {
-        isInvalid: containsClass(hostElement, 'ix-invalid', includeChildren),
-        isInvalidByRequired: containsClass(hostElement, 'ix-invalid--required', includeChildren),
-        isValid: containsClass(hostElement, 'ix-valid', includeChildren),
-        isInfo: containsClass(hostElement, 'ix-info', includeChildren),
-        isWarning: containsClass(hostElement, 'ix-warning', includeChildren),
-    };
-}
-function HookValidationLifecycle(options) {
-    return (proto, methodName) => {
-        let checkIfRequiredFunction;
-        let classMutationObserver;
-        const { componentWillLoad, disconnectedCallback, connectedCallback } = proto;
-        proto.connectedCallback = function () {
-            const host = index.getElement(this);
-            checkIfRequiredFunction = async () => {
-                const skipValidation = await shouldSuppressInternalValidation(host);
-                if (skipValidation) {
-                    return;
-                }
-                if (host.hasValidValue && typeof host.hasValidValue === 'function') {
-                    const hasValue = await host.hasValidValue();
-                    if (host.required) {
-                        host.classList.toggle('ix-invalid--required', !hasValue);
-                    }
-                    else {
-                        host.classList.remove('ix-invalid--required');
-                    }
-                }
-                if (host.getValidityState &&
-                    typeof host.getValidityState === 'function') {
-                    const validityState = await host.getValidityState();
-                    Object.keys(validityState)
-                        // Use only the keys that are relevant for the validation state
-                        // patternMismatch used for `ix-date-field`
-                        .filter((key) => ['patternMismatch'].includes(key))
-                        .forEach((key) => {
-                        host.classList.toggle(`ix-invalid--${key}`, validityState[key]);
-                    });
-                }
-            };
-            host.addEventListener('valueChange', checkIfRequiredFunction);
-            setTimeout(checkIfRequiredFunction);
-            return connectedCallback && connectedCallback.call(this);
-        };
-        proto.componentWillLoad = function () {
-            const host = index.getElement(this);
-            classMutationObserver = createClassMutationObserver(host, () => {
-                const result = checkFieldClasses(host, options === null || options === void 0 ? void 0 : options.includeChildren);
-                proto[methodName].call(this, result);
-            }, options);
-            const result = checkFieldClasses(host, options === null || options === void 0 ? void 0 : options.includeChildren);
-            proto[methodName].call(this, result);
-            return componentWillLoad && componentWillLoad.call(this);
-        };
-        proto.disconnectedCallback = function () {
-            const host = index.getElement(this);
-            if (host && classMutationObserver) {
-                classMutationObserver.destroy();
-                classMutationObserver = null;
-            }
-            if (host && checkIfRequiredFunction) {
-                host.removeEventListener('valueChange', checkIfRequiredFunction);
-            }
-            return disconnectedCallback && disconnectedCallback.call(this);
-        };
-    };
-}
-
-exports.HookValidationLifecycle = HookValidationLifecycle;
-exports.checkFieldClasses = checkFieldClasses;
-exports.createClassMutationObserver = createClassMutationObserver;
-exports.shouldSuppressInternalValidation = shouldSuppressInternalValidation;
-
-//# sourceMappingURL=validation-c5a41d68.js.map

package/dist/cjs/validation-c5a41d68.js.map

@@ -1 +0,0 @@
-{"file":"validation-c5a41d68.js","mappings":"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","names":["getElement"],"sources":["src/components/utils/field/validation.ts"],"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 { getElement } from '@stencil/core';\nimport { HTMLIxFormComponentElement, IxFormComponent } from '.';\nimport { IxComponent } from '../internal';\n\nexport type ClassMutationObserver = {\n  destroy: () => void;\n};\n\nexport async function shouldSuppressInternalValidation(\n  host: IxFormComponent<unknown>\n) {\n  if (\n    host.getAssociatedFormElement &&\n    typeof host.getAssociatedFormElement === 'function'\n  ) {\n    const form = await host.getAssociatedFormElement();\n\n    if (!form) {\n      return false;\n    }\n\n    return form.noValidate;\n  }\n\n  return false;\n}\n\nexport function createClassMutationObserver(\n  element: HTMLElement,\n  callback: () => void,\n  options?: {\n    includeChildren?: boolean;\n  }\n): ClassMutationObserver {\n  const observer = new MutationObserver(callback);\n  observer.observe(element, {\n    subtree: options?.includeChildren,\n    childList: options?.includeChildren,\n    attributes: true,\n    attributeFilter: ['class'],\n  });\n\n  return {\n    destroy() {\n      observer.disconnect();\n    },\n  };\n}\n\nexport type ValidationResultProperty =\n  | 'isInvalid'\n  | 'isInvalidByRequired'\n  | 'isValid'\n  | 'isInfo'\n  | 'isWarning';\nexport type ValidationResults = Record<ValidationResultProperty, boolean>;\n\nfunction containsClass(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  className: string,\n  includeChildren: boolean\n) {\n  return (\n    hostElement.classList.contains(`${className}`) ||\n    (includeChildren ? !!hostElement.querySelector(`.${className}`) : false)\n  );\n}\n\nexport function checkFieldClasses(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  includeChildren = false\n): ValidationResults {\n  return {\n    isInvalid: containsClass(hostElement, 'ix-invalid', includeChildren),\n    isInvalidByRequired: containsClass(\n      hostElement,\n      'ix-invalid--required',\n      includeChildren\n    ),\n    isValid: containsClass(hostElement, 'ix-valid', includeChildren),\n    isInfo: containsClass(hostElement, 'ix-info', includeChildren),\n    isWarning: containsClass(hostElement, 'ix-warning', includeChildren),\n  };\n}\n\nexport function HookValidationLifecycle(options?: {\n  includeChildren?: boolean;\n}) {\n  return (proto: IxComponent, methodName: string) => {\n    let checkIfRequiredFunction: () => void;\n    let classMutationObserver: ClassMutationObserver | null;\n    const { componentWillLoad, disconnectedCallback, connectedCallback } =\n      proto;\n\n    proto.connectedCallback = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n\n      checkIfRequiredFunction = async () => {\n        const skipValidation = await shouldSuppressInternalValidation(host);\n        if (skipValidation) {\n          return;\n        }\n\n        if (host.hasValidValue && typeof host.hasValidValue === 'function') {\n          const hasValue = await host.hasValidValue();\n          if (host.required) {\n            host.classList.toggle('ix-invalid--required', !hasValue);\n          } else {\n            host.classList.remove('ix-invalid--required');\n          }\n        }\n\n        if (\n          host.getValidityState &&\n          typeof host.getValidityState === 'function'\n        ) {\n          const validityState = await host.getValidityState();\n          Object.keys(validityState)\n            // Use only the keys that are relevant for the validation state\n            // patternMismatch used for `ix-date-field`\n            .filter((key) => ['patternMismatch'].includes(key))\n            .forEach((key) => {\n              host.classList.toggle(`ix-invalid--${key}`, validityState[key]);\n            });\n        }\n      };\n\n      host.addEventListener('valueChange', checkIfRequiredFunction);\n      setTimeout(checkIfRequiredFunction);\n      return connectedCallback && connectedCallback.call(this);\n    };\n\n    proto.componentWillLoad = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n      classMutationObserver = createClassMutationObserver(\n        host,\n        () => {\n          const result = checkFieldClasses(host, options?.includeChildren);\n          proto[methodName].call(this, result);\n        },\n        options\n      );\n      const result = checkFieldClasses(host, options?.includeChildren);\n      proto[methodName].call(this, result);\n      return componentWillLoad && componentWillLoad.call(this);\n    };\n\n    proto.disconnectedCallback = function () {\n      const host = getElement(this);\n\n      if (host && classMutationObserver) {\n        classMutationObserver.destroy();\n        classMutationObserver = null;\n      }\n\n      if (host && checkIfRequiredFunction) {\n        host.removeEventListener('valueChange', checkIfRequiredFunction);\n      }\n\n      return disconnectedCallback && disconnectedCallback.call(this);\n    };\n  };\n}\n"],"version":3}

package/dist/collection/components/checkbox/checkbox.css

@@ -1,437 +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 {
-  --ix-checkbox-check-color: var(--theme-color-primary--contrast);
-  /* 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;
-  margin-right: 0.5rem;
-}
-:host button:disabled {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
-}
-:host button:focus-visible {
-  outline: 0.0625rem solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-checkbox--focus--outline-offset);
-}
-:host input[type=checkbox] {
-  display: none;
-}
-:host label {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  height: 100%;
-}
-:host ix-typography {
-  margin-top: 0.125rem;
-}
-
-:host button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.checked) button,
-:host([indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.checked:hover) button,
-:host([indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.checked:active) button,
-:host([indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(:disabled) button,
-:host(.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
-}
-
-:host(.checked:disabled) button,
-:host(.checked.disabled) button,
-:host([indeterminate]:disabled) button,
-:host([indeterminate].disabled) button {
-  background-color: var(--theme-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(.ix-info) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--info);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--info--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--info--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--info);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--info--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--info--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--info);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--info--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--info--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--info);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--info--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--info--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--info);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--info--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--info--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--info);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--info--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--info--active);
-}
-
-:host(.ix-info) button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(.ix-info:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(.ix-info:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.ix-info.checked) button,
-:host(.ix-info[indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.ix-info.checked:hover) button,
-:host(.ix-info[indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.ix-info.checked:active) button,
-:host(.ix-info[indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(.ix-info:disabled) button,
-:host(.ix-info.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-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-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(.ix-warning) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--warning);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--warning--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--warning--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--warning);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--warning--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--warning--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--warning);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--warning--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--warning--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--warning);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--warning--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--warning--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--warning);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--warning--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--warning--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--warning);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--warning--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--warning--active);
-}
-
-:host(.ix-warning) button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(.ix-warning:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(.ix-warning:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.ix-warning.checked) button,
-:host(.ix-warning[indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.ix-warning.checked:hover) button,
-:host(.ix-warning[indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.ix-warning.checked:active) button,
-:host(.ix-warning[indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(.ix-warning:disabled) button,
-:host(.ix-warning.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-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-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(.ix-invalid--required) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--invalid);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--invalid--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--invalid--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--invalid);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--invalid--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--invalid--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--invalid);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--invalid--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--invalid--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--invalid);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--invalid--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--invalid--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--invalid);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--invalid--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--invalid--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--invalid);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--invalid--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--invalid--active);
-}
-
-:host(.ix-invalid--required) button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(.ix-invalid--required:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(.ix-invalid--required:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.ix-invalid--required.checked) button,
-:host(.ix-invalid--required[indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.ix-invalid--required.checked:hover) button,
-:host(.ix-invalid--required[indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.ix-invalid--required.checked:active) button,
-:host(.ix-invalid--required[indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(.ix-invalid--required:disabled) button,
-:host(.ix-invalid--required.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-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-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(.ix-invalid) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--invalid);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--invalid--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--invalid--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--invalid);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--invalid--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--invalid--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--invalid);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--invalid--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--invalid--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--invalid);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--invalid--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--invalid--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--invalid);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--invalid--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--invalid--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--invalid);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--invalid--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--invalid--active);
-}
-
-:host(.ix-invalid) button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(.ix-invalid:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(.ix-invalid:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.ix-invalid.checked) button,
-:host(.ix-invalid[indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.ix-invalid.checked:hover) button,
-:host(.ix-invalid[indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.ix-invalid.checked:active) button,
-:host(.ix-invalid[indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(.ix-invalid:disabled) button,
-:host(.ix-invalid.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-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-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(:disabled),
-:host(.disabled) {
-  pointer-events: none;
-}
-:host(:disabled) button,
-:host(:disabled) label,
-:host(:disabled) input,
-:host(.disabled) button,
-:host(.disabled) label,
-:host(.disabled) input {
-  pointer-events: none;
-}