ids-enterprise-wc 1.0.0-beta.16 → 1.0.0-beta.18

package/components/ids-input/ids-input.css

@@ -63,11 +63,11 @@
 }
 
 .ids-textarea .icon-dirty {
-  top: 0;
+  top: 1px;
   margin-inline-start: 1px;
 }
 .ids-textarea .icon-dirty[dir=rtl] {
-  top: 1px;
+  top: 2px;
 }
 
 .label-state-hidden .ids-label-text.empty::before {
@@ -181,6 +181,7 @@
 }
 
 :host([label-wrap=ellipsis]) .ids-label-text {
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -196,6 +197,7 @@
 }
 
 :host([label-wrap=ellipsis-no-stretch]) .ids-label-text {
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -256,19 +258,20 @@
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
 .ids-input .field-container {
-  transition: border var(--ids-motion-duration) var(--ids-motion-ease);
-  margin: var(--ids-space-none);
-  padding: var(--ids-space-none);
-  position: relative;
   border: 1px solid;
-  align-items: center;
   border-collapse: separate;
   border-radius: 2px;
+  box-sizing: border-box;
   color: inherit;
   display: flex;
+  align-items: center;
+  margin: var(--ids-space-none);
+  max-width: var(--ids-input-width-full);
+  padding: var(--ids-space-none);
+  position: relative;
   resize: none;
   text-align: left;
-  max-width: var(--ids-input-width-full);
+  transition: border var(--ids-motion-duration) var(--ids-motion-ease);
 }
 .ids-input:focus-within .ids-input-field, .ids-input.readonly:focus-within .ids-input-field, .ids-input.is-active .ids-input-field {
   outline: none;
@@ -303,6 +306,7 @@
   height: fit-content;
   resize: none;
   text-align: left;
+  text-overflow: ellipsis;
 }
 .ids-input .ids-input-field:focus-visible {
   outline: none;
@@ -376,6 +380,10 @@
 .ids-input.field-height-xs {
   margin-block-end: var(--ids-font-size-20);
 }
+.ids-input.field-height-xs .icon-dirty {
+  left: -1px;
+  top: -1px;
+}
 .ids-input.field-height-xs .ids-label-text {
   font-size: var(--ids-input-label-font-size);
 }
@@ -406,6 +414,10 @@
 .ids-input.compact {
   margin-block-end: var(--ids-font-size-20);
 }
+.ids-input.compact .icon-dirty {
+  left: -1px;
+  top: -1px;
+}
 .ids-input.compact .ids-label-text {
   font-size: var(--ids-input-label-font-size);
 }
@@ -466,10 +478,16 @@
   font-size: var(--ids-data-grid-font-size-sm);
   padding-inline: var(--ids-space-20);
 }
+.ids-input.color-variant-borderless.ids-input.field-height-xs slot[name=trigger-end] {
+  padding-inline-end: 0;
+}
 .ids-input.color-variant-borderless.ids-input.field-height-xxs .ids-input-field {
   font-size: var(--ids-data-grid-font-size-sm);
   padding-inline: var(--ids-space-10);
 }
+.ids-input.color-variant-borderless.ids-input.field-height-xxs slot[name=trigger-end] {
+  padding-inline-end: 0;
+}
 .ids-input.color-variant-in-cell {
   margin: 1px;
 }
@@ -754,15 +772,21 @@
   color: var(--ids-input-color-text-success-disabled);
 }
 .ids-input.color-variant-alternate .field-container {
-  border-color: transparent;
+  border-color: var(--ids-input-header-color-border);
   color: var(--ids-input-header-color-text-default);
   background-color: var(--ids-input-header-color-background);
   border-bottom: 1px solid var(--ids-input-header-color-border);
   box-shadow: none;
 }
+.ids-input.color-variant-alternate .ids-input-field {
+  color: var(--ids-input-header-color-text-default);
+}
 .ids-input.color-variant-alternate .ids-input-field::placeholder {
   color: var(--ids-input-header-color-text-placeholder);
 }
+.ids-input.color-variant-alternate.readonly-background .ids-input-field::placeholder {
+  color: var(--ids-input-header-color-text-placeholder);
+}
 .ids-input.color-variant-alternate-formatter .field-container {
   background-color: var(--ids-data-grid-filter-input-color-background);
   border-color: var(--ids-data-grid-filter-input-color-border-default);
@@ -789,7 +813,7 @@
 .ids-input.color-variant-alternate-formatter .ids-input-field::placeholder {
   color: var(--ids-data-grid-filter-input-color-text-placeholder);
 }
-.ids-input.color-variant-alternate .field-container, .ids-input.color-variant-app-menu .field-container {
+.ids-input.color-variant-app-menu .field-container {
   color: var(--ids-input-color-text-default);
 }
 .ids-input.color-variant-list-builder .field-container {
@@ -816,6 +840,9 @@
 .ids-input.color-variant-module-nav .ids-input-field:active {
   color: var(--ids-module-nav-search-input-text-color);
 }
+.ids-input.color-variant-module-nav.has-clearable .btn-clear {
+  margin-inline-end: 5px;
+}
 .ids-input.color-variant-module-nav:hover .field-container {
   background-color: var(--ids-module-nav-item-hover-bg-color);
 }