@siemens/ix 2.5.0 → 2.6.0

package/dist/collection/components/category-filter/category-filter.css

@@ -1169,6 +1169,14 @@ input:read-only, input.readonly {
 /* 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
  *
@@ -1202,7 +1210,9 @@ input {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -moz-appearance: textfield;
+  -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);
@@ -1228,11 +1238,60 @@ input::-moz-placeholder {
 input::placeholder {
   color: var(--theme-input-hint--color);
 }
-input.hover, input:hover {
+input.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), input:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-input.focus, input:focus {
+input.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), input:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+input.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), input:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  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.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), input:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
   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;
@@ -1242,6 +1301,7 @@ input:-moz-read-only {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 input.read-only, input:read-only {
@@ -1249,6 +1309,7 @@ input.read-only, input:read-only {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 input.read-only::-moz-placeholder, input:read-only::-moz-placeholder {
@@ -1260,18 +1321,19 @@ input:-moz-read-only::placeholder {
 input.read-only::placeholder, input:read-only::placeholder {
   color: transparent;
 }
-input:disabled {
+input:disabled, input.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-input:disabled::-moz-placeholder {
+input:disabled::-moz-placeholder, input.disabled::-moz-placeholder {
   color: transparent;
 }
-input:disabled::placeholder {
+input:disabled::placeholder, input.disabled::placeholder {
   color: transparent;
 }
 
@@ -1285,7 +1347,6 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 textarea {
-  height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
 textarea {
@@ -1304,7 +1365,9 @@ textarea {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -moz-appearance: textfield;
+  -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);
@@ -1330,11 +1393,60 @@ textarea::-moz-placeholder {
 textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
-textarea.hover, textarea:hover {
+textarea.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), textarea:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-textarea.focus, textarea:focus {
+textarea.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), textarea:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+textarea.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), textarea:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  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.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), textarea:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
   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;
@@ -1344,6 +1456,7 @@ textarea:-moz-read-only {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 textarea.read-only, textarea:read-only {
@@ -1351,6 +1464,7 @@ textarea.read-only, textarea:read-only {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 textarea.read-only::-moz-placeholder, textarea:read-only::-moz-placeholder {
@@ -1362,18 +1476,19 @@ textarea:-moz-read-only::placeholder {
 textarea.read-only::placeholder, textarea:read-only::placeholder {
   color: transparent;
 }
-textarea:disabled {
+textarea:disabled, textarea.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-textarea:disabled::-moz-placeholder {
+textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
   color: transparent;
 }
-textarea:disabled::placeholder {
+textarea:disabled::placeholder, textarea.disabled::placeholder {
   color: transparent;
 }
 
@@ -1434,6 +1549,46 @@ 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) !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 */
@@ -1478,10 +1633,6 @@ form:not(.was-validated) .valid-feedback {
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
-:host :host(:focus-visible:not(.disabled):not(:disabled)) {
-  border-color: var(--theme-color-primary);
-  box-shadow: 0 0 0.25rem 0 var(--theme-color-primary) !important;
-}
 :host .reset-button {
   position: absolute;
   top: 0.25rem;
@@ -1512,7 +1663,9 @@ form:not(.was-validated) .valid-feedback {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -moz-appearance: textfield;
+  -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);
@@ -1538,29 +1691,88 @@ form:not(.was-validated) .valid-feedback {
 :host .input-container:not(.readonly):not(.disabled)::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container:not(.readonly):not(.disabled).hover, :host .input-container:not(.readonly):not(.disabled):hover {
+:host .input-container:not(.readonly):not(.disabled).hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container:not(.readonly):not(.disabled):hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container:not(.readonly):not(.disabled).hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container:not(.readonly):not(.disabled):hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container:not(.readonly):not(.disabled).focus, :host .input-container:not(.readonly):not(.disabled):focus {
+:host .input-container:not(.readonly):not(.disabled).focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container:not(.readonly):not(.disabled):focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
   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;
 }
-:host .input-container:not(.readonly):not(.disabled):disabled {
+:host .input-container:not(.readonly):not(.disabled).focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container:not(.readonly):not(.disabled):focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  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;
+}
+:host .input-container:not(.readonly):not(.disabled):disabled, :host .input-container:not(.readonly):not(.disabled).disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder {
+:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder, :host .input-container:not(.readonly):not(.disabled).disabled::-moz-placeholder {
   color: transparent;
 }
-:host .input-container:not(.readonly):not(.disabled):disabled::placeholder {
+:host .input-container:not(.readonly):not(.disabled):disabled::placeholder, :host .input-container:not(.readonly):not(.disabled).disabled::placeholder {
   color: transparent;
 }
+:host .input-container:not(.readonly):not(.disabled):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container:not(.readonly):not(.disabled).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;
+}
 :host .input-container.disabled {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
@@ -1581,7 +1793,9 @@ form:not(.was-validated) .valid-feedback {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -moz-appearance: textfield;
+  -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);
@@ -1607,11 +1821,60 @@ form:not(.was-validated) .valid-feedback {
 :host .input-container.readonly::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container.readonly.hover, :host .input-container.readonly:hover {
+:host .input-container.readonly.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container.readonly:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container.readonly.focus, :host .input-container.readonly:focus {
+:host .input-container.readonly.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container.readonly:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container.readonly.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container.readonly:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  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;
+}
+:host .input-container.readonly.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container.readonly:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
   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;
@@ -1621,6 +1884,7 @@ form:not(.was-validated) .valid-feedback {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 :host .input-container.readonly.read-only, :host .input-container.readonly:read-only {
@@ -1628,6 +1892,7 @@ form:not(.was-validated) .valid-feedback {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 :host .input-container.readonly.read-only::-moz-placeholder, :host .input-container.readonly:read-only::-moz-placeholder {
@@ -1639,18 +1904,19 @@ form:not(.was-validated) .valid-feedback {
 :host .input-container.readonly.read-only::placeholder, :host .input-container.readonly:read-only::placeholder {
   color: transparent;
 }
-:host .input-container.readonly:disabled {
+:host .input-container.readonly:disabled, :host .input-container.readonly.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-:host .input-container.readonly:disabled::-moz-placeholder {
+:host .input-container.readonly:disabled::-moz-placeholder, :host .input-container.readonly.disabled::-moz-placeholder {
   color: transparent;
 }
-:host .input-container.readonly:disabled::placeholder {
+:host .input-container.readonly:disabled::placeholder, :host .input-container.readonly.disabled::placeholder {
   color: transparent;
 }
 :host .input-container.no-icon {
@@ -1678,9 +1944,9 @@ form:not(.was-validated) .valid-feedback {
   flex-grow: 1;
   box-shadow: none;
 }
-:host .text-input, :host .text-input:hover, :host .text-input:focus-visible {
-  border: none;
-  outline: none;
+:host .text-input, :host .text-input:hover, :host .text-input:focus :host .text-input:focus-visible {
+  border: none !important;
+  outline: none !important;
 }
 :host .text-input.hide-placeholder::-moz-placeholder {
   opacity: 0;
@@ -1691,9 +1957,7 @@ form:not(.was-validated) .valid-feedback {
 :host .list-unstyled {
   display: flex;
   flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: 0;
+  height: 100%;
   overflow-y: auto;
 }
 :host ix-icon {
@@ -1717,7 +1981,7 @@ form:not(.was-validated) .valid-feedback {
 :host ul {
   height: 100%;
 }
-:host ul > li,
+:host .list-unstyled > span:not(.category-preview),
 :host input {
   padding-inline-start: 0;
   padding-top: 2px;