@sapudex/web-components 2.16.0 → 2.17.0

package/dist/generated/themes/TextField.css.d.ts

@@ -1,2 +1,2 @@
-declare const _default: ":host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--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: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%;--udex-input-background-color: var(--sapField_Background, var(--udexColorNeutralWhite))}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border);background-color:var(--udex-input-background-color)}.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);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none;text-overflow:ellipsis}.udex-text-field__input:focus{outline:none}: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__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-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__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}: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__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}: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__wrap{border:1px solid var(--udex-input-color-error-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-warning-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-success-default-border)}: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__wrap[open],:host([value-state=\"Success\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s 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{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:var(--udexSpacer8)}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:var(--udexSpacer8)}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:0 var(--udexSpacer4);font-size:12px;background:linear-gradient(transparent 60%,var(--udex-input-color-standard-default-background-light) 60%)}:host(:not([_is-touched]):not([aria-expanded=\"true\"])[active]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 40%,var(--udex-input-color-standard-default-background-light) 40%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 60%,var(--udex-input-color-read-only-default-background) 60%)}:host([readonly]:not([_is-touched]):not([aria-expanded=\"true\"])[active]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 60%,var(--udex-input-color-read-only-default-background) 60%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}: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__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state=\"Error\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state=\"Warning\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state=\"Success\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.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}\n";
+declare const _default: ":host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--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: 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);background-color:var(--udex-input-color-standard-default-background-light)}.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);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none;text-overflow:ellipsis}.udex-text-field__input:focus{outline:none}: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__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-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__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}: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__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}: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__wrap{border:1px solid var(--udex-input-color-error-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-warning-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-success-default-border)}: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__wrap[open],:host([value-state=\"Success\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s 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);padding:0 var(--udexSpacer4)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:var(--udexSpacer8)}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:var(--udexSpacer8)}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);font-size:12px;background:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(var(--udex-input-color-standard-default-background-light) 65%,var(--udex-input-color-read-only-default-background) 65%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}: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__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state=\"Error\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state=\"Warning\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state=\"Success\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.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}\n";
 export default _default;

package/dist/generated/themes/TextField.css.js

@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
 import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--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: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%;--udex-input-background-color: var(--sapField_Background, var(--udexColorNeutralWhite))}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border);background-color:var(--udex-input-background-color)}.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);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none;text-overflow:ellipsis}.udex-text-field__input:focus{outline:none}: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__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-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__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}: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__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}: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__wrap{border:1px solid var(--udex-input-color-error-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-warning-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-success-default-border)}: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__wrap[open],:host([value-state="Success"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s 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{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:var(--udexSpacer8)}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:var(--udexSpacer8)}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:0 var(--udexSpacer4);font-size:12px;background:linear-gradient(transparent 60%,var(--udex-input-color-standard-default-background-light) 60%)}:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 40%,var(--udex-input-color-standard-default-background-light) 40%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 60%,var(--udex-input-color-read-only-default-background) 60%)}:host([readonly]:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 60%,var(--udex-input-color-read-only-default-background) 60%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}: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__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.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}
+export default `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--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: 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);background-color:var(--udex-input-color-standard-default-background-light)}.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);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none;text-overflow:ellipsis}.udex-text-field__input:focus{outline:none}: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__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-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__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}: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__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}: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__wrap{border:1px solid var(--udex-input-color-error-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-warning-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-success-default-border)}: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__wrap[open],:host([value-state="Success"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s 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);padding:0 var(--udexSpacer4)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:var(--udexSpacer8)}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:var(--udexSpacer8)}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);font-size:12px;background:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(var(--udex-input-color-standard-default-background-light) 65%,var(--udex-input-color-read-only-default-background) 65%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}: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__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.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}
 `;
 //# sourceMappingURL=TextField.css.js.map

package/dist/generated/themes/TextField.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TextField.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport default `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--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: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%;--udex-input-background-color: var(--sapField_Background, var(--udexColorNeutralWhite))}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border);background-color:var(--udex-input-background-color)}.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);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none;text-overflow:ellipsis}.udex-text-field__input:focus{outline:none}: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__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-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__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}: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__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}: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__wrap{border:1px solid var(--udex-input-color-error-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-warning-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-success-default-border)}: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__wrap[open],:host([value-state=\"Success\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s 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{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:var(--udexSpacer8)}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:var(--udexSpacer8)}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:0 var(--udexSpacer4);font-size:12px;background:linear-gradient(transparent 60%,var(--udex-input-color-standard-default-background-light) 60%)}:host(:not([_is-touched]):not([aria-expanded=\"true\"])[active]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 40%,var(--udex-input-color-standard-default-background-light) 40%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 60%,var(--udex-input-color-read-only-default-background) 60%)}:host([readonly]:not([_is-touched]):not([aria-expanded=\"true\"])[active]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 60%,var(--udex-input-color-read-only-default-background) 60%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}: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__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state=\"Error\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state=\"Warning\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state=\"Success\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.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}\n`"]}
+{"version":3,"file":"TextField.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TextField.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport default `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--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: 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);background-color:var(--udex-input-color-standard-default-background-light)}.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);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none;text-overflow:ellipsis}.udex-text-field__input:focus{outline:none}: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__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-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__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}: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__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}: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__wrap{border:1px solid var(--udex-input-color-error-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-warning-default-border)}: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__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__wrap{border:1px solid var(--udex-input-color-success-default-border)}: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__wrap[open],:host([value-state=\"Success\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s 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);padding:0 var(--udexSpacer4)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:var(--udexSpacer8)}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:var(--udexSpacer8)}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);font-size:12px;background:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(var(--udex-input-color-standard-default-background-light) 65%,var(--udex-input-color-read-only-default-background) 65%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}: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__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state=\"Error\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state=\"Warning\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state=\"Success\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.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}\n`"]}

package/dist/vscode.html-custom-data.json

@@ -1331,7 +1331,7 @@
     },
     {
       "name": "udex-list",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Slot for list items.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Slot for list items.",
       "attributes": [
         {
           "name": "accessible-role",
@@ -1393,7 +1393,7 @@
     },
     {
       "name": "udex-list-group-header",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list-group-header</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ListGroupHeader.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **first-icon-click** - Fired event when the user click on a first icon.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for group header list items.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list-group-header</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ListGroupHeader.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **header-press** - Fired when selectable group header is pressed\n- **first-icon-click** - Fired event when the user click on a first icon.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for group header list items.",
       "attributes": [
         {
           "name": "non-interactive",
@@ -1744,7 +1744,7 @@
     },
     {
       "name": "udex-list-select-all",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list-select-all</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ListSelectAll.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **first-icon-click** - Fired event when the user click on a first icon.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for group header list items.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list-select-all</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ListSelectAll.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **select-all** - Fired when the user clicks on the Select All header.\n- **first-icon-click** - Fired event when the user click on a first icon.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for group header list items.",
       "attributes": [
         {
           "name": "non-interactive",
@@ -4136,6 +4136,19 @@
           "description": "Defines the behaviour of autocomplete.",
           "values": []
         },
+        {
+          "name": "type",
+          "description": "Defines the type of inner input field.\nNote: Only URL and Email types can be used within this property. For other types, user should use dedicated UDEx component.\nThere is no custom logic on UDEx component side. Property is used only to pass it directly to html input element.",
+          "values": [
+            { "name": "Text" },
+            { "name": "Number" },
+            { "name": "Email" },
+            { "name": "Password" },
+            { "name": "Tel" },
+            { "name": "URL" },
+            { "name": "Search" }
+          ]
+        },
         {
           "name": "direction",
           "description": "Defines direction of the input.",
@@ -4252,6 +4265,11 @@
             { "name": "Stretch" }
           ]
         },
+        {
+          "name": "opener",
+          "description": "Defines the ID or DOM Reference of the element at which the popover is shown.",
+          "values": [{ "name": "HTMLElement" }]
+        },
         {
           "name": "accessible-name",
           "description": "Defines the accessible name of the component.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3020,7 +3020,7 @@
         },
         {
           "name": "udex-list",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n---\n\n\n### **Events:**\n - **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Slot for list items.",
           "doc-url": "",
           "attributes": [
             {
@@ -3078,7 +3078,12 @@
           "slots": [
             { "name": "default", "description": "Slot for list items." }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "selection-change",
+              "description": "Fired when selection is changed by user interaction"
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -3131,12 +3136,17 @@
                 "value": { "type": "boolean | undefined" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "selection-change",
+                "description": "Fired when selection is changed by user interaction"
+              }
+            ]
           }
         },
         {
           "name": "udex-list-group-header",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list-group-header</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ListGroupHeader.js\";</code>\n---\n\n\n### **Events:**\n - **first-icon-click** - Fired event when the user click on a first icon.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for group header list items.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list-group-header</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ListGroupHeader.js\";</code>\n---\n\n\n### **Events:**\n - **header-press** - Fired when selectable group header is pressed\n- **first-icon-click** - Fired event when the user click on a first icon.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for group header list items.",
           "doc-url": "",
           "attributes": [
             {
@@ -3211,6 +3221,10 @@
             }
           ],
           "events": [
+            {
+              "name": "header-press",
+              "description": "Fired when selectable group header is pressed"
+            },
             {
               "name": "first-icon-click",
               "description": "Fired event when the user click on a first icon."
@@ -3283,6 +3297,10 @@
               }
             ],
             "events": [
+              {
+                "name": "header-press",
+                "description": "Fired when selectable group header is pressed"
+              },
               {
                 "name": "first-icon-click",
                 "description": "Fired event when the user click on a first icon."
@@ -3587,7 +3605,7 @@
         },
         {
           "name": "udex-list-select-all",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list-select-all</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ListSelectAll.js\";</code>\n---\n\n\n### **Events:**\n - **first-icon-click** - Fired event when the user click on a first icon.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for group header list items.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list-select-all</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ListSelectAll.js\";</code>\n---\n\n\n### **Events:**\n - **select-all** - Fired when the user clicks on the Select All header.\n- **first-icon-click** - Fired event when the user click on a first icon.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for group header list items.",
           "doc-url": "",
           "attributes": [
             {
@@ -3662,6 +3680,10 @@
             }
           ],
           "events": [
+            {
+              "name": "select-all",
+              "description": "Fired when the user clicks on the Select All header."
+            },
             {
               "name": "first-icon-click",
               "description": "Fired event when the user click on a first icon."
@@ -3734,6 +3756,10 @@
               }
             ],
             "events": [
+              {
+                "name": "select-all",
+                "description": "Fired when the user clicks on the Select All header."
+              },
               {
                 "name": "first-icon-click",
                 "description": "Fired event when the user click on a first icon."
@@ -8710,6 +8736,14 @@
               "description": "Defines the behaviour of autocomplete.",
               "value": { "type": "string", "default": "\"off\"" }
             },
+            {
+              "name": "type",
+              "description": "Defines the type of inner input field.\nNote: Only URL and Email types can be used within this property. For other types, user should use dedicated UDEx component.\nThere is no custom logic on UDEx component side. Property is used only to pass it directly to html input element.",
+              "value": {
+                "type": "\"Text\" | \"Number\" | \"Email\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"",
+                "default": "\"Text\""
+              }
+            },
             {
               "name": "direction",
               "description": "Defines direction of the input.",
@@ -8815,6 +8849,13 @@
                 "description": "Defines the behaviour of autocomplete.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "type",
+                "description": "Defines the type of inner input field.\nNote: Only URL and Email types can be used within this property. For other types, user should use dedicated UDEx component.\nThere is no custom logic on UDEx component side. Property is used only to pass it directly to html input element.",
+                "value": {
+                  "type": "\"Text\" | \"Number\" | \"Email\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\""
+                }
+              },
               {
                 "name": "direction",
                 "description": "Defines direction of the input.",
@@ -9004,6 +9045,14 @@
                 "default": "\"Center\""
               }
             },
+            {
+              "name": "opener",
+              "description": "Defines the ID or DOM Reference of the element at which the popover is shown.",
+              "value": {
+                "type": "string | HTMLElement",
+                "default": "undefined"
+              }
+            },
             {
               "name": "accessible-name",
               "description": "Defines the accessible name of the component.",
@@ -9095,6 +9144,11 @@
                   "type": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\""
                 }
               },
+              {
+                "name": "opener",
+                "description": "Defines the ID or DOM Reference of the element at which the popover is shown.",
+                "value": { "type": "string | HTMLElement" }
+              },
               {
                 "name": "accessible-name",
                 "description": "Defines the accessible name of the component.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/AccordionItem.ts

@@ -6,6 +6,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import AccordionItemTemplate from "./AccordionItemTemplate.js";
 
 // Styles
@@ -130,12 +131,18 @@ class UDExAccordionItem extends UI5Element {
   @slot({ type: Node, "default": true })
     content!: Array<Node>;
 
+  _resizeHandler: () => void;
+  contentElement: HTMLElement | null | undefined;
+
   constructor() {
     super();
+    this._resizeHandler = this._onResize.bind(this);
+    this.contentElement = null;
   }
 
   onAfterRendering() {
     this.handleDirection();
+    this.contentElement = this.shadowRoot?.querySelector(".udex-accordion-item__content-inner");
     this.setContentHeight();
   }
 
@@ -143,10 +150,23 @@ class UDExAccordionItem extends UI5Element {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
+    if (this.contentElement) {
+      ResizeHandler.register(this.contentElement, this._resizeHandler);
+    }
+  }
+
+  onExitDOM(): void {
+    if (this.contentElement) {
+      ResizeHandler.deregister(this.contentElement, this._resizeHandler);
+    }
   }
 
   setContentHeight() {
-    this.style.setProperty("--udex-accordion-item-content-max-height", `${this.shadowRoot?.querySelector(".udex-accordion-item__content")?.scrollHeight}px`);
+    this.style.setProperty("--udex-accordion-item-content-max-height", `${this.contentElement?.scrollHeight}px`);
+  }
+
+  _onResize(): void {
+    this.setContentHeight();
   }
 
   contentKeydown(e: KeyboardEvent) {

package/src/AvatarGroup.ts

@@ -64,11 +64,11 @@ class UDExAvatarGroup extends AvatarGroup {
 
     this._itemNavigation = new ItemNavigation(this, {
       getItemsCallback: () => {
-        return this._isGroup
-          ? []
-          : this.items.slice(0, this._hiddenStartIndex).map(
+        return this._isIndividual
+          ? this.items.slice(0, this._hiddenStartIndex).map(
             item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,
-          );
+          )
+          : [];
       },
     });
   }
@@ -118,10 +118,15 @@ class UDExAvatarGroup extends AvatarGroup {
       }
 
       if (index !== this._itemsCount - 1 || this._customOverflowButton) {
-        avatar.style.marginInlineEnd = avatarOffsets[avatar.effectiveSize][this.type];
+        const avatarSize = avatar.effectiveSize || UDExAvatarSize.S;
+        avatar.style.marginInlineEnd = avatarOffsets[avatarSize][this.type];
       }
     });
   }
+
+  get _isIndividual() {
+    return this.type === AvatarGroupType.Individual;
+  }
 }
 
 UDExAvatarGroup.define();

package/src/LinkListItemTemplate.tsx

@@ -30,7 +30,10 @@ export default function LinkListItemTemplate(this: LinkListItem) {
             onClick={this.fireItemClickEvent}>
             {this.label}
           </UDExLink>
-          <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
+          <UDExDivider
+            class={`${rootClass}__divider`}
+            accessibleRole="presentation">
+          </UDExDivider>
         </>
       )}
       {!this.isLink && (

package/src/List.ts

@@ -59,6 +59,11 @@ type UDExListSelectionChangeEventDetail = {
   dependencies: [],
 })
 
+/**
+   * Fired when selection is changed by user interaction
+   *
+   * @public
+   */
 @event("selection-change", { bubbles: true })
 
 class UDExList extends UI5Element {

package/src/ListGroupHeader.ts

@@ -44,6 +44,11 @@ type UDExListGroupHeaderBaseHeaderPressEventDetail = {
   dependencies: [Icon],
 })
 
+/**
+   * Fired when selectable group header is pressed
+   *
+   * @public
+   */
 @event("header-press", { bubbles: true })
 
 class UDExListGroupHeader extends UDExListGroupHeaderBase {

package/src/ListSelectAll.ts

@@ -45,7 +45,11 @@ type UDExListSelectAllSelectAllEventDetail = {
   template: ListSelectAllTemplate,
   dependencies: [UDExListItem],
 })
-
+/**
+   * Fired when the user clicks on the Select All header.
+   *
+   * @public
+   */
 @event("select-all", { bubbles: true })
 
 class UDExListSelectAll extends UDExListGroupHeaderBase {

package/src/MastheadShell.ts

@@ -859,7 +859,8 @@ class UDExMastheadShell extends UI5Element {
 
   setMobileMenuHeight(): void {
     const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue(UDExMastheadVariable.mastheadHeight));
-    const mobileMenuHeight = `${window.innerHeight - mastheadHeight}px`;
+    const rectTop = this.getBoundingClientRect().top;
+    const mobileMenuHeight = `${window.innerHeight - mastheadHeight - rectTop}px`;
     this.style.setProperty(UDExMastheadVariable.mobileMenuHeight, mobileMenuHeight);
   }
 

package/src/PasswordField.ts

@@ -1,19 +1,16 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExTextField from "./TextField.js";
 import UDExValueState from "./types/common.js";
-import "@ui5/webcomponents-icons/dist/hide.js";
-import "@ui5/webcomponents-icons/dist/show.js";
-
-import PasswordFieldTemplate from "./generated/templates/PasswordFieldTemplate.lit.js";
+import PasswordFieldTemplate from "./PasswordFieldTemplate.js";
 
 export enum UDExInputType {
-  Password = "password",
-  Text = "text",
+  Password = "Password",
+  Text = "Text",
 }
 
 export enum UDExIconType {
@@ -46,7 +43,7 @@ export enum UDExPasswordFieldAutoComplete {
  */
 @customElement({
   tag: "udex-password-field",
-  renderer: litRender,
+  renderer: jsxRenderer,
   template: PasswordFieldTemplate,
   dependencies: [UDExTextField],
 })
@@ -224,8 +221,8 @@ class UDExPasswordField extends UI5Element {
     return !this.disabled && !this.readonly && !this.displayonly && this.showButtonEnabled;
   }
 
-  get iconButton(): UDExIconType | null {
-    return this.renderShowButton ? this.icon : null;
+  get iconButton(): string | undefined {
+    return this.renderShowButton ? this.icon : undefined;
   }
 }
 

package/src/PasswordFieldTemplate.tsx

@@ -0,0 +1,29 @@
+import type UDExPasswordField from "./PasswordField.js";
+import UDExTextField from "./TextField.js";
+import "@ui5/webcomponents-icons/dist/hide.js";
+import "@ui5/webcomponents-icons/dist/show.js";
+
+export default function PasswordFieldTemplate(this: UDExPasswordField) {
+  return (
+    <>
+      <UDExTextField
+        type={this.type}
+        value={this.value}
+        label={this.passwordLabel}
+        autocomplete={this.autocomplete}
+        disabled={this.disabled}
+        readonly={this.readonly}
+        displayonly={this.displayonly}
+        maxlength={this.maxlength}
+        value-state={this.valueState}
+        supporting-text={this.supportingText}
+        accessible-name={this.accessibleName}
+        accessible-name-ref={this.accessibleNameRef}
+        accessible-icon-name={this.showButtonTooltip}
+        show-button-tooltip={this.showButtonTooltip}
+        onui5-click-icon={this.handleShowPassword}
+        icon={this.iconButton}>
+      </UDExTextField>
+    </>
+  );
+}