@sapudex/web-components 2.6.0 → 2.7.1

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-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);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}.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}: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)}: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:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}: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:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}: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}:host([icon-active]) .udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([icon-active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.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)}.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}: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)}: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:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}: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:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}: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}:host([icon-active]) .udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([icon-active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.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-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);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}.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}: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)}: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:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}: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:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}: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}:host([icon-active]) .udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([icon-active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.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)}.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}: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)}: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:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}: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:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}: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}:host([icon-active]) .udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([icon-active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.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-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);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}.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}: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)}: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:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}: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:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}: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}:host([icon-active]) .udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([icon-active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.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)}.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}: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)}: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:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}: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:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}: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}:host([icon-active]) .udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([icon-active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.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/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.6.0",
+  "version": "2.7.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

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

package/src/List.hbs

@@ -8,7 +8,7 @@
         <div class="udex-list__scroll-container">
             {{> headerText}}
             <span id="{{_id}}-mode-label" class="udex-list__hidden-text">{{ariaLabelModeText}}</span>
-            <ul
+            <div
                 id="udex-list"
                 class="udex-list"
                 role="{{accessibleRole}}"
@@ -16,13 +16,13 @@
                 aria-label="{{accessibleName}}"
                 aria-busy="{{ariaBusy}}">
                 <slot></slot>
-            </ul>
+            </div>
         </div>
     </div>
 {{/if}}
 {{#if modeSingleContent}}
     {{> headerText}}
-    <ul
+    <div
         id="udex-list"
         class="udex-list"
         role="{{accessibleRole}}"
@@ -30,7 +30,7 @@
         aria-label="{{accessibleName}}"
         aria-busy="{{ariaBusy}}">
         <slot></slot>
-    </ul>
+    </div>
 {{/if}}
 {{#*inline "headerText"}}
     {{#if headerText}}

package/src/ListGroupHeader.hbs

@@ -1,11 +1,13 @@
-<li
+<div
     part="item"
     class="udex-list__group"
     role="group"
     aria-labelledby="group-heading">
-    <ul
-        role="group"
+    <div
+        role="listbox"
         class="udex-list__group-list"
+        name="group"
+        aria-label="group"
         @ui5-item-press="{{getHandleGroupItemsClick}}">
         {{#if modeMultiSelectOrRadioGroup}}
             {{> multi-or-radio-group-header}}
@@ -13,8 +15,8 @@
             {{> single-group-header}}
         {{/if}}
         <slot></slot>
-    </ul>
-</li>
+    </div>
+</div>
 
 {{#*inline "multi-or-radio-group-header"}}
     {{#if isNonActiveHeader}}

package/src/ListItem.hbs

@@ -1,10 +1,10 @@
 {{#if modeSelected}}
-    <li
+    <div
         part="item"
-        role="{{roleItem}}"
         tabindex="{{_effectiveTabIndex}}"
         aria-disabled="{{_ariaDisabled}}"
         class="{{className}}"
+        role="{{roleItem}}"
         @click="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}"
@@ -12,16 +12,15 @@
         @keydown="{{handleKeyDown}}"
         @focusin="{{handleFocusIn}}"
         @focusout="{{handleFocusOut}}"
-        aria-selected="{{selected}}"
-        aria-current="{{selected}}"
         ?divider="{{divider}}"
-        _id="{{this._id}}">
+        _id="{{this._id}}"
+        data-selected="{{selected}}"
+        aria-describedby="{{itemDescribedBy}}">
         {{#if modeMultiSelect}}
             <udex-checkbox
                 class="udex-list__checkbox"
                 part="checkbox"
                 tabindex="-1"
-                ?aria-checked="{{selected}}"
                 ?indeterminate="{{indeterminate}}"
                 accessible-name="checkbox {{stateAccessibleName}}"
                 ?checked="{{selected}}"
@@ -33,22 +32,23 @@
                 class="udex-list__radio"
                 part="radio"
                 tabindex="-1"
-                ?aria-checked="{{selected}}"
                 accessible-name="radio {{stateAccessibleName}}"
+                ?aria-selected="{{selected}}"
                 ?checked="{{selected}}"
                 ?disabled="{{disabled}}">
             </udex-radio-button>
         {{/if}}
         {{>contentList}}
-    </li>
+    </div>
 {{/if}}
 {{#if modeSingleContent}}
-    <li
+    <div
         part="item"
         role="{{roleItem}}"
+        aria-selected="{{selected}}"
         class="{{className}}">
         {{> contentList}}
-    </li>
+    </div>
 {{/if}}
 {{#*inline "contentList"}}
     <div class="udex-list__content-wrap" _id="{{this._id}}" aria-labelledby="{{this._id}}-invisibleText" aria-label="{{accessibleListItemName}}">
@@ -101,5 +101,6 @@
             {{/if}}
         </div>
       <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
+      <div class="hidden" id="{{this._id}}-invisibleText-describedby">{{itemState}}</div>
     </div>
 {{/inline}}

package/src/ListItem.ts

@@ -374,6 +374,14 @@ class UDExListItem extends UDExListItemBase {
   get deleteButtonAccessibleName(): string {
     return UDExListItem.i18nBundle.getText(DELETE_BUTTON);
   }
+
+  get itemDescribedBy(): string {
+    return `${this._id}-invisibleText-describedby`;
+  }
+
+  get itemState(): string {
+    return this.selected ? "Selected" : "Not selected";
+  }
 }
 
 UDExListItem.define();

package/src/ListSelectAll.hbs

@@ -1,13 +1,16 @@
-<ul class="udex-list__group-list">
-  <li
-      part="item"
-      class="udex-list__group">
-      <ul
+<div 
+    part="item"
+    class="udex-list__group"
+    role="group"
+    aria-labelledby="group-select-all">
+      <div
+          role="listbox"
           class="{{groupListClassName}}"
+          aria-label="select-all-group"
           @ui5-item-press="{{handleSelectAllGroupItemsPress}}">
           <udex-list-item
+              role="group"
               _tab-index="{{_effectiveTabIndex}}"
-              role="listitem"
               _additional-class-name="{{additionalClassName}}"
               class="{{className}}"
               ?selected="{{selected}}"
@@ -19,11 +22,10 @@
               ?controlled="{{controlled}}"
               supporting-text="{{supportingText}}"
               @keydown="{{handleKeyDownPress}}"
-              accessible-role="none"
+              accessible-role="option"
               divider>
               {{selectAllLabel}}
           </udex-list-item>
           <slot></slot>
-      </ul>
-  </li>
-</ul>
+      </div>
+</div>

package/src/MastheadCountrySelector.hbs

@@ -30,7 +30,7 @@
                 <li role="none">
                     <udex-masthead-menu-item
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
-                        @click="{{../fireEventCountryItemClick}}"
+                        @click="{{../handleCountryClick}}"
                         _country-code="{{this.countryCode}}"
                         url="{{this.url}}"
                         label="{{this.displayTitle}}"

package/src/MastheadCountrySelector.ts

@@ -198,6 +198,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   _shouldFocusRegionByIndex!: boolean;
   _accSearchResultInfo?: string;
   _activeRegionIndex!: number;
+  _mastheadShell!: UDExMastheadShell;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -208,6 +209,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   onAfterRendering(): void {
+    this._mastheadShell = this.mastheadShell;
     this.handleFocusItem();
     this.setTabIndexForItems();
     this.handleDirection();
@@ -229,6 +231,13 @@ class UDExMastheadCountrySelector extends UI5Element {
     this.fireEventRegionItemClick(e);
   }
 
+  handleCountryClick(e: CustomEvent): void {
+    this.fireEventCountryItemClick(e);
+    if (this._mastheadShell && this.isMobile) {
+      this.closeMenu();
+    }
+  }
+
   handleKeyDown(e: KeyboardEvent): void {
     const item = e.target as UDExMastheadMenuItem;
 
@@ -479,6 +488,11 @@ class UDExMastheadCountrySelector extends UI5Element {
     });
   }
 
+  closeMenu():void {
+    this._mastheadShell.closeMobileMenu();
+    this._mastheadShell.mobileBtn?.focus();
+  }
+
   get noMatchesFoundText(): string {
     return UDExMastheadCountrySelector.i18nBundle.getText(NO_MATCHES_FOUND);
   }

package/src/MastheadMobileMenu.hbs

@@ -133,35 +133,46 @@
         </li>
     {{/if}}
     {{#each _categories}}
-        {{#if this.category}}
-            <li class="udex-masthead-mobile-menu__list-item" role="none">
-                <udex-masthead-menu-item
-                    part="menu-item"
-                    @click="{{../handleMenuCategoryClick}}"
-                    url="{{this.url}}"
-                    id="{{@index}}"
-                    label="{{this.category}}"
-                    aria-has-popup="true"
-                    type="Button"
-                    second-level-btn
-                    second-level
-                    has-border
-                    icon-end>
-                </udex-masthead-menu-item>
-            </li>
-        {{else}}
-            {{#each this.items}}
+        {{#if this.items}}
+            {{#if this.category}}
                 <li class="udex-masthead-mobile-menu__list-item" role="none">
                     <udex-masthead-menu-item
                         part="menu-item"
-                        @click="{{../handleMobileItemEvent}}"
-                        url="{{this.url}}"
-                        label="{{this.title}}"
+                        @click="{{../handleMenuCategoryClick}}"
+                        id="{{@index}}"
+                        label="{{this.category}}"
+                        aria-has-popup="true"
+                        type="Button"
+                        second-level-btn
                         second-level
-                        has-border>
+                        has-border
+                        icon-end>
                     </udex-masthead-menu-item>
                 </li>
-            {{/each}}
+            {{else}}
+                {{#each this.items}}
+                    <li class="udex-masthead-mobile-menu__list-item" role="none">
+                        <udex-masthead-menu-item
+                            part="menu-item"
+                            @click="{{../handleMobileItemEvent}}"
+                            url="{{this.url}}"
+                            label="{{this.title}}"
+                            second-level
+                            has-border>
+                        </udex-masthead-menu-item>
+                    </li>
+                {{/each}}
+            {{/if}}
+        {{else}}
+            <udex-masthead-menu-item
+                id="{{@index}}"
+                @click="{{../handleMobileItemEvent}}"
+                label="{{this.category}}"
+                part="menu-item"
+                type="Button"
+                second-level
+                has-border>
+            </udex-masthead-menu-item>
         {{/if}}
     {{/each}}
 {{/inline}}

package/src/MastheadMobileMenu.ts

@@ -15,6 +15,7 @@ import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
+import type UDExMastheadShell from "./MastheadShell.js";
 
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
@@ -133,8 +134,10 @@ class UDExMastheadMobileMenu extends UI5Element {
   _shouldFocusExploreBtn!: boolean;
   _focusedItemIndex!: number;
   _navItem?: UDExMastheadMenuItem;
+  _mastheadShell!: UDExMastheadShell;
 
   onAfterRendering() {
+    this._mastheadShell = this.mastheadShell;
     this.handleMenuMode();
     this.setTabIndexForItems();
     this.handleFocusItem();
@@ -436,6 +439,10 @@ class UDExMastheadMobileMenu extends UI5Element {
     };
 
     this.fireDecoratorEvent("item-click", eventDetail);
+
+    if (item.url && this._mastheadShell) {
+      this.closeMenu();
+    }
   }
 
   fireExploreSapMobileButton(e: PointerEvent | KeyboardEvent) {
@@ -530,6 +537,15 @@ class UDExMastheadMobileMenu extends UI5Element {
     return analyticsPath;
   }
 
+  closeMenu():void {
+    this._mastheadShell.closeMobileMenu();
+    this._mastheadShell.mobileBtn?.focus();
+  }
+
+  get mastheadShell(): UDExMastheadShell {
+    return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
+  }
+
   get exploreBtnMenu(): UDExMastheadMenuItem {
     return this.shadowRoot!.querySelector<UDExMastheadMenuItem>(".udex-masthead-mobile-menu__explore-btn")!;
   }

package/src/MastheadProfileMenu.ts

@@ -12,6 +12,7 @@ import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMe
 import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import type UDExMastheadShell from "./MastheadShell.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -120,7 +121,27 @@ class UDExMastheadProfileMenu extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  _mastheadShell!: UDExMastheadShell;
+
+  onAfterRendering(): void {
+    this._mastheadShell = this.mastheadShell;
+  }
+
   handleUserLogoutItemClick(e: PointerEvent): void {
+    this.fireLogoutItemClick(e);
+    if (this.shouldCloseMenu) {
+      this.closeMenu();
+    }
+  }
+
+  handleProfileMenuItemClick(e: CustomEvent): void {
+    this.fireMenuItemClick(e);
+    if (this.shouldCloseMenu) {
+      this.closeMenu();
+    }
+  }
+
+  fireLogoutItemClick(e: PointerEvent): void {
     const item = e.target as UDExMastheadMenuItem;
 
     this.fireDecoratorEvent("logout", {
@@ -131,7 +152,7 @@ class UDExMastheadProfileMenu extends UI5Element {
     });
   }
 
-  handleProfileMenuItemClick(e: CustomEvent): void {
+  fireMenuItemClick(e: CustomEvent): void {
     const { item, originalEvent } = e.detail;
 
     this.fireDecoratorEvent("profile-item-click", {
@@ -142,6 +163,15 @@ class UDExMastheadProfileMenu extends UI5Element {
     });
   }
 
+  closeMenu():void {
+    this._mastheadShell.closeMobileMenu();
+    this._mastheadShell.mobileBtn?.focus();
+  }
+
+  get shouldCloseMenu(): boolean {
+    return this._mastheadShell && this._mastheadShell.isMobileMenuMode;
+  }
+
   get linksList(): string {
     return this.links ? JSON.stringify([{
       subMenuLinkItems: JSON.parse(this.links),
@@ -163,6 +193,10 @@ class UDExMastheadProfileMenu extends UI5Element {
   get logoutText(): string {
     return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
   }
+
+  get mastheadShell(): UDExMastheadShell {
+    return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
+  }
 }
 
 UDExMastheadProfileMenu.define();

package/src/MastheadShell.ts

@@ -738,7 +738,8 @@ class UDExMastheadShell extends UI5Element {
     const itemIconWidths = itemsIcon.length * this.getItemIconWidth();
     const itemIconGaps = itemsIcon.length * this.getItemIconGap();
     const exploreItem = this.exploreSAP[0];
-    const exploreItemIconWidth = exploreItem.hasArrowDown ? this.getItemArrowIconWidth() : 0;
+    const hasArrowIcon = exploreItem?.hasArrowDown && !exploreItem?.hideArrowIcon;
+    const exploreItemIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
     const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(exploreItem) : 0;
     const rightMenuGaps = this.getRightMenuGap() + this.getExploreSapBtnGap() + itemIconGaps;
     return exploreSAPWidth + exploreItemIconWidth + itemIconWidths + rightMenuGaps;
@@ -769,7 +770,8 @@ class UDExMastheadShell extends UI5Element {
     const gapItemVar = this.getRootVar(UDExMastheadVariable.itemGap);
     return mainItems.reduce((accumulatedWidth, item, index) => {
       const mainItem = item as UDExMastheadItem;
-      const arrowIconWidth = mainItem.hasArrowDown ? this.getItemArrowIconWidth() : 0;
+      const hasArrowIcon = mainItem.hasArrowDown && !mainItem.hideArrowIcon;
+      const arrowIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
       return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar) + arrowIconWidth);
     }, 0);
   }