@sapudex/web-components 2.21.0 → 2.23.0

package/src/generated/themes/TagGroup.css.ts

@@ -5,5 +5,5 @@ 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 `.udex-tag-group{width:100%}.udex-tag-group__tokenizer{border:none;width:100%;min-width:100px;line-height:normal}::part(n-more-text){font-size:var(--udexTypographyBodyXXSFontSize)}:host([disabled]){opacity:var(--sapContent_DisabledOpacity)}.udex-tag-group__tag{margin-inline-end:var(--udexSpacer8);max-width:100%}.udex-tag-group__tokenizer .udex-tag-group__tag{display:flex}:host(:not([displayonly])) .udex-tag-group-tooltip__content{line-height:1.75}.udex-tag-group__tag[data-overflows]{margin-inline-end:var(--udexSpacer4)}.udex-tag-group__tag[overflows]{display:none}:host([disabled]) .udex-tag-group__tokenizer,:host([readonly]) .udex-tag-group__tokenizer{pointer-events:none}:host([displayonly]) .udex-tag-group__tag{margin-inline-end:0;position:relative}:host([displayonly]:dir(rtl)) .udex-tag-group__tag:not(:first-child):before{left:auto;right:-2px}:host([displayonly])::part(n-more-text):before,:host([displayonly]) .udex-tag-group__tag:not(:first-child):not([data-overflows]):before{content:"";position:absolute;top:9px;left:-2px;display:block;width:4px;height:4px;border-radius:50%;z-index:1;background:var(--udexColorGrey9, #223548)}:host([displayonly])::part(n-more-text):before{top:5px;left:-10px}:host([readonly])::part(n-more-text){color:var(--udexColorGrey6 ,#5B738B)}:host([displayonly])::part(n-more-text){position:relative;margin-inline-start:9px}::part(n-more-text){margin-inline-end:4px}:host([displayonly]:dir(rtl))::part(n-more-text):before{left:auto;right:-10px}::part(n-more-text):focus,::part(n-more-text):focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);outline-offset:3px;outline-style:auto}
+export default `.udex-tag-group{width:100%}.udex-tag-group__tokenizer{border:none;width:100%;line-height:normal}::part(n-more-text){font-size:var(--udexTypographyBodyXXSFontSize)}:host([disabled]){opacity:var(--sapContent_DisabledOpacity)}.udex-tag-group__tag{margin-inline-end:var(--udexSpacer8);max-width:100%}.udex-tag-group__tokenizer .udex-tag-group__tag{display:flex}:host(:not([displayonly])) .udex-tag-group-tooltip__content{line-height:1.75}.udex-tag-group__tag[data-overflows]{margin-inline-end:var(--udexSpacer4)}.udex-tag-group__tag[overflows]{display:none}:host([disabled]) .udex-tag-group__tokenizer,:host([readonly]) .udex-tag-group__tokenizer{pointer-events:none}:host([displayonly]) .udex-tag-group__tag{margin-inline-end:0;position:relative}:host([displayonly]:dir(rtl)) .udex-tag-group__tag:not(:first-child):before{left:auto;right:-2px}:host([displayonly])::part(n-more-text):before,:host([displayonly]) .udex-tag-group__tag:not(:first-child):not([data-overflows]):before{content:"";position:absolute;top:9px;left:-2px;display:block;width:4px;height:4px;border-radius:50%;z-index:1;background:var(--udexColorGrey9, #223548)}:host([displayonly])::part(n-more-text):before{top:5px;left:-10px}:host([readonly])::part(n-more-text){color:var(--udexColorGrey6 ,#5B738B)}:host([displayonly])::part(n-more-text){position:relative;margin-inline-start:9px}::part(n-more-text){margin-inline-end:4px}:host([displayonly]:dir(rtl))::part(n-more-text):before{left:auto;right:-10px}::part(n-more-text):focus,::part(n-more-text):focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);outline-offset:3px;outline-style:auto}
 `

package/src/generated/themes/TextField.css.ts

@@ -5,5 +5,5 @@ 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);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}
+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{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;background-color:transparent;border-color:transparent}: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}
 `

package/src/themes/CountrySelector.css

@@ -1,104 +1,64 @@
 :host {
   --udex-country-selector-flag-width: 30px;
   --udex-country-selector-flag-height: 20px;
-  --udex-country-selector-popover-min-width: 0px;
-  --udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, 0.4);
-  --udex-country-selector-max-width: 100%;
-  --udex-country-selector-text-offset-left: 50px; /* flag icon width(30px) + default input padding(12px) + specified in design spacing(8px) */
-  --udex-country-selector-text-offset-right: 36px; /* trigger icon width(16px) + default input padding(12px) + specified in design spacing(8px) */
+  --udex-country-selector-padding-start: 50px;
+  --udex-country-selector-padding-end: 12px;
+  --udex-country-selector-text-offset: 36px;
+  --udex-country-selector-search-inset-end: 42px;
+  --udex-country-selector-search-inset-start: 36px;
+  --udex-country-selector-active-text-offset-y: -21px;
+  --udex-country-selector-label-offset-y: 96px;
 }
-
-:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger {
-  cursor: pointer;
-}
-
-:host([displayonly])::part(textfield-input),
-:host([readonly])::part(textfield-input),
-:host([disabled])::part(textfield-input) {
-  cursor: default;
-}
-
-:host(:not([hide-flag-images])) [udex-text-field]:not([active])[value=""]::part(label) {
-  transform: translateX(var(--udex-country-selector-text-offset-right));
-}
-
-:host(:not([hide-flag-images])) [udex-text-field]:not([active])[value=""]::part(label):dir(rtl) {
-  transform: translateX(calc(var(--udex-country-selector-text-offset-right)* -1));
-}
-
-:host([displayonly])::part(textfield-control-btn),
-.hidden-text {
-  display: none;
-}
-
-.udex-country-selector__text {
-  width: 100%;
-}
-
-:host([hide-flag-images])::part(textfield-input),
-.udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item) {
-  padding-left: var(--udexSpacer12);
-  padding-right: var(--udexSpacer12);
+:host([_country-selector]) .udex-text-field__label {
+  max-width: calc(100% - var(--udex-country-selector-label-offset-y));
 }
 
-:host([hide-flag-images]) [udex-text-field]::part(textfield-input) {
-  padding-inline-start: var(--udexSpacer12);
+:host([_country-selector]) .udex-text-field__label {
+  transform: translate(var(--udex-country-selector-text-offset));
 }
 
-.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger::after {
-  left: var(--udexSpacer12);
-  right: var(--udexSpacer32);
+:host([_country-selector]) .udex-text-field__label.udex-text-field__label_active {
+  transform: translateY(var(--udex-country-selector-active-text-offset-y));
 }
 
-.udex-country-selector__trigger {
-  display: flex;
-  align-items: center;
-  position: relative;
-  max-width: var(--udex-country-selector-max-width);
-  width: 100%;
+:host([_country-selector]) .udex-text-field__text-holder {
+  inset: 0 1px;
 }
 
-.udex-country-selector__trigger--disabled {
-  opacity: var(--udex-country-selector-input-disabled-opacity);
+:host([_country-selector]) [udex-list-item]::part(item) {
+  padding: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udex-country-selector-padding-start);
 }
 
-.udex-list::part(content) {
-  padding: 0;
+:host([_country-selector]) .udex-text-field__search {
+  inset: 0;
+  padding: var(--udexSpacer8) 0;
 }
 
-.udex-country-selector__trigger::after {
-  content: attr(value);
-  position: absolute;
-  left: calc(24px + var(--udex-country-selector-flag-width));
-  right: 40px;
-  font-family: var(--sapFontFamily, sans-serif);
-  font-weight: var(--udexTypographyFontWeightRegular, 400);
-  font-size: var(--udexTypographyBodySFontSize, 16px);
-  line-height: var(--udexTypographyBodyLineHeight, 24px);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  pointer-events: none;
+:host([_country-selector][hide-flag-images]) .udex-text-field__search {
+  --udex-country-selector-search-inset-start: 0;
+  padding: var(--udexSpacer8) var(--udexSpacer12);
+  inset: 0 42px 0 0;
 }
 
-:dir(rtl) .udex-country-selector__trigger::after {
-  right: calc(24px + var(--udex-country-selector-flag-width));
-  left: 40px;
+:host([_country-selector][hide-flag-images]) .udex-text-field__text-holder {
+  inset: 0 13px;
 }
 
-.udex-text-field__input {
-  inset-inline-start: var(--udexSpacer12);
+:host([_country-selector][hide-flag-images]) .udex-text-field__label {
+  --udex-country-selector-text-offset: 0;
 }
 
-[udex-text-field]::part(label) {
-  max-width: calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)
+:host([_country-selector][hide-flag-images]) [udex-list-item]::part(item),
+:host([_country-selector][hide-flag-images]) .udex-text-field__text-holder {
+  --udex-country-selector-padding-start: var(--udexSpacer12);
+  --udex-country-selector-padding-end: var(--udexSpacer12);
 }
 
-[udex-text-field][active]::part(label) {
-  padding: 6px var(--udexSpacer4, 4px) 0;
+:host([_country-selector][hide-flag-images]) .udex-text-field__label {
+  --udex-country-selector-label-offset-y: 56px;
 }
 
-.udex-country-selector-item__image, .udex-country-selector__image {
+.udex-text-field__image {
   background-color: var(--udexColorGrey4, #A9B4BE);
   background-image: url("https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp");
   background-repeat: no-repeat;
@@ -107,6 +67,7 @@
   top: 0;
   transform: translate(0, 50%);
   z-index: 1;
+  min-width: var(--udex-country-selector-flag-width);
   width: var(--udex-country-selector-flag-width);
   height: var(--udex-country-selector-flag-height);
   inset-inline-start: var(--udexSpacer12);
@@ -114,45 +75,11 @@
   pointer-events: none;
 }
 
-[udex-list-item]::part(item) {
+.udex-text-field__input > .udex-text-field__image {
   position: relative;
-  padding-inline-start: calc(24px + var(--udex-country-selector-flag-width));
-  padding-inline-end: var(--udexSpacer12, 12px);
-}
-
-[udex-dropdown] {
-  --udex-dropdown-pane-max-width: 100%;
-}
-
-[udex-text-field] {
-  --udex-input-padding: 0 var(--udex-country-selector-text-offset-right) 0 var(--udex-country-selector-text-offset-left);
-}
-
-[udex-text-field]:dir(rtl) {
-  --udex-input-padding: 0 var(--udex-country-selector-text-offset-left)  0 var(--udex-country-selector-text-offset-right);
-}
-
-[udex-text-field]::part(textfield-input) {
-  cursor: pointer;
-}
-
-[udex-dropdown] {
-  --udex-dropdown-pane-min-width: var(--udex-country-selector-popover-min-width);
-}
-
-.hidden {
-  position: absolute;
-  width: 0px;
-  height: 0px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  border: 0;
-  padding: 0;
-}
-
-@media (width < 640px) {
-  [udex-dropdown] {
-    --udex-dropdown-pane-min-width-xs: var(--udex-country-selector-popover-min-width);
-  }
+  transform: translate(0);
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  margin-inline-start: var(--udexSpacer12);
+  margin-inline-end: var(--udexSpacer8);
 }

package/src/themes/EventRibbon.css

@@ -243,8 +243,8 @@
 
   --udex-event-ribbon-background-blend-mode: multiply;
   --udex-event-ribbon-background-position: center;
-  --udex-event-ribbon-background-size: 100%;
-  --udex-event-ribbon-hover-background-size: 112%;
+  --udex-event-ribbon-background-size: cover;
+  --udex-event-ribbon-hover-background-size: 1.12;
 
   --udex-event-ribbon-margin-xl: 84px;
   --udex-event-ribbon-margin-m-l: 72px;
@@ -278,15 +278,6 @@
   gap: var(--udexSpacer32, 32px);
 }
 
-.udex-event-ribbon__container-with-background-image {
-  background-image: var(--udex-event-ribbon-background-image);
-  background-blend-mode: var(--udex-event-ribbon-background-blend-mode);
-  background-position: var(--udex-event-ribbon-background-position);
-  background-size: var(--udex-event-ribbon-background-size);
-  background-repeat: no-repeat;
-  transition: background ease-out 300ms;
-}
-
 .udex-event-ribbon__container:focus,
 .udex-event-ribbon__container:focus-visible {
   outline: solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);
@@ -297,8 +288,25 @@
   background-color: var(--udex-event-ribbon-hover-background-color);
 }
 
-.udex-event-ribbon__container-with-background-image:hover {
-  background-size: var(--udex-event-ribbon-hover-background-size);
+.udex-event-ribbon__container-with-background-image::before {
+  content: '';
+  display: block;
+  position: absolute;
+  inset: 0;
+  background-image: var(--udex-event-ribbon-background-image);
+  background-color: var(--udex-event-ribbon-background-color);
+  background-blend-mode: var(--udex-event-ribbon-background-blend-mode);
+  background-size: var(--udex-event-ribbon-background-size);
+  background-position: var(--udex-event-ribbon-background-position);
+  background-repeat: no-repeat;
+  transition: ease-out 300ms;
+  z-index: 0;
+  will-change: transform;
+}
+
+.udex-event-ribbon__container-with-background-image:hover::before {
+  background-color: var(--udex-event-ribbon-hover-background-color);
+  transform: scale(var(--udex-event-ribbon-hover-background-size));
 }
 
 :host([mode="dark"]) .udex-event-ribbon__container {

package/src/themes/ImageGridCloud.css

@@ -0,0 +1,55 @@
+:host {
+  --udex-image-grid-cloud-item-gap-l: var(--udexSpacer20);
+  --udex-image-grid-cloud-item-gap-s: var(--udexSpacer16);
+  --udex-image-grid-cloud-item-border-radius: var(--udexRadiusM);
+  --udex-image-grid-cloud-item-border-color: var(--udexColorNeutralWhite);
+  --udex-image-grid-cloud-item-border-width: var(--udexSpacer4);
+  --udex-image-grid-cloud-item-width-l: 180px;
+  --udex-image-grid-cloud-item-height-l: 90px;
+  --udex-image-grid-cloud-item-width-s: 140px;
+  --udex-image-grid-cloud-item-height-s: 70px;
+}
+
+:host([grayscale]) .udex-image-grid-cloud__item {
+  filter: grayscale(1);
+}
+
+.udex-image-grid-cloud__item {
+  display: flex;
+  align-items: center;
+  border: var(--udex-image-grid-cloud-item-border-width) solid var(--udex-image-grid-cloud-item-border-color);
+  border-radius: var(--udex-image-grid-cloud-item-border-radius);
+}
+
+:host([size="Large"]) .udex-image-grid-cloud__item {
+  width: var(--udex-image-grid-cloud-item-width-l);
+  height: var(--udex-image-grid-cloud-item-height-l);
+}
+
+:host([size="Small"]) .udex-image-grid-cloud__item {
+  width: var(--udex-image-grid-cloud-item-width-s);
+  height: var(--udex-image-grid-cloud-item-height-s);
+}
+
+.udex-image-grid-cloud__row {
+  display: flex;
+  justify-content: center;
+}
+
+:host([size="Large"]) .udex-image-grid-cloud__row {
+  gap: var(--udex-image-grid-cloud-item-gap-l);
+  margin-bottom: var(--udex-image-grid-cloud-item-gap-l);
+}
+
+:host([size="Small"]) .udex-image-grid-cloud__row {
+  gap: var(--udex-image-grid-cloud-item-gap-s);
+  margin-bottom: var(--udex-image-grid-cloud-item-gap-s);
+}
+
+@media (max-width: 979px) {
+  :host {
+    --udex-image-grid-cloud-item-width-l: var(--udex-image-grid-cloud-item-width-s);
+    --udex-image-grid-cloud-item-height-l: var(--udex-image-grid-cloud-item-height-s);
+    --udex-image-grid-cloud-item-gap-l: var(--udex-image-grid-cloud-item-gap-s);
+  }
+}

package/src/themes/ImageGridCloudItem.css

@@ -0,0 +1,10 @@
+:host {
+  --udex-image-grid-cloud-item-image-width: 100%;
+  --udex-image-grid-cloud-item-object-fit: contain;
+}
+
+.udex-image-grid-cloud-item-img {
+  height: inherit;
+  object-fit: var(--udex-image-grid-cloud-item-object-fit);
+  width: var(--udex-image-grid-cloud-item-image-width);
+}

package/src/themes/ListItem.css

@@ -51,11 +51,17 @@
   background: var(--udex-list-item-background-active);
 }
 
+:host([_aria-selected]:not([mode="SingleContent"])),
 :host(:not([disabled]):not([selected]):not([mode="SingleContent"]):hover) {
   background: var(--udex-list-item-background-hover);
   color: var(--udex-list-item-color-hover);
 }
 
+:host([_aria-selected][selected]:not([mode="SingleContent"])) {
+  background: var(--udex-list-item-background-selected-hover);
+  border-color: var(--udex-list-item-border-color-selected-hover);
+}
+
 :host(:not([mode="SingleContent"]):not([disabled])[desktop]) .udex-list__item:focus:before,
 :host(:not([mode="SingleContent"]):not([disabled])) .udex-list__item:focus-visible:before {
   content: '';

package/src/themes/MastheadItem.css

@@ -272,7 +272,6 @@
 :host([part="menu-open-btn"]) .udex-masthead-item__dropdown-holder {
   height: 100%;
   box-shadow: none;
-  overflow: auto;
 }
 
 :host([_is-mobile-mode]) .udex-masthead-item__dropdown:after,
@@ -332,7 +331,6 @@
 
   .udex-masthead-item__dropdown-holder {
     height: 100%;
-    overflow: auto;
   }
 
   .udex-masthead-item__dropdown:after {

package/src/themes/MastheadMobileMenu.css

@@ -22,6 +22,8 @@
 
 .udex-masthead-mobile-menu__nav-holder {
   padding: var(--udex-masthead-mobile-menu-padding-m);
+  height: 100%;
+  overflow: auto;
 }
 
 .udex-masthead-mobile-menu__explore-btn {

package/src/themes/Pagination.css

@@ -5,7 +5,7 @@
   --udex-pagination-item-inner-paddings: 0rem 0.25rem;
   --udex-pagination-mobile-item-paddings: 0.5625rem 0.875rem 0.6875rem 0.875rem;
   --udex-pagination-item-line-height: var(--sapContent_LineHeight, 1.5rem);
-  --udex-pagination-item-text-color: var(--sapPrimary5, #5b738b);
+  --udex-pagination-item-text-color: var(--udexColorGrey7, #475E75);
   --udex-pagination-item-active-text-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9, #223548));
   --udex-pagination-item-active-background-color: var(--udexColorGrey1);
   --udex-pagination-item-active-border-color: var(--udexColorBlue8);

package/src/themes/Search.css

@@ -59,7 +59,6 @@
 :host(:not([mode="Home Search"])) .udex-search-prefix .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled {
   display: block;
   top: var(--udexSpacer8);
-  line-height: 18px;
   transform: translateY(-110%);
   padding: 0  var(--udexSpacer4);
   font-family: var(--udex-input-font-family-label-active);