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

package/hydrate/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@siemens/ix/hydrate",
+  "description": "SiemensIx component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts"
+}

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "0.0.0-20240522073858",
+  "version": "0.0.0-pr-1318-20240627080522",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -24,11 +24,12 @@
     "components/",
     "dist/",
     "loader/",
-    "scss/"
+    "scss/",
+    "hydrate/"
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
-    "@stencil/core": "^4.13.0",
+    "@stencil/core": "~4.17.0",
     "@types/luxon": "^3.3.7",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",
@@ -40,9 +41,9 @@
     "@stencil-community/eslint-plugin": "^0.7.1",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "^0.8.3",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.8",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "0.8.8",
     "@testing-library/dom": "^8.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/animejs": "^3.1.4",

package/scss/components/form/_input.scss

@@ -8,6 +8,7 @@
  */
 @import 'common-variables';
 @import 'mixins/fonts';
+@import 'mixins/validation/form-component';
 
 @mixin element-input($feature-read-only: true) {
   & {
@@ -17,6 +18,7 @@
     padding: 0.25rem 0.5rem;
     background-color: var(--theme-input--background);
     color: var(--theme-input--color);
+    appearance: textfield;
     text-overflow: ellipsis;
     border: var(--theme-input--border-thickness, 1px) solid
       var(--theme-input--border-color);
@@ -38,14 +40,14 @@
     color: var(--theme-input-hint--color);
   }
 
-  &.hover,
-  &:hover {
+  &:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,
+  &: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);
   }
 
-  &.focus,
-  &:focus {
+  &:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,
+  &: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;
@@ -87,7 +89,6 @@
 }
 
 @mixin element-textarea {
-  height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
 
@@ -176,6 +177,56 @@
       display: none !important;
     }
   }
+
+  @include input-valid {
+  }
+
+  @include input-info {
+    & {
+      border-color: var(--theme-input--border-color--info);
+    }
+
+    &:hover {
+      border-color: var(--theme-input--border-color--info--hover) !important;
+    }
+
+    &:active {
+      border-color: var(--theme-input--border-color--info--active) !important;
+    }
+  }
+
+  @include input-warning {
+    & {
+      border-color: var(--theme-input--border-color--warning--active) !important;
+    }
+
+    &:hover {
+      border-color: var(--theme-input--border-color--warning--active) !important;
+    }
+
+    &:active {
+      border-color: var(--theme-input--border-color--warning--active) !important;
+    }
+  }
+
+  @include input-invalid {
+    & {
+      background-color: var(--theme-input--background--invalid);
+      border-color: var(--theme-input--border-color--invalid);
+    }
+
+    & {
+      border-color: var(--theme-input--border-color--invalid) !important;
+    }
+
+    &:hover {
+      border-color: var(--theme-input--border-color--invalid--hover) !important;
+    }
+
+    &:active {
+      border-color: var(--theme-input--border-color--invalid--active) !important;
+    }
+  }
 }
 
 @include form;

package/scss/mixins/_field.scss

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+ @mixin input-invalid {
+  background-color: var(--theme-input-error--background);
+  border-color: var(--theme-input-error--border-color);
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+  background-position: left calc(0.375em + 0.1875rem) center;
+  padding-right: 0.75rem;
+  padding-left: calc(1.5em + 0.75rem);
+  background-size: 18px;
+  background-repeat: no-repeat;
+}

package/scss/mixins/_scrollbar.scss

@@ -11,6 +11,13 @@
     display: none;
   }
 
+  @-moz-document url-prefix() {
+    * {
+      scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+      scrollbar-width: thin;
+    }
+  }
+
   /* width */
   ::-webkit-scrollbar {
     width: 0.5rem;

package/scss/mixins/validation/_form-component.scss

@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+$notSelectors: ':not(.disabled):not(:disabled):not([disabled])';
+
+@mixin host-valid {
+  :host(.ix-valid#{$notSelectors}:not(.ix-suppress-valid):not(.ix-invalid--required)) {
+    @content;
+  }
+}
+
+@mixin host-info {
+  :host(.ix-info#{$notSelectors}) {
+    @content;
+  }
+}
+
+@mixin host-warning {
+  :host(.ix-warning#{$notSelectors}) {
+    @content;
+  }
+}
+
+@mixin host-invalid {
+  :host([class*='ix-invalid']#{$notSelectors}),
+  :host(.ix-invalid--required#{$notSelectors}) {
+    @content;
+  }
+}
+
+
+@mixin input-valid {
+  textarea.ix-valid#{$notSelectors}:not(.ix-suppress-valid):not(.ix-invalid--required),
+  input.ix-valid#{$notSelectors}:not(.ix-suppress-valid):not(.ix-invalid--required) {
+    @content;
+  }
+}
+
+@mixin input-info {
+  textarea.ix-info#{$notSelectors},
+  input.ix-info#{$notSelectors} {
+    @content;
+  }
+}
+
+@mixin input-warning {
+  textarea.ix-warning#{$notSelectors},
+  input.ix-warning#{$notSelectors} {
+    @content;
+  }
+}
+
+@mixin input-invalid {
+  textarea[class*='ix-invalid']#{$notSelectors},
+  input[class*='ix-invalid']#{$notSelectors} {
+    @content;
+  }
+}

package/scss/theme/classic-dark/_border.scss

@@ -1,5 +1,5 @@
 /*
- * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.
  */
 :root {
   .theme-classic-dark {

package/scss/theme/classic-dark/_borderRadius.scss

@@ -1,5 +1,5 @@
 /*
- * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.
  */
 :root {
   .theme-classic-dark {

package/scss/theme/classic-dark/_borderWidth.scss

@@ -1,5 +1,5 @@
 /*
- * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.
  */
 :root {
   .theme-classic-dark {

package/scss/theme/classic-dark/_boxShadow.scss

@@ -1,5 +1,5 @@
 /*
- * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.
  */
 :root {
   .theme-classic-dark {