@sapudex/web-components 0.117.1 → 0.138.0

package/src/themes/TextField.css

@@ -28,11 +28,22 @@
   --udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));
   --udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));
 
-  --udex-input-padding: 9px var(--udexSpacer12, 12px);
+  --udex-input-padding: 0 var(--udexSpacer12, 12px);
   --udex-input-min-width-xs-and-s: 100%;
   --udex-input-max-width: 100%;
 }
 
+.udex-text-field__wrap {
+  display: flex;
+  position: relative;
+  border-radius: var(--udexRadiusXS, 4px);
+  border: 1px solid var(--udex-input-color-standard-default-border);
+}
+
+.udex-text-field__wrap:hover {
+  border-color: var(--udex-input-color-standard-hover-border);
+}
+
 .udex-text-field__container {
   position: relative;
   font-family: var(--sapFontFamily, sans-serif);
@@ -54,7 +65,7 @@
 
 .udex-text-field__input {
   width: 100%;
-  height: 42px;
+  height: 40px;
   font-size: var(--sapProgress_FontSize, 16px);
   font-family: inherit;
   line-height: 24px;
@@ -62,92 +73,111 @@
   padding: var(--udex-input-padding);
   border-radius: var(--udexRadiusXS, 4px);
   box-sizing: border-box;
-  border: 1px solid var(--udex-input-color-standard-default-border);
   font-weight: var(--udexTypographyFontWeightRegular, 400);
+  background: transparent;
+  border: none;
+}
+
+.udex-text-field__input:focus {
+  outline: none;
 }
 
-.udex-text-field__container:hover .udex-text-field__input {
-  border: 1px solid var(--udex-input-color-standard-hover-border);
+:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__wrap:before {
+  content:"";
+  position:absolute;
+  z-index: -1;
+  inset: -5px;
+  border: 2px solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusS, 6px);
 }
 
-.udex-text-field__input[open],
-:host([active]) .udex-text-field__input, .udex-text-field__input:focus {
-  border: 1px solid var(--udex-input-color-standard-active-border);
+
+.udex-text-field__wrap[open],
+:host([active]) .udex-text-field__wrap {
+  border-color: var(--udex-input-color-standard-active-border);
   outline: 0;
 }
 
-.udex-text-field__input[open]:hover {
+:host([active]) .udex-text-field_icon-container {
+  border-color: transparent;
+  color: var(--udexColorGrey7, #475E75);
+}
+
+.udex-text-field__wrap[open]:hover {
   border-color: var(--udex-input-color-standard-active-border);
 }
 
 /* additional #input selector to add weight */
 
-:host([disabled]) .udex-text-field__input {
-  border: 1px solid var(--udex-input-color-disabled-border);
+:host([disabled]) .udex-text-field__wrap {
+  border-color: var(--udex-input-color-disabled-border);
   background-color: var(--udex-input-color-standard-default-background-light);
 }
 
-:host([readonly]) .udex-text-field__input {
-  border: 1px solid var(--udex-input-color-read-only-default-border);
+:host([readonly]) .udex-text-field__wrap {
+  border-color: var(--udex-input-color-read-only-default-border);
   background-color: var(--udex-input-color-read-only-default-background);
 }
 
-:host([displayonly]) .udex-text-field__container .udex-text-field__input {
+:host([value-state="Success"][displayonly]) .udex-text-field__wrap,
+:host([value-state="Warning"][displayonly]) .udex-text-field__wrap,
+:host([value-state="Error"][displayonly]) .udex-text-field__wrap,
+:host([displayonly]) .udex-text-field__wrap {
   border: 0;
   background-color: transparent;
   font-family: inherit;
 }
 
-:host([displayonly]) .udex-text-field__container .udex-text-field__input[open],
-:host([displayonly]) .udex-text-field__container .udex-text-field__input:focus {
+:host([displayonly]) .udex-text-field__wrap[open],
+:host([displayonly]) .udex-text-field__wrap {
   outline: 0;
   border: 0;
 }
 
-:host([displayonly][value-state="Success"]) .udex-text-field__input:hover,
-:host([displayonly][value-state="Warning"]) .udex-text-field__input:hover,
-:host([displayonly][value-state="Error"]) .udex-text-field__input:hover {
+:host([displayonly][value-state="Success"]) .udex-text-field__wrap:hover,
+:host([displayonly][value-state="Warning"]) .udex-text-field__wrap:hover,
+:host([displayonly][value-state="Error"]) .udex-text-field__wrap:hover {
   border: none;
 }
 
-:host([value-state="Error"]) .udex-text-field__input {
+:host([value-state="Error"]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-error-default-border);
 }
 
-:host([value-state="Error"]) .udex-text-field__input:hover {
+:host([value-state="Error"]) .udex-text-field__wrap:hover {
   border: 1px solid var(--udex-input-color-error-hover-border);
 }
 
-:host([value-state="Error"]) .udex-text-field__input[open],
-:host([value-state="Error"]) .udex-text-field__input:focus {
+:host([value-state="Error"]) .udex-text-field__wrap[open],
+:host([value-state="Error"][active]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-error-active-border);
   outline: 0;
 }
 
-:host([value-state="Warning"]) .udex-text-field__input {
+:host([value-state="Warning"]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-warning-default-border);
 }
 
-:host([value-state="Warning"]) .udex-text-field__input:hover {
+:host([value-state="Warning"]) .udex-text-field__wrap:hover {
   border: 1px solid var(--udex-input-color-warning-hover-border);
 }
 
-:host([value-state="Warning"]) .udex-text-field__input[open],
-:host([value-state="Warning"]) .udex-text-field__input:focus {
+:host([value-state="Warning"]) .udex-text-field__wrap[open],
+:host([value-state="Warning"][active]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-warning-active-border);
   outline: 0;
 }
 
-:host([value-state="Success"]) .udex-text-field__input {
+:host([value-state="Success"]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-success-default-border);
 }
 
-:host([value-state="Success"]) .udex-text-field__input:hover {
+:host([value-state="Success"]) .udex-text-field__wrap:hover {
   border: 1px solid var(--udex-input-color-success-hover-border);
 }
 
-:host([value-state="Success"]) .udex-text-field__input[open],
-:host([value-state="Success"]) .udex-text-field__input:focus {
+:host([value-state="Success"]) .udex-text-field__wrap[open],
+:host([value-state="Success"][active]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-success-active-border);
   outline: 0;
 }
@@ -161,6 +191,10 @@
   transition: transform 150ms ease-out, font-size 150ms ease-out;
   line-height: 24px;
   font-weight: var(--udexTypographyFontWeightRegular, 400);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - var(--udexSpacer12) * 2);
 }
 
 .udex-text-field__container:dir(rtl) .udex-text-field_icon-container {
@@ -189,7 +223,7 @@
 .udex-text-field__label.udex-text-field__label_active {
   line-height: 18px;
   transform: translateY(-110%);
-  padding: 0 4px;
+  padding: 6px 4px 0;
   font-size: 12px;
   background: linear-gradient(transparent 55%, var(--udex-input-color-standard-default-background-light) 45%);
 }
@@ -214,37 +248,38 @@
   --sapButton_BorderWidth: 0 0 0 1px;
   --udex-control-button-large-height: 40px;
   --udex-control-button-large-width: 40px;
+  position: relative;
+  padding: var(--udexSpacer4, 4px);
 }
 
-.udex-text-field_icon-container {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  right: 1px;
-  top: 1px;
-}
-
-:host(:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
+:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container {
   --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
+  --sapButton_BorderWidth: 0 1px 0 0;
 }
 
-:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
-  --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
+:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container {
   --sapButton_BorderWidth: 0 1px 0 0;
 }
 
-:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container .udex-text-field_icon-container {
-  --sapButton_BorderWidth: 0 1px 0 0;
+:host([active]) [active].udex-text-field_icon-container,
+:host([active]) [active].udex-text-field_icon-container,
+:host([active]) [active].udex-text-field_icon-container {
+  border-color: transparent;
+  color: var(--udexColorGrey7, #475E75);
 }
 
-:host([value-state="Success"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container ,
-:host([value-state="Error"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container ,
-:host([value-state="Warning"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
-  --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
-  --udex-control-button-success-border-color: var(--udexColorGrey4, #A9B4BE);
-  --udex-control-button-error-border-color: var(--udexColorGrey4, #A9B4BE);
-  --udex-control-button-warning-border-color: var(--udexColorGrey4, #A9B4BE);
+:host [active].udex-text-field_icon-container,
+:host [active].udex-text-field_icon-container,
+:host [active].udex-text-field_icon-container {
+  border-color: var(--udexColorBlue4, #89D1FF);
+  color: var(--udexColorBlue9, #0040B0);
+}
+
+:host([active]) .udex-text-field_icon-container:hover,
+:host([active]) .udex-text-field_icon-container:hover,
+:host([active]) .udex-text-field_icon-container:hover {
+  border-color: var(--udexColorGrey7, #475E75);
+  color: var(--udexColorGrey7, #475E75);
 }
 
 /* Supporting text styles */
@@ -270,13 +305,13 @@
   color: var(--udex-input-color-success-default-supporting-text);
 }
 
-:host .udex-text-field__icon {
+.udex-text-field__icon {
   color: inherit;
   vertical-align: top;
   margin-inline-end: var(--udexSpacer4, 4px);
 }
 
-:host .udex-text-field__supporting-text-icon {
+.udex-text-field__supporting-text-icon {
   color: inherit;
   vertical-align: top;
   margin-inline-end: var(--udexSpacer4, 4px);
@@ -284,16 +319,18 @@
   height: var(--sapContent_IconHeight, 16px);
 }
 
-:host .udex-text-field__input[type="number"] {
-  appearance: textfield;
-}
 
-:host .udex-text-field__input[type="number"]::-webkit-outer-spin-button,
-:host .udex-text-field__input[type="number"]::-webkit-inner-spin-button {
+.udex-text-field__input[type=number]::-webkit-outer-spin-button,
+.udex-text-field__input[type=number]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
+.udex-text-field__input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
 .hidden-text {
   display: none;
 }

package/src/themes/Toast.css

@@ -31,6 +31,10 @@
   margin-right: var(--udexSpacer16);
 }
 
+.udex-toast .udex-toast__icon {
+  min-width: 1rem;
+}
+
 .udex-toast .udex-toast__icon:dir(rtl) {
   margin-left: var(--udexSpacer16);
 }