@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

package/dist/collection/components/time-picker/time-picker.css

@@ -54,6 +54,14 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * 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
  *
@@ -87,6 +95,9 @@ input {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
   text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -112,11 +123,20 @@ input::-moz-placeholder {
 input::placeholder {
   color: var(--theme-input-hint--color);
 }
-input.hover, input:hover {
+input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover, input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-input.focus, input:focus {
+input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover, input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus, input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus, input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -169,7 +189,6 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 textarea {
-  height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
 textarea {
@@ -188,6 +207,9 @@ textarea {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
   text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -213,11 +235,20 @@ textarea::-moz-placeholder {
 textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
-textarea.hover, textarea:hover {
+textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-textarea.focus, textarea:focus {
+textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -317,6 +348,50 @@ form:not(.was-validated) .valid-feedback {
   display: none !important;
 }
 
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),
+input.ix-info:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--info);
+}
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,
+input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--info--hover) !important;
+}
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,
+input.ix-info:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--info--active) !important;
+}
+
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]) {
+  background-color: var(--theme-input--background--invalid);
+  border-color: var(--theme-input--border-color--invalid);
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--invalid) !important;
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--invalid--hover) !important;
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--invalid--active) !important;
+}
+
 :host {
   /* width */
   /* Track */
@@ -378,6 +453,12 @@ form:not(.was-validated) .valid-feedback {
 :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;

package/dist/collection/components/time-picker/time-picker.js

@@ -109,7 +109,7 @@ export class TimePicker {
             },
         ];
         timepickerInformation = timepickerInformation.filter((item) => !item.hidden);
-        return (h(Host, { key: 'c09337ff6d0366929f77fe9bbdd89eb43bcc71ea' }, h("ix-date-time-card", { key: '80c29872490f5968979a802b92113377ec9df678', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: '35981c4cde62451368ee30fc4bcc19f894939cda', class: "header", slot: "header" }, h("ix-typography", { key: 'cd88a3f06e8907419acc45cd71d9954b7365096c', variant: "default-title" }, this.textTime || 'Time')), h("div", { key: 'fd5d74523fd649fedac87ac0887fb643fd9795ce', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
+        return (h(Host, { key: '052caa67744d0fa735d2bf420b6ee8b36c589593' }, h("ix-date-time-card", { key: '5d0e76c403f03b292b75ae83ea2c931f57dc512d', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: '2d56ae54a7dc9ea16c1a2c78ffafcd9b01076075', class: "header", slot: "header" }, h("ix-typography", { key: 'fd875137c44524b3b9d3e256ba1d574d9bd9c0e8', variant: "default-title" }, this.textTime || 'Time')), h("div", { key: '96306a898cef41ad37446abacecb00bc9fb3c3e8', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
                 [descriptor.unit]: 1,
             })), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: descriptor.unit, type: "number", placeholder: descriptor.placeholder, value: this._formattedTime
                 ? this._formattedTime[descriptor.unit]
@@ -129,11 +129,11 @@ export class TimePicker {
             })), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), index !== timepickerInformation.length - 1 && (h("div", { class: {
                 'column-seperator': true,
                 hidden: descriptor.hidden,
-            } }, ":"))))), h("div", { key: '819d9ce8cdfc94e7c4a1d2f7190587f052a9d246', class: {
+            } }, ":"))))), h("div", { key: 'e8edf6d77d7d6680f168555d9d893b58035dc94f', class: {
                 columns: true,
                 'default-space': true,
                 hidden: this._timeRef === undefined,
-            } }, h("ix-icon-button", { key: '6ec3654d6a81bb2420695dd3292677395bd6adc2', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { key: '09b1dd7076112d4dc5168a968ed0ebebaa67e69f', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: 'ff24cdad6df286cc2da51958c2b51fe43f1e4fea', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { key: '82602709c4107324d9498426cb30959fe81bacc4', class: { button: true, hidden: !this.standaloneAppearance } }, h("ix-button", { key: '64da9baed02906baad694bbe066bc355197d293e', onClick: () => {
+            } }, h("ix-icon-button", { key: 'e77e0c724e814bad7077aaace11558a01e8247e3', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { key: 'eff1b1d2b8af04033eb17d8148d6a8e16cc5f247', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: '4aa17f826e2c381ad13f4f13ea0773d5a703837a', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { key: '260a32b5259c25e16aaca379c0ad4797e21f9108', class: { button: true, hidden: !this.standaloneAppearance } }, h("ix-button", { key: '2568b6206b87a3661b3955141f59cfb2242edb71', onClick: () => {
                 this.timeSelect.emit(this._time.toFormat(this.format));
                 this.done.emit(this._time.toFormat(this.format));
             } }, this.textSelectTime)))));
@@ -182,7 +182,7 @@ export class TimePicker {
                     "references": {
                         "TimePickerCorners": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/time-picker/time-picker.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/time-picker/time-picker.tsx",
                             "id": "src/components/time-picker/time-picker.tsx::TimePickerCorners"
                         }
                     }

package/dist/collection/components/toast/styles/toast-container.css

@@ -48,6 +48,12 @@
 :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;

package/dist/collection/components/toast/toast-container.js

@@ -77,10 +77,10 @@ export class ToastContainer {
         };
     }
     render() {
-        return (h(Host, { key: '22ee0d6985d0b35a3d623dfc318c22cb0a2720ae', class: {
+        return (h(Host, { key: '7ed12499736b25361b54781a914704624361f413', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: '9cfd7c6607fde4dd11f6b4c026f017b31acba8d9' })));
+            } }, h("slot", { key: '48a789d536cb007c2dc31d15615600cd0b51111d' })));
     }
     static get is() { return "ix-toast-container"; }
     static get encapsulation() { return "shadow"; }
@@ -169,7 +169,7 @@ export class ToastContainer {
                         },
                         "ShowToastResult": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/toast/toast-container.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/toast/toast-container.tsx",
                             "id": "src/components/toast/toast-container.tsx::ShowToastResult"
                         },
                         "ToastConfig": {

package/dist/collection/components/toast/toast.css

@@ -84,6 +84,12 @@
 :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;

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

@@ -51,11 +51,11 @@ export class Toast {
             animationPlayState: this.touched ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: '8af2933e92ceaae263f3cc38ad519c6fc8865b3e', class: "animate__animated animate__fadeIn" }, h("div", { key: '7a09d06a2d6643be19660ad2dc8b226208a7b478', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: 'ca58e7b2c0e4ee3d77bb0ee9be2a7ff86759f52a', class: "animate__animated animate__fadeIn" }, h("div", { key: '0d37ab4e3103087f5cb6d8b55c7afe843b2359c3', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: 'b19932c2f9e60287f53302f8d273df2f0a087375', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: 'b10ee8ffae9b69060c74b405c41a5533ceff5806', class: "toast-message" }, h("slot", { key: '8e7931e442b82ef3760f4b13c08f2fb29cb3dbe5' }))), h("div", { key: 'bd7de69a43138138f60e9938a07e0f3d58262cf7', class: "toast-close" }, h("ix-icon-button", { key: '93137526cf1606c0f72b55f722495c4bb659c1c3', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '83e897aa8388de4205c5348f7db698da94f83a19', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: '306f6cb5055ba4b60823d692bf7154c8364ab0f5', class: "toast-message" }, h("slot", { key: 'fcea3e5a631e27e9045167fde508e610c964063a' }))), h("div", { key: '706771eeb884647bd84a3895da2e42409971ab2e', class: "toast-close" }, h("ix-icon-button", { key: '7e27ce2f29d8d010d216bf6ef3d69feb9ebe51c8', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {

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

@@ -15,7 +15,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { expect } from "@playwright/test";
-import { test } from "../../../tests/utils/test/index";
+import { getFormValue, preventFormSubmission, test } from "../../../tests/utils/test/index";
 test('renders', async ({ mount, page }) => {
     await mount(`<ix-toggle></ix-toggle>`);
     const drawer = page.locator('ix-toggle');
@@ -49,4 +49,27 @@ test('should be toggled ON after indeterminate', async ({ mount, page }) => {
     await toggle.click();
     await expect(input).toBeChecked();
 });
+test(`form-ready`, async ({ mount, page }) => {
+    await mount(`<form><ix-toggle name="my-field-name"></ix-toggle></form>`);
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    await page.locator('ix-toggle').click();
+    const formData = await getFormValue(formElement, 'my-field-name');
+    expect(formData).toBe('on');
+});
+test(`form-ready with value`, async ({ mount, page }) => {
+    await mount(`<form><ix-toggle name="my-field-name" value="custom-value"></ix-toggle></form>`);
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    await page.locator('ix-toggle').click();
+    const formData = await getFormValue(formElement, 'my-field-name');
+    expect(formData).toBe('custom-value');
+});
+test(`form-ready default active`, async ({ mount, page }) => {
+    await mount(`<form><ix-toggle name="my-field-name" checked></ix-toggle></form>`);
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    const formData = await getFormValue(formElement, 'my-field-name');
+    expect(formData).toBe('on');
+});
 //# sourceMappingURL=toggle.ct.js.map

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

@@ -1 +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;IACxC,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;IACvC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC7C,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;IAC9C,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;IACvC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACtC,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;IAC9D,MAAM,KAAK,CAAC,kCAAkC,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,CAAC;QACjB,KAAK,EAAE,IAAI;KACZ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACtC,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;IACzE,MAAM,KAAK,CAAC,uCAAuC,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAEtC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,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"]}
+{"version":3,"file":"toggle.ct.js","sourceRoot":"","sources":["../../../../src/components/toggle/test/toggle.ct.ts"],"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/*\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 { getFormValue, preventFormSubmission, 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\ntest(`form-ready`, async ({ mount, page }) => {\n  await mount(`<form><ix-toggle name=\"my-field-name\"></ix-toggle></form>`);\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  await page.locator('ix-toggle').click();\n\n  const formData = await getFormValue(formElement, 'my-field-name');\n  expect(formData).toBe('on');\n});\n\ntest(`form-ready with value`, async ({ mount, page }) => {\n  await mount(\n    `<form><ix-toggle name=\"my-field-name\" value=\"custom-value\"></ix-toggle></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  await page.locator('ix-toggle').click();\n\n  const formData = await getFormValue(formElement, 'my-field-name');\n  expect(formData).toBe('custom-value');\n});\n\ntest(`form-ready default active`, async ({ mount, page }) => {\n  await mount(\n    `<form><ix-toggle name=\"my-field-name\" checked></ix-toggle></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const formData = await getFormValue(formElement, 'my-field-name');\n  expect(formData).toBe('on');\n});\n"]}

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

@@ -51,6 +51,12 @@
 :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;
@@ -96,6 +102,7 @@
   background-color: var(--theme-switch-off--background);
   transition: var(--theme-default-time);
   border-radius: 1.5rem;
+  border: 1px solid transparent;
 }
 :host .slider:before {
   position: absolute;
@@ -103,7 +110,7 @@
   height: 1.125rem;
   width: 1.125rem;
   left: 4px;
-  bottom: 3px;
+  bottom: 2px;
   background-color: var(--theme-switch-thumb-off--background);
   transition: var(--theme-default-time);
   border-radius: 50%;
@@ -129,26 +136,36 @@
   background-color: var(--theme-switch-thumb-on--background);
   transform: translateX(1.35rem);
 }
+:host input + .switch > .slider {
+  border-color: var(--theme-switch-off--border-color);
+}
 :host input + .switch:hover > .slider {
   background-color: var(--theme-switch-off--background--hover);
+  border-color: var(--theme-switch-off--border-color--hover);
 }
 :host input + .switch:hover > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--hover);
 }
 :host input + .switch:active > .slider {
   background-color: var(--theme-switch-off--background--active);
+  border-color: var(--theme-switch-off--border-color--active);
 }
 :host input + .switch:active > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--active);
 }
+:host input:checked + .switch > .slider {
+  border-color: var(--theme-switch-on--border-color);
+}
 :host input:checked + .switch:hover > .slider {
   background-color: var(--theme-switch-on--background--hover);
+  border-color: var(--theme-switch-on--border-color--hover);
 }
 :host input:checked + .switch:hover > .slider:before {
   background-color: var(--theme-switch-thumb-on--background--hover);
 }
 :host input:checked + .switch:active > .slider {
   background-color: var(--theme-switch-on--background--active);
+  border-color: var(--theme-switch-on--border-color--active);
 }
 :host input:checked + .switch:active > .slider:before {
   background-color: var(--theme-switch-thumb-on--background--active);
@@ -182,4 +199,124 @@
 }
 :host(.disabled) .toggle-text {
   color: var(--theme-color-weak-text);
+}
+
+:host(.ix-info:not(.disabled)) .slider {
+  --theme-switch-off--background: var(--theme-switch-off--background--info);
+  --theme-switch-off--background--hover: var(--theme-switch-off--background--info--hover);
+  --theme-switch-off--background--active: var(--theme-switch-off--background--info--active);
+  --theme-switch-thumb-off--background: var(--theme-switch-thumb-off--background--info);
+  --theme-switch-thumb-off--background--hover: var(--theme-switch-thumb-off--background--info--hover);
+  --theme-switch-thumb-off--background--active: var(--theme-switch-thumb-off--background--info--active);
+  --theme-switch-off--border-color: var(--theme-switch-off--border-color--info);
+  --theme-switch-off--border-color--hover: var(--theme-switch-off--border-color--info--hover);
+  --theme-switch-off--border-color--active: var(--theme-switch-off--border-color--info--active);
+  --theme-switch-on--background: var(--theme-switch-on--background--info);
+  --theme-switch-on--background--hover: var(--theme-switch-on--background--info--hover);
+  --theme-switch-on--background--active: var(--theme-switch-on--background--info--active);
+  --theme-switch-thumb-on--background: var(--theme-switch-thumb-on--background--info);
+  --theme-switch-thumb-on--background--hover: var(--theme-switch-thumb-on--background--info--hover);
+  --theme-switch-thumb-on--background--active: var(--theme-switch-thumb-on--background--info--active);
+  --theme-switch-on--border-color: var(--theme-switch-on--border-color--info);
+  --theme-switch-on--border-color--hover: var(--theme-switch-on--border-color--info--hover);
+  --theme-switch-on--border-color--active: var(--theme-switch-on--border-color--info--active);
+  --theme-switch-mixed--background: var(--theme-switch-mixed--background--info);
+  --theme-switch-mixed--background--hover: var(--theme-switch-mixed--background--info--hover);
+  --theme-switch-mixed--background--active: var(--theme-switch-mixed--background--info--active);
+  --theme-switch-thumb-mixed--background: var(--theme-switch-thumb-mixed--background--info);
+  --theme-switch-thumb-mixed--background--hover: var(--theme-switch-thumb-mixed--background--info--hover);
+  --theme-switch-thumb-mixed--background--active: var(--theme-switch-thumb-mixed--background--info--active);
+  --theme-switch-mixed--border-color: var(--theme-switch-mixed--border-color--info);
+  --theme-switch-mixed--border-color--hover: var(--theme-switch-mixed--border-color--info--hover);
+  --theme-switch-mixed--border-color--active: var(--theme-switch-mixed--border-color--info--active);
+}
+
+:host(.ix-warning:not(.disabled)) .slider {
+  --theme-switch-off--background: var(--theme-switch-off--background--warning);
+  --theme-switch-off--background--hover: var(--theme-switch-off--background--warning--hover);
+  --theme-switch-off--background--active: var(--theme-switch-off--background--warning--active);
+  --theme-switch-thumb-off--background: var(--theme-switch-thumb-off--background--warning);
+  --theme-switch-thumb-off--background--hover: var(--theme-switch-thumb-off--background--warning--hover);
+  --theme-switch-thumb-off--background--active: var(--theme-switch-thumb-off--background--warning--active);
+  --theme-switch-off--border-color: var(--theme-switch-off--border-color--warning);
+  --theme-switch-off--border-color--hover: var(--theme-switch-off--border-color--warning--hover);
+  --theme-switch-off--border-color--active: var(--theme-switch-off--border-color--warning--active);
+  --theme-switch-on--background: var(--theme-switch-on--background--warning);
+  --theme-switch-on--background--hover: var(--theme-switch-on--background--warning--hover);
+  --theme-switch-on--background--active: var(--theme-switch-on--background--warning--active);
+  --theme-switch-thumb-on--background: var(--theme-switch-thumb-on--background--warning);
+  --theme-switch-thumb-on--background--hover: var(--theme-switch-thumb-on--background--warning--hover);
+  --theme-switch-thumb-on--background--active: var(--theme-switch-thumb-on--background--warning--active);
+  --theme-switch-on--border-color: var(--theme-switch-on--border-color--warning);
+  --theme-switch-on--border-color--hover: var(--theme-switch-on--border-color--warning--hover);
+  --theme-switch-on--border-color--active: var(--theme-switch-on--border-color--warning--active);
+  --theme-switch-mixed--background: var(--theme-switch-mixed--background--warning);
+  --theme-switch-mixed--background--hover: var(--theme-switch-mixed--background--warning--hover);
+  --theme-switch-mixed--background--active: var(--theme-switch-mixed--background--warning--active);
+  --theme-switch-thumb-mixed--background: var(--theme-switch-thumb-mixed--background--warning);
+  --theme-switch-thumb-mixed--background--hover: var(--theme-switch-thumb-mixed--background--warning--hover);
+  --theme-switch-thumb-mixed--background--active: var(--theme-switch-thumb-mixed--background--warning--active);
+  --theme-switch-mixed--border-color: var(--theme-switch-mixed--border-color--warning);
+  --theme-switch-mixed--border-color--hover: var(--theme-switch-mixed--border-color--warning--hover);
+  --theme-switch-mixed--border-color--active: var(--theme-switch-mixed--border-color--warning--active);
+}
+
+:host(.ix-invalid--required:not(.disabled)) .slider {
+  --theme-switch-off--background: var(--theme-switch-off--background--invalid);
+  --theme-switch-off--background--hover: var(--theme-switch-off--background--invalid--hover);
+  --theme-switch-off--background--active: var(--theme-switch-off--background--invalid--active);
+  --theme-switch-thumb-off--background: var(--theme-switch-thumb-off--background--invalid);
+  --theme-switch-thumb-off--background--hover: var(--theme-switch-thumb-off--background--invalid--hover);
+  --theme-switch-thumb-off--background--active: var(--theme-switch-thumb-off--background--invalid--active);
+  --theme-switch-off--border-color: var(--theme-switch-off--border-color--invalid);
+  --theme-switch-off--border-color--hover: var(--theme-switch-off--border-color--invalid--hover);
+  --theme-switch-off--border-color--active: var(--theme-switch-off--border-color--invalid--active);
+  --theme-switch-on--background: var(--theme-switch-on--background--invalid);
+  --theme-switch-on--background--hover: var(--theme-switch-on--background--invalid--hover);
+  --theme-switch-on--background--active: var(--theme-switch-on--background--invalid--active);
+  --theme-switch-thumb-on--background: var(--theme-switch-thumb-on--background--invalid);
+  --theme-switch-thumb-on--background--hover: var(--theme-switch-thumb-on--background--invalid--hover);
+  --theme-switch-thumb-on--background--active: var(--theme-switch-thumb-on--background--invalid--active);
+  --theme-switch-on--border-color: var(--theme-switch-on--border-color--invalid);
+  --theme-switch-on--border-color--hover: var(--theme-switch-on--border-color--invalid--hover);
+  --theme-switch-on--border-color--active: var(--theme-switch-on--border-color--invalid--active);
+  --theme-switch-mixed--background: var(--theme-switch-mixed--background--invalid);
+  --theme-switch-mixed--background--hover: var(--theme-switch-mixed--background--invalid--hover);
+  --theme-switch-mixed--background--active: var(--theme-switch-mixed--background--invalid--active);
+  --theme-switch-thumb-mixed--background: var(--theme-switch-thumb-mixed--background--invalid);
+  --theme-switch-thumb-mixed--background--hover: var(--theme-switch-thumb-mixed--background--invalid--hover);
+  --theme-switch-thumb-mixed--background--active: var(--theme-switch-thumb-mixed--background--invalid--active);
+  --theme-switch-mixed--border-color: var(--theme-switch-mixed--border-color--invalid);
+  --theme-switch-mixed--border-color--hover: var(--theme-switch-mixed--border-color--invalid--hover);
+  --theme-switch-mixed--border-color--active: var(--theme-switch-mixed--border-color--invalid--active);
+}
+
+:host(.ix-invalid:not(.disabled)) .slider {
+  --theme-switch-off--background: var(--theme-switch-off--background--invalid);
+  --theme-switch-off--background--hover: var(--theme-switch-off--background--invalid--hover);
+  --theme-switch-off--background--active: var(--theme-switch-off--background--invalid--active);
+  --theme-switch-thumb-off--background: var(--theme-switch-thumb-off--background--invalid);
+  --theme-switch-thumb-off--background--hover: var(--theme-switch-thumb-off--background--invalid--hover);
+  --theme-switch-thumb-off--background--active: var(--theme-switch-thumb-off--background--invalid--active);
+  --theme-switch-off--border-color: var(--theme-switch-off--border-color--invalid);
+  --theme-switch-off--border-color--hover: var(--theme-switch-off--border-color--invalid--hover);
+  --theme-switch-off--border-color--active: var(--theme-switch-off--border-color--invalid--active);
+  --theme-switch-on--background: var(--theme-switch-on--background--invalid);
+  --theme-switch-on--background--hover: var(--theme-switch-on--background--invalid--hover);
+  --theme-switch-on--background--active: var(--theme-switch-on--background--invalid--active);
+  --theme-switch-thumb-on--background: var(--theme-switch-thumb-on--background--invalid);
+  --theme-switch-thumb-on--background--hover: var(--theme-switch-thumb-on--background--invalid--hover);
+  --theme-switch-thumb-on--background--active: var(--theme-switch-thumb-on--background--invalid--active);
+  --theme-switch-on--border-color: var(--theme-switch-on--border-color--invalid);
+  --theme-switch-on--border-color--hover: var(--theme-switch-on--border-color--invalid--hover);
+  --theme-switch-on--border-color--active: var(--theme-switch-on--border-color--invalid--active);
+  --theme-switch-mixed--background: var(--theme-switch-mixed--background--invalid);
+  --theme-switch-mixed--background--hover: var(--theme-switch-mixed--background--invalid--hover);
+  --theme-switch-mixed--background--active: var(--theme-switch-mixed--background--invalid--active);
+  --theme-switch-thumb-mixed--background: var(--theme-switch-thumb-mixed--background--invalid);
+  --theme-switch-thumb-mixed--background--hover: var(--theme-switch-thumb-mixed--background--invalid--hover);
+  --theme-switch-thumb-mixed--background--active: var(--theme-switch-thumb-mixed--background--invalid--active);
+  --theme-switch-mixed--border-color: var(--theme-switch-mixed--border-color--invalid);
+  --theme-switch-mixed--border-color--hover: var(--theme-switch-mixed--border-color--invalid--hover);
+  --theme-switch-mixed--border-color--active: var(--theme-switch-mixed--border-color--invalid--active);
 }