@siemens/ix 4.0.0 → 4.1.0

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

@@ -1157,10 +1157,10 @@ button.dropdown-toggle::after {
 :host .reset-button.hide-reset-button {
   display: none;
 }
-:host .input-container:not(.readonly):not(.disabled) {
+:host .input-container:not(.readonly):not(.no-icon) {
   min-height: 2rem;
   width: auto;
-  padding: 0.25rem 0.5rem;
+  padding: 1px 1.5rem 1px 1.75rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
   -webkit-appearance: textfield;
@@ -1181,40 +1181,40 @@ button.dropdown-toggle::after {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
 }
-:host .input-container:not(.readonly):not(.disabled)[type=number] {
+:host .input-container:not(.readonly):not(.no-icon)[type=number] {
   text-align: right;
 }
-:host .input-container:not(.readonly):not(.disabled)[type=number]::-webkit-inner-spin-button {
+:host .input-container:not(.readonly):not(.no-icon)[type=number]::-webkit-inner-spin-button {
   margin-right: -2px;
   margin-left: 2px;
   display: none;
 }
-:host .input-container:not(.readonly):not(.disabled):-webkit-autofill {
+:host .input-container:not(.readonly):not(.no-icon):-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
   -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
   background-color: var(--theme-input--background--autofill) !important;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
   color: var(--theme-input--color--autofill) !important;
 }
-:host .input-container:not(.readonly):not(.disabled):-webkit-autofill, :host .input-container:not(.readonly):not(.disabled):autofill {
+:host .input-container:not(.readonly):not(.no-icon):-webkit-autofill, :host .input-container:not(.readonly):not(.no-icon):autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
   -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
   background-color: var(--theme-input--background--autofill) !important;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
   color: var(--theme-input--color--autofill) !important;
 }
-:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder {
+:host .input-container:not(.readonly):not(.no-icon)::-moz-placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container:not(.readonly):not(.disabled)::placeholder {
+:host .input-container:not(.readonly):not(.no-icon)::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container:not(.readonly):not(.disabled).hover:not(.readonly,
+:host .input-container:not(.readonly):not(.no-icon).hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:-moz-read-only), :host .input-container:not(.readonly):not(.disabled):hover:not(.readonly,
+:-moz-read-only), :host .input-container:not(.readonly):not(.no-icon):hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1223,12 +1223,12 @@ button.dropdown-toggle::after {
   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,
+:host .input-container:not(.readonly):not(.no-icon).hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:read-only), :host .input-container:not(.readonly):not(.disabled):hover:not(.readonly,
+:read-only), :host .input-container:not(.readonly):not(.no-icon):hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1237,12 +1237,12 @@ button.dropdown-toggle::after {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container:not(.readonly):not(.disabled).focus:not(.readonly,
+:host .input-container:not(.readonly):not(.no-icon).focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:-moz-read-only), :host .input-container:not(.readonly):not(.disabled):focus:not(.readonly,
+:-moz-read-only), :host .input-container:not(.readonly):not(.no-icon):focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1252,12 +1252,12 @@ button.dropdown-toggle::after {
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
 }
-:host .input-container:not(.readonly):not(.disabled).focus:not(.readonly,
+:host .input-container:not(.readonly):not(.no-icon).focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:read-only), :host .input-container:not(.readonly):not(.disabled):focus:not(.readonly,
+:read-only), :host .input-container:not(.readonly):not(.no-icon):focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1267,7 +1267,7 @@ button.dropdown-toggle::after {
   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 {
+:host .input-container:not(.readonly):not(.no-icon):disabled, :host .input-container:not(.readonly):not(.no-icon).disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1276,29 +1276,141 @@ button.dropdown-toggle::after {
   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(.no-icon):disabled::-moz-placeholder, :host .input-container:not(.readonly):not(.no-icon).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(.no-icon):disabled::placeholder, :host .input-container:not(.readonly):not(.no-icon).disabled::placeholder {
   color: transparent;
 }
-:host .input-container:not(.readonly):not(.disabled):hover {
+:host .input-container:not(.readonly).no-icon {
+  min-height: 2rem;
+  width: auto;
+  padding: 1px 1.5rem 1px 0.25rem;
+  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);
+  box-shadow: var(--theme-input--box-shadow);
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+}
+:host .input-container:not(.readonly).no-icon[type=number] {
+  text-align: right;
+}
+:host .input-container:not(.readonly).no-icon[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+:host .input-container:not(.readonly).no-icon:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container:not(.readonly).no-icon:-webkit-autofill, :host .input-container:not(.readonly).no-icon:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container:not(.readonly).no-icon::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container:not(.readonly).no-icon::placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container:not(.readonly).no-icon.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container:not(.readonly).no-icon: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).focus {
+:host .input-container:not(.readonly).no-icon.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container:not(.readonly).no-icon: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).no-icon.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container:not(.readonly).no-icon: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.disabled {
+:host .input-container:not(.readonly).no-icon.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container:not(.readonly).no-icon: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).no-icon:disabled, :host .input-container:not(.readonly).no-icon.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 {
+:host .input-container:not(.readonly).no-icon:disabled::-moz-placeholder, :host .input-container:not(.readonly).no-icon.disabled::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container:not(.readonly).no-icon:disabled::placeholder, :host .input-container:not(.readonly).no-icon.disabled::placeholder {
+  color: transparent;
+}
+:host .input-container.readonly:not(.no-icon) {
   min-height: 2rem;
   width: auto;
-  padding: 0.25rem 0.5rem;
+  padding: 1px 1.5rem 1px 1.75rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
   -webkit-appearance: textfield;
@@ -1319,40 +1431,40 @@ button.dropdown-toggle::after {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
 }
-:host .input-container.readonly[type=number] {
+:host .input-container.readonly:not(.no-icon)[type=number] {
   text-align: right;
 }
-:host .input-container.readonly[type=number]::-webkit-inner-spin-button {
+:host .input-container.readonly:not(.no-icon)[type=number]::-webkit-inner-spin-button {
   margin-right: -2px;
   margin-left: 2px;
   display: none;
 }
-:host .input-container.readonly:-webkit-autofill {
+:host .input-container.readonly:not(.no-icon):-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
   -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
   background-color: var(--theme-input--background--autofill) !important;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
   color: var(--theme-input--color--autofill) !important;
 }
-:host .input-container.readonly:-webkit-autofill, :host .input-container.readonly:autofill {
+:host .input-container.readonly:not(.no-icon):-webkit-autofill, :host .input-container.readonly:not(.no-icon):autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
   -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
   background-color: var(--theme-input--background--autofill) !important;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
   color: var(--theme-input--color--autofill) !important;
 }
-:host .input-container.readonly::-moz-placeholder {
+:host .input-container.readonly:not(.no-icon)::-moz-placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container.readonly::placeholder {
+:host .input-container.readonly:not(.no-icon)::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container.readonly.hover:not(.readonly,
+:host .input-container.readonly:not(.no-icon).hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:-moz-read-only), :host .input-container.readonly:hover:not(.readonly,
+:-moz-read-only), :host .input-container.readonly:not(.no-icon):hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1361,12 +1473,12 @@ button.dropdown-toggle::after {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container.readonly.hover:not(.readonly,
+:host .input-container.readonly:not(.no-icon).hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:read-only), :host .input-container.readonly:hover:not(.readonly,
+:read-only), :host .input-container.readonly:not(.no-icon):hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1375,12 +1487,12 @@ button.dropdown-toggle::after {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container.readonly.focus:not(.readonly,
+:host .input-container.readonly:not(.no-icon).focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:-moz-read-only), :host .input-container.readonly:focus:not(.readonly,
+:-moz-read-only), :host .input-container.readonly:not(.no-icon):focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1390,12 +1502,12 @@ button.dropdown-toggle::after {
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
 }
-:host .input-container.readonly.focus:not(.readonly,
+:host .input-container.readonly:not(.no-icon).focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:read-only), :host .input-container.readonly:focus:not(.readonly,
+:read-only), :host .input-container.readonly:not(.no-icon):focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1405,7 +1517,7 @@ button.dropdown-toggle::after {
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
 }
-:host .input-container.readonly:-moz-read-only {
+:host .input-container.readonly:not(.no-icon):-moz-read-only {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1413,7 +1525,7 @@ button.dropdown-toggle::after {
   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 {
+:host .input-container.readonly:not(.no-icon).read-only, :host .input-container.readonly:not(.no-icon):read-only {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1421,16 +1533,16 @@ button.dropdown-toggle::after {
   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 {
+:host .input-container.readonly:not(.no-icon).read-only::-moz-placeholder, :host .input-container.readonly:not(.no-icon):read-only::-moz-placeholder {
   color: transparent;
 }
-:host .input-container.readonly:-moz-read-only::placeholder {
+:host .input-container.readonly:not(.no-icon):-moz-read-only::placeholder {
   color: transparent;
 }
-:host .input-container.readonly.read-only::placeholder, :host .input-container.readonly:read-only::placeholder {
+:host .input-container.readonly:not(.no-icon).read-only::placeholder, :host .input-container.readonly:not(.no-icon):read-only::placeholder {
   color: transparent;
 }
-:host .input-container.readonly:disabled, :host .input-container.readonly.disabled {
+:host .input-container.readonly:not(.no-icon):disabled, :host .input-container.readonly:not(.no-icon).disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1439,20 +1551,179 @@ button.dropdown-toggle::after {
   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:not(.no-icon):disabled::-moz-placeholder, :host .input-container.readonly:not(.no-icon).disabled::-moz-placeholder {
   color: transparent;
 }
-:host .input-container.readonly:disabled::placeholder, :host .input-container.readonly.disabled::placeholder {
+:host .input-container.readonly:not(.no-icon):disabled::placeholder, :host .input-container.readonly:not(.no-icon).disabled::placeholder {
   color: transparent;
 }
+:host .input-container.readonly.no-icon {
+  min-height: 2rem;
+  width: auto;
+  padding: 1px 1.5rem 1px 0.25rem;
+  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);
+  box-shadow: var(--theme-input--box-shadow);
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+}
+:host .input-container.readonly.no-icon[type=number] {
+  text-align: right;
+}
+:host .input-container.readonly.no-icon[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+:host .input-container.readonly.no-icon:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container.readonly.no-icon:-webkit-autofill, :host .input-container.readonly.no-icon:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container.readonly.no-icon::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container.readonly.no-icon::placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container.readonly.no-icon.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container.readonly.no-icon: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.no-icon.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container.readonly.no-icon: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.no-icon.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container.readonly.no-icon: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.no-icon.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container.readonly.no-icon: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.readonly.no-icon:-moz-read-only {
+  box-shadow: none;
+  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.no-icon.read-only, :host .input-container.readonly.no-icon:read-only {
+  box-shadow: none;
+  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.no-icon.read-only::-moz-placeholder, :host .input-container.readonly.no-icon:read-only::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.no-icon:-moz-read-only::placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.no-icon.read-only::placeholder, :host .input-container.readonly.no-icon:read-only::placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.no-icon:disabled, :host .input-container.readonly.no-icon.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.no-icon:disabled::-moz-placeholder, :host .input-container.readonly.no-icon.disabled::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.no-icon:disabled::placeholder, :host .input-container.readonly.no-icon.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);
+}
 :host .input-container {
   display: flex;
   height: auto;
   max-height: 3.75rem;
-  padding: 1px 1.5rem 1px 1.75rem !important;
-}
-:host .input-container.no-icon {
-  padding-left: 0.25rem;
 }
 :host .token-container {
   flex-grow: 1;

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

@@ -133,7 +133,7 @@ export class CategoryFilter {
         }
     }
     handleFormElementKeyDown(e) {
-        var _a;
+        var _a, _b, _c;
         switch (e.code) {
             case 'Enter':
             case 'NumpadEnter':
@@ -147,6 +147,7 @@ export class CategoryFilter {
                 if (this.hasCategorySelection()) {
                     if (this.category !== '') {
                         this.addToken(token, this.category);
+                        (_c = (_b = this.textInput) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
                     }
                     else if (document.activeElement.classList.contains('category-item-id')) {
                         this.selectCategory(token);
@@ -244,7 +245,7 @@ export class CategoryFilter {
         this.filterChanged.emit(filterState);
     }
     addToken(token, category = this.ID_CUSTOM_FILTER_VALUE, operator = this.categoryLogicalOperator, emitEvent = true) {
-        var _a, _b, _c;
+        var _a;
         if (token === undefined || token === null) {
             return;
         }
@@ -266,7 +267,6 @@ export class CategoryFilter {
             this.category = '';
         }
         this.isScrollStateDirty = true;
-        (_c = (_b = this.textInput) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
         if (emitEvent) {
             this.emitFilterEvent();
         }
@@ -369,7 +369,11 @@ export class CategoryFilter {
         return this.categories !== undefined;
     }
     renderPlainSuggestions() {
-        return (h("div", { class: "dropdown-item-container" }, this.getFilteredSuggestions().map((suggestion) => (h("button", { class: "dropdown-item", "data-id": suggestion, onClick: () => this.addToken(suggestion), key: suggestion, title: suggestion }, suggestion)))));
+        return (h("div", { class: "dropdown-item-container" }, this.getFilteredSuggestions().map((suggestion) => (h("button", { class: "dropdown-item", "data-id": suggestion, onClick: () => {
+                var _a, _b;
+                this.addToken(suggestion);
+                (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }, key: suggestion, title: suggestion }, suggestion)))));
     }
     renderOperatorButton() {
         if (this.staticOperator) {
@@ -415,8 +419,10 @@ export class CategoryFilter {
         }
         return (h("div", { class: "dropdown-item-container" }, this.renderOperatorButton(), h("div", { class: "dropdown-header" }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label), (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 :
             _b.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("button", { class: "dropdown-item category-item-value", "data-id": id, title: id, key: id, onClick: (e) => {
+                    var _a, _b;
                     e.preventDefault();
                     this.addToken(id, this.category);
+                    (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
                 } }, `${this.getFilterOperatorString()} ${id}`)))));
     }
     renderDropdownContent() {
@@ -497,19 +503,19 @@ export class CategoryFilter {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'fe49a215180e62dfb5b88304e08d775f1d6d8151' }, h("form", { key: '075cea4e8c8f681a37e9c9916551d8835878e9a9', ref: (el) => (this.formElement = el) }, h("div", { key: 'efa00f0c5eb73bdcdd96f3f2b314b1db7580a227', "read-only": this.readonly, class: {
+        return (h(Host, { key: '6040e5611b073b5df60b2f021a1fd6521a6de1df' }, h("form", { key: '4baf23174e46355ca7fbd5ecad14145cabaea8d5', ref: (el) => (this.formElement = el) }, h("div", { key: 'adecb78f948b498e0a9f42355ab590e2966958d1', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: 'a889dd34ab269b07c49701d381fa997cf66dcc7d', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: '9f7bbd1f655d3e3d92b0f97a7a50c837d721f3ef', class: "token-container" }, h("div", { key: 'e130e26ad631aeef22c31c858f4687d40f2272ec', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '4430f91076d6d7d04e1b9beea3a62877835b527f', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: 'aeaef4cf293c3b6c8baca478ec788ce33ecabfb6', class: "token-container" }, h("div", { key: 'd599d0c8173bef92c64ad71cff0e89dabc7fde99', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: '10c2f91e57a8ef18bd9dbc53c227a15544d4de28', class: {
+            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: '43eac9a872f30a34780aa702c6905348649018b5', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
             }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));