@siemens/ix 1.6.3 → 2.0.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  scoped: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() host!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.host) {\n      this.host.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title text-default-title-single\">\n                {this.toastTitle}\n              </div>\n            ) : null}\n            <div class=\"toast-message text-default\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  shadow: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() hostElement!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.hostElement) {\n      this.hostElement.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title\">{this.toastTitle}</div>\n            ) : null}\n            <div class=\"toast-message\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,52 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`<ix-toggle></ix-toggle>`);
+  const drawer = page.locator('ix-toggle');
+  await expect(drawer).toHaveClass(/hydrated/);
+  await expect(drawer).toBeVisible();
+});
+test('should toggle', async ({ mount, page }) => {
+  await mount(`<ix-toggle></ix-toggle>`);
+  const toggle = page.locator('ix-toggle');
+  await expect(toggle).toHaveClass(/hydrated/);
+  await toggle.click();
+  const input = toggle.locator('input');
+  await expect(input).toBeChecked();
+});
+test('should not toggle if disabled', async ({ mount, page }) => {
+  await mount(`<ix-toggle disabled></ix-toggle>`);
+  const toggle = page.locator('ix-toggle');
+  await expect(toggle).toHaveClass(/hydrated/);
+  await toggle.click({
+    force: true,
+  });
+  const input = toggle.locator('input');
+  await expect(input).not.toBeChecked();
+});
+test('should be toggled ON after indeterminate', async ({ mount, page }) => {
+  await mount(`<ix-toggle indeterminate></ix-toggle>`);
+  const toggle = page.locator('ix-toggle');
+  await expect(toggle).toHaveClass(/hydrated/);
+  const input = toggle.locator('input');
+  await expect(input).not.toBeChecked();
+  await toggle.click();
+  await expect(input).toBeChecked();
+});
+//# sourceMappingURL=toggle.ct.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.ct.js","sourceRoot":"","sources":["../../../../src/components/toggle/test/toggle.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;EACvC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;AACrC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC9C,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;EACvC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;EAErB,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACtC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AACpC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC9D,MAAM,KAAK,CAAC,kCAAkC,CAAC,CAAC;EAChD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,CAAC;IACjB,KAAK,EAAE,IAAI;GACZ,CAAC,CAAC;EAEH,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACtC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AACxC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,0CAA0C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACzE,MAAM,KAAK,CAAC,uCAAuC,CAAC,CAAC;EACrD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACtC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EAEtC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;EAErB,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AACpC,CAAC,CAAC,CAAC","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 */\n/*\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 { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-toggle></ix-toggle>`);\n  const drawer = page.locator('ix-toggle');\n  await expect(drawer).toHaveClass(/hydrated/);\n  await expect(drawer).toBeVisible();\n});\n\ntest('should toggle', async ({ mount, page }) => {\n  await mount(`<ix-toggle></ix-toggle>`);\n  const toggle = page.locator('ix-toggle');\n  await expect(toggle).toHaveClass(/hydrated/);\n  await toggle.click();\n\n  const input = toggle.locator('input');\n  await expect(input).toBeChecked();\n});\n\ntest('should not toggle if disabled', async ({ mount, page }) => {\n  await mount(`<ix-toggle disabled></ix-toggle>`);\n  const toggle = page.locator('ix-toggle');\n  await expect(toggle).toHaveClass(/hydrated/);\n  await toggle.click({\n    force: true,\n  });\n\n  const input = toggle.locator('input');\n  await expect(input).not.toBeChecked();\n});\n\ntest('should be toggled ON after indeterminate', async ({ mount, page }) => {\n  await mount(`<ix-toggle indeterminate></ix-toggle>`);\n  const toggle = page.locator('ix-toggle');\n  await expect(toggle).toHaveClass(/hydrated/);\n  const input = toggle.locator('input');\n  await expect(input).not.toBeChecked();\n\n  await toggle.click();\n\n  await expect(input).toBeChecked();\n});\n"]}

package/dist/collection/components/toggle/toggle.css

@@ -6,18 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
- * SPDX-FileCopyrightText: 2023 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.
- */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -35,21 +23,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
-  display: flex;
+  display: inline-flex;
+  position: relative;
+  height: 2rem;
+  justify-content: flex-start;
   align-items: center;
-  outline: none;
+  margin-right: 0.25rem;
+  cursor: pointer;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
 }
 :host .switch {
   position: relative;
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
+  width: 3rem;
   min-width: 3rem;
-  height: 2rem;
-}
-:host .switch:not(.disabled):not(:disabled):focus-visible {
-  outline-color: var(--focus--border-color);
-  outline-style: solid;
-  outline-width: 1px;
+  max-width: 3rem;
+  height: 1.5rem;
+  margin-right: 0.25rem;
 }
 :host .switch input {
   opacity: 0;
@@ -57,174 +51,99 @@
   height: 0;
 }
 :host .slider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-}
-:host .slider .slider-track {
   background-color: var(--theme-switch-off--background);
-  border-radius: 2.125rem;
-  border: 1px solid var(--theme-switch-off--border-color);
-  width: 2.5rem;
-  height: 1rem;
+  transition: 150ms;
+  border-radius: 1.5rem;
 }
 :host .slider:before {
   position: absolute;
   content: "";
-  height: 1.5rem;
-  width: 1.5rem;
-  left: 0.125rem;
+  height: 18px;
+  width: 18px;
+  left: 4px;
+  bottom: 3px;
   background-color: var(--theme-switch-thumb-off--background);
-  transition: transform 150ms;
+  transition: 150ms;
   border-radius: 50%;
-  border: 1px solid var(--theme-switch-thumb-off--border-color);
-  box-shadow: var(--theme-switch-thumb--box-shadow);
 }
-:host input:checked + .slider:before {
-  transform: translateX(1.125rem);
-  left: 0.25rem;
-}
-:host .text {
+:host input {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--theme-switch--color);
-  padding: 0 0.5rem;
-  position: relative;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-:host:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host:not(.disabled):not(:disabled):hover .slider:before {
-  background-color: var(--theme-switch-thumb-off--background--hover);
-  border-color: var(--theme-switch-thumb-off--border-color--hover);
-}
-:host:not(.disabled):not(:disabled):hover .slider-track {
-  background-color: var(--theme-switch-off--background--hover);
-  border-color: var(--theme-switch-off--border-color--hover);
-}
-:host:not(.disabled):not(:disabled):hover .text {
-  color: var(--theme-switch--color--hover);
-}
-:host:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host:not(.disabled):not(:disabled):active .slider:before {
-  background-color: var(--theme-switch-thumb-off--background--active);
-  border-color: var(--theme-switch-thumb-off--border-color--active);
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
-:host:not(.disabled):not(:disabled):active .slider-track {
-  background-color: var(--theme-switch-off--background--active);
-  border-color: var(--theme-switch-off--border-color--active);
+:host input:focus-visible + .switch > .slider {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: 1px;
 }
-:host:not(.disabled):not(:disabled):active .text {
-  color: var(--theme-switch--color--active);
+:host input:checked + .switch > .slider {
+  background-color: var(--theme-switch-on--background);
 }
-:host.checked .slider:before {
+:host input:checked + .switch > .slider::before {
   background-color: var(--theme-switch-thumb-on--background);
-  border-color: var(--theme-switch-thumb-on--border-color);
+  transform: translateX(1.35rem);
 }
-:host.checked .slider .slider-track {
-  background-color: var(--theme-switch-on--background);
-  border-color: var(--theme-switch-on--border-color);
+:host input + .switch:hover > .slider {
+  background-color: var(--theme-switch-off--background--hover);
 }
-:host.checked .text {
-  color: var(--theme-switch--color);
+:host input + .switch:hover > .slider:before {
+  background-color: var(--theme-switch-thumb-off--background--hover);
 }
-:host.checked:not(.disabled):not(:disabled) {
-  cursor: pointer;
+:host input + .switch:active > .slider {
+  background-color: var(--theme-switch-off--background--active);
 }
-:host.checked:not(.disabled):not(:disabled):hover .slider:before {
-  background-color: var(--theme-switch-thumb-on--background--hover);
-  border-color: var(--theme-switch-thumb-on--border-color--hover);
+:host input + .switch:active > .slider:before {
+  background-color: var(--theme-switch-thumb-off--background--active);
 }
-:host.checked:not(.disabled):not(:disabled):hover .slider .slider-track {
+:host input:checked + .switch:hover > .slider {
   background-color: var(--theme-switch-on--background--hover);
-  border-color: var(--theme-switch-on--border-color--hover);
-}
-:host.checked:not(.disabled):not(:disabled):hover .text {
-  color: var(--theme-switch--color--hover);
 }
-:host.checked:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host.checked:not(.disabled):not(:disabled):active .slider:before {
-  background-color: var(--theme-switch-thumb-on--background--active);
-  border-color: var(--theme-switch-thumb-on--border-color--active);
+:host input:checked + .switch:hover > .slider:before {
+  background-color: var(--theme-switch-thumb-on--background--hover);
 }
-:host.checked:not(.disabled):not(:disabled):active .slider-track {
+:host input:checked + .switch:active > .slider {
   background-color: var(--theme-switch-on--background--active);
-  border-color: var(--theme-switch-on--border-color--active);
-}
-:host.checked:not(.disabled):not(:disabled):active .text {
-  color: var(--theme-switch--color--active);
-}
-:host.indeterminate .slider:before {
-  background-color: var(--theme-switch-thumb-mixed--background);
-  border-color: var(--theme-switch-thumb-mixed--border-color);
-}
-:host.indeterminate .slider .slider-track {
-  background-color: var(--theme-switch-mixed--background);
-  border-color: var(--theme-switch-mixed--border-color);
 }
-:host.indeterminate .text {
-  color: var(--theme-switch--color);
-}
-:host.indeterminate:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host.indeterminate:not(.disabled):not(:disabled):hover .slider:before {
-  background-color: var(--theme-switch-thumb-mixed--background--hover);
-  border-color: var(--theme-switch-thumb-mixed--border-color--hover);
-}
-:host.indeterminate:not(.disabled):not(:disabled):hover .slider .slider-track {
-  background-color: var(--theme-switch-mixed--background--hover);
-  border-color: var(--theme-switch-mixed--border-color--hover);
-}
-:host.indeterminate:not(.disabled):not(:disabled):hover .text {
-  color: var(--theme-switch--color--hover);
-}
-:host.indeterminate:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host.indeterminate:not(.disabled):not(:disabled):active .slider:before {
-  background-color: var(--theme-switch-thumb-mixed--background--active);
-  border-color: var(--theme-switch-thumb-mixed--border-color--active);
-}
-:host.indeterminate:not(.disabled):not(:disabled):active .slider-track {
-  background-color: var(--theme-switch-mixed--background--active);
-  border-color: var(--theme-switch-mixed--border-color--active);
+:host input:checked + .switch:active > .slider:before {
+  background-color: var(--theme-switch-thumb-on--background--active);
 }
-:host.indeterminate:not(.disabled):not(:disabled):active .text {
-  color: var(--theme-switch--color--active);
+:host input:indeterminate + .switch > .slider::before {
+  transform: translateX(0.7rem);
 }
-:host.indeterminate .slider:before {
-  transform: translateX(0.625rem);
+:host .toggle-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-:host.disabled {
+
+:host(.disabled) {
   pointer-events: none;
 }
-:host.disabled .slider {
-  cursor: initial;
+:host(.disabled) input + .switch {
   opacity: 0.5;
 }
-:host.disabled .slider:before {
+:host(.disabled) input + .switch > .slider {
+  background-color: var(--theme-switch-off--background--disabled);
+}
+:host(.disabled) input + .switch > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--disabled);
-  border-color: var(--theme-switch-thumb-off--border-color--disabled);
 }
-:host.disabled .slider .slider-track {
-  background-color: var(--theme-switch-off--background--disabled);
-  border-color: var(--theme-switch-off--border-color--disabled);
+:host(.disabled) input:checked + .switch > .slider {
+  background-color: var(--theme-switch-on--background--disabled);
+}
+:host(.disabled) input:checked + .switch > .slider:before {
+  background-color: var(--theme-switch-thumb-on--background--disabled);
 }
-:host.disabled .text {
-  color: var(--theme-switch--color--disabled);
+:host(.disabled) .toggle-text {
+  color: var(--theme-color-weak-text);
 }

package/dist/collection/components/toggle/toggle.js

@@ -6,51 +6,32 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from '@stencil/core';
-export class CuiToggle {
+import { Fragment, h, Host, } from '@stencil/core';
+import { a11yBoolean } from '../utils/a11y';
+export class Toggle {
   constructor() {
     this.checked = false;
     this.disabled = false;
     this.indeterminate = false;
-    this.color = 'accent';
     this.textOn = 'On';
     this.textOff = 'Off';
     this.textIndeterminate = 'Mixed';
     this.hideText = false;
   }
-  async onKeyDown(event) {
-    const targetElement = event.target;
-    if (!this.hostElement.contains(targetElement)) {
-      return;
+  onCheckedChange(newChecked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
     }
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      this.emitChange(event);
-    }
-  }
-  emitChange(event) {
-    if (this.disabled || this.indeterminate) {
-      return;
-    }
-    event.stopPropagation();
-    event.preventDefault();
-    this.checked = !this.checked;
+    this.checked = newChecked;
     this.checkedChange.emit(this.checked);
   }
-  getText() {
-    if (this.indeterminate || this.checked === undefined) {
-      return this.textIndeterminate;
-    }
-    return this.checked ? this.textOn : this.textOff;
-  }
   render() {
     return (h(Host, { class: {
         disabled: this.disabled,
-        checked: this.checked,
-        indeterminate: this.indeterminate || this.checked === undefined,
-      } }, h("label", { class: "switch", tabindex: this.disabled ? -1 : 0 }, h("input", { tabindex: "-1", type: "checkbox", checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate || this.checked === undefined, id: this.hostElement.id, onChange: (e) => this.emitChange(e) }), h("span", { class: "slider" }, h("span", { class: "slider-track" }))), !this.hideText ? (h("span", { title: this.getText(), class: "text", onClick: (e) => this.emitChange(e) }, this.getText())) : null));
+      }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { class: "switch", tabIndex: -1 }, h("span", { class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
   }
   static get is() { return "ix-toggle"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["toggle.scss"]
@@ -101,7 +82,7 @@ export class CuiToggle {
       },
       "indeterminate": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -114,30 +95,9 @@ export class CuiToggle {
           "text": "If true the control is in indeterminate state"
         },
         "attribute": "indeterminate",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0"
-            }],
-          "text": "Basic and status colors from color palette"
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'accent'"
-      },
       "textOn": {
         "type": "string",
         "mutable": false,
@@ -231,14 +191,5 @@ export class CuiToggle {
       }];
   }
   static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "onKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }
 //# sourceMappingURL=toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  scoped: true,\n})\nexport class CuiToggle {\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Basic and status colors from color palette\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() color = 'accent';\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  @Listen('keydown', { target: 'window' })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      this.emitChange(event);\n    }\n  }\n\n  private emitChange(event: Event) {\n    if (this.disabled || this.indeterminate) {\n      return;\n    }\n\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.checked = !this.checked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  private getText() {\n    if (this.indeterminate || this.checked === undefined) {\n      return this.textIndeterminate;\n    }\n\n    return this.checked ? this.textOn : this.textOff;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n          indeterminate: this.indeterminate || this.checked === undefined,\n        }}\n      >\n        <label class=\"switch\" tabindex={this.disabled ? -1 : 0}>\n          <input\n            tabindex=\"-1\"\n            type=\"checkbox\"\n            checked={this.checked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate || this.checked === undefined}\n            id={this.hostElement.id}\n            onChange={(e) => this.emitChange(e)}\n          />\n          <span class=\"slider\">\n            <span class=\"slider-track\"></span>\n          </span>\n        </label>\n        {!this.hideText ? (\n          <span\n            title={this.getText()}\n            class=\"text\"\n            onClick={(e) => this.emitChange(e)}\n          >\n            {this.getText()}\n          </span>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,MAAM;;mBAMiC,KAAK;oBAKpC,KAAK;yBAKgC,KAAK;kBAK5C,IAAI;mBAKH,KAAK;6BAKK,OAAO;oBAKhB,KAAK;;EAOxB,eAAe,CAAC,UAAmB;IACjC,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;MAElD,aACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C;MACT,aAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC;QAChC,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB;MACP,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACrB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CACrC,CACR,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,CACZ,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n})\nexport class Toggle {\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange: EventEmitter<boolean>;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onClick={() => this.onCheckedChange(!this.checked)}\n      >\n        <input\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          role=\"switch\"\n          tabindex={0}\n          type=\"checkbox\"\n          aria-checked={a11yBoolean(this.checked)}\n          onChange={(event) =>\n            this.onCheckedChange((event.target as any).checked)\n          }\n        ></input>\n        <label class=\"switch\" tabIndex={-1}>\n          <span class=\"slider\"></span>\n        </label>\n        {!this.hideText ? (\n          <Fragment>\n            {!this.indeterminate ? (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.checked ? this.textOn : this.textOff}\n              </span>\n            ) : (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.textIndeterminate}\n              </span>\n            )}\n          </Fragment>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}