@sapudex/web-components 2.32.0 → 2.33.0

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

@@ -1 +1 @@
-{"version":3,"file":"TabNavigation.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TabNavigation.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-header-background-color: transparent;--udex-button-tab-vertical-gap: var(--udexSpacer32, 32px);--udex-button-tab-text-transform-first-letter: uppercase;--udex-button-tab-text-transform: none;--udex-button-tab-text-color-default: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-text-color-hover: var(--udexColorBlue8);--udex-button-tab-text-color-active: var(--udexColorBlue8);--udex-button-tab-border-color-active: var(--udexColorBlue8);--udex-button-tab-font-size-default: var(--sapFontSize, var(--udexTypographyNavigationBoldXLFontSize));--udex-button-tab-font-family: var(--sapFontFamily, sans-serif);--udex-button-tab-font-weight: var(--sapButton_Emphasized_FontWeight, var(--udexTypographyFontWeightBold));--udex-button-tab-line-height: 1.125;--udex-button-tab-padding-vertical: var(--udexSpacer12, 12px);--udex-button-tab-padding-horizontal: var(--udexSpacer4, 4px);--udex-button-tab-with-icon-without-background-border-color-active: transparent;--udex-button-tab-with-icon-background: var(--sapList_SelectionBackgroundColor, var(--udexColorBlue1));--udex-button-tab-with-icon-background-hover: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-button-tab-with-icon-color: var(--sapAccentColor6, var(--udexColorBlue7));--udex-button-tab-with-icon-color-hover: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px);--udex-button-tab-with-icon-background-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-color-active: var(--sapBackgroundColor, var(--udexColorNeutralWhite));--udex-button-tab-with-icon-without-background-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-with-icon-without-background-color-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-without-background-margin-bottom: var(--udexSpacer16, 16px);--udex-button-tab-with-icon-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-tab-with-icon-text-color-active: var(--sapTextColor, --udexCoreNavigation);--udex-tab-navigation-tab-with-icon-without-background-color: transparent;--udex-tab-navigation-tab-with-icon-without-background-color-active: transparent;--udex-button-more-margin-inline-end: 0;--udex-button-more-s-font-size: var(--udexTypographyNavigationMediumMFontSize, 14px);--udex-button-more-s-font-family: var(--sapFontFamily, sans-serif);--udex-button-more-s-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-more-s-line-height: 1.07143;--udex-button-more-s-text-color: var(--sapTextColor, var(--udexColorGrey9));--udex-button-more-s-padding-vertical: var(--udexSpacer4, 4px);--udex-button-more-s-padding-horizontal: var(--udexSpacer8, 8px);--udex-button-more-s-border-color: var(--sapButton_Neutral_BorderColor, var(--udexColorGrey4));--udex-button-more-s-icon-margin-inline-start: var(--udexSpacer4, 4px);--udex-button-more-s-icon-color: var(--sapTextColor, var(--udexColorGrey9));--udex-button-more-s-border-color-toggled: var(--udexColorBlue4);--udex-button-more-s-text-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));--udex-button-more-s-icon-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));--udex-button-more-m-font-size: var(--sapFontSize, var(--udexTypographyNavigationMediumXLFontSize));--udex-button-more-m-font-family: var(--sapFontFamily, sans-serif);--udex-button-more-m-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-more-m-line-height: 1.125;--udex-button-more-m-padding-vertical: var(--udexSpacer8, 8px);--udex-button-more-m-padding-horizontal: var(--udexSpacer12, 12px);--udex-tab-navigation-content-padding-vertical-desktop: var(--udexSpacer40, 40px);--udex-tab-navigation-content-padding-vertical-mobile: var(--udexSpacer32, 32px);--udex-tab-navigation-content-font-family: var(--sapFontFamily, sans-serif);--udex-tab-navigation-content-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-tab-navigation-content-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-navigation-content-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-tab-header-width: 428px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer{margin-bottom:var(--udex-button-tab-with-icon-without-background-margin-bottom);background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color);color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active:before{background-color:var(--udex-button-tab-with-icon-without-background-border-color-active)}:host([mode=\"Dark\"]){--udex-header-background-color: var(--sapList_GroupHeaderTextColor, var(--udexColorGrey10));--udex-button-tab-text-color-default: var(--sapList_GroupHeaderBackground, var(--udexColorNeutralWhite));--udex-button-tab-text-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-border-color-active: transparent;--udex-button-tab-with-icon-background: transparent;--udex-button-tab-with-icon-color: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-background-active: transparent;--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px)}:host([mode=\"Dark\"]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge,:host([icon-without-background]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-inline-end:-9px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer,:host([icon-without-background]) .udex-tab-navigation__button-icon{width:24px;height:24px}:host([icon-without-background]) .udex-tab-navigation__button-tab--with-icon{padding-block-end:var(--udex-button-tab-padding-vertical)}:host([icon-without-background]) .udex-tabs-navigation__button-tab{padding-bottom:var(--udex-button-tab-padding-vertical)}:host(:not([icon-without-background])) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{color:var(--udex-button-tab-with-icon-text-color-active)}:host([mode=\"Dark\"]) .udex-tab-navigation__button-icon-outer,:host([mode=\"Dark\"]) .udex-tab-navigation__button-icon{width:32px;height:32px}:host([size-more-button=\"Medium\"]) .udex-tab-navigation__button-more{padding:var(--udex-button-more-m-padding-vertical) var(--udex-button-more-m-padding-horizontal);height:34px;font-size:var(--udex-button-more-m-font-size);font-family:var(--udex-button-more-m-font-family);font-weight:var(--udex-button-more-m-font-weight);line-height:var(--udex-button-more-m-line-height)}:host([desktop]) .udex-tab-navigation__button-tab:focus .udex-tab-navigation__button-text,.udex-tab-navigation__button-tab:focus-visible .udex-tab-navigation__button-text{outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.udex-tab-navigation__root{width:100%}.udex-tab-navigation__header{background-color:var(--udex-header-background-color);min-height:43px;display:flex;align-items:center;position:relative}.udex-tab-navigation__header:before{content:\"\";position:absolute;left:0;right:0;bottom:0;z-index:-1;border-bottom:1px solid var(--udexColorGrey3, #D5DADD)}.udex-tab-navigation__header-tabs{display:flex;flex:1 1 0%;overflow:hidden;white-space:nowrap}.udex-tab-navigation__button-tab,.udex-tab-navigation__button-more{padding:0;display:block;background:none;border:0;border-radius:0;cursor:pointer}.udex-tab-navigation__button-tab{padding:var(--udex-button-tab-padding-vertical) var(--udex-button-tab-padding-horizontal) calc(var(--udex-button-tab-padding-vertical) + 3px);position:relative;z-index:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--udex-button-tab-text-color-default);font-size:var(--udex-button-tab-font-size-default);font-family:var(--udex-button-tab-font-family);font-weight:var(--udex-button-tab-font-weight);line-height:var(--udex-button-tab-line-height);text-decoration:none;text-align:center;text-transform:var(--udex-button-tab-text-transform);white-space:normal}.udex-tab-navigation__button-text{margin:0}.udex-tab-navigation__button-text:first-letter{text-transform:var(--udex-button-tab-text-transform-first-letter)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon{justify-content:start}.udex-tab-navigation__button-tab:not(.udex-tab-navigation__button-tab--icon-tab):hover{color:var(--udex-button-tab-text-color-hover)}.udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{font-weight:var(--udex-button-tab-with-icon-font-weight)}.udex-tab-navigation__button-tab:focus-visible{outline:none}.udex-tab-navigation__button-tab[hidden]{display:none}.udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:var(--udex-button-tab-vertical-gap)}.udex-tab-navigation__button-tab--with-icon{padding-block-end:calc(var(--udex-button-tab-padding-vertical) + 2px)}.udex-tab-navigation__button-tab--active{color:var(--udex-button-tab-text-color-active)}.udex-tab-navigation__button-tab--active:before{content:\"\";position:absolute;inset-block-end:0;inset-inline:0 0;z-index:1;height:3px;background-color:var(--udex-button-tab-border-color-active);border-radius:2px 2px 0 0}.udex-tab-navigation__button-badge{position:absolute;inset-block-start:var(--udexSpacer12);inset-inline-end:-6px;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}.udex-tab-navigation__button-more{margin-inline-start:auto;padding:var(--udex-button-more-s-padding-vertical) var(--udex-button-more-s-padding-horizontal);display:flex;align-items:center;flex:0 0 0;font-size:var(--udex-button-more-s-font-size);font-family:var(--udex-button-more-s-font-family);font-weight:var(--udex-button-more-s-font-weight);line-height:var(--udex-button-more-s-line-height);color:var(--udex-button-more-s-text-color);border:1px solid var(--udex-button-more-s-border-color);border-radius:var(--udexRadiusM, 8px);margin-inline-end:var(--udex-button-more-margin-inline-end)}:host([desktop]) .udex-tab-navigation__button-more:focus,.udex-tab-navigation__button-more:focus-visible{outline:2px solid var(--udex-button-tab-text-color-active);outline-offset:2px}.udex-tab-navigation__button-more[hidden]{display:none}.udex-tab-navigation__button-more--lg .udex-tab-navigation__button-more-icon{width:16px;height:16px}.udex-tab-navigation__button-more-icon{margin-inline-start:var(--udex-button-more-s-icon-margin-inline-start);width:14px;height:14px;color:var(--udex-button-more-s-icon-color)}.udex-tab-navigation__button-more--toggled{border-color:var(--udex-button-more-s-border-color-toggled);color:var(--udex-button-more-s-text-color-toggled)}.udex-tab-navigation__button-more--toggled .udex-tab-navigation__button-more-icon{color:var(--udex-button-more-s-icon-color-toggled)}.udex-tab-navigation__button-icon-outer{margin-left:auto;margin-right:auto;margin-bottom:var(--udex-button-tab-with-icon-margin-bottom);display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;border-radius:50%;background-color:var(--udex-button-tab-with-icon-background);color:var(--udex-button-tab-with-icon-color);position:relative;z-index:0}.udex-tab-navigation__button-icon{width:16px;height:16px;color:var(--udex-button-tab-with-icon-color)}.udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-block-start:1px;inset-inline-end:1px}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-active)}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-active)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-hover)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-hover)}.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-desktop);font-family:var(--udex-tab-navigation-content-font-family);font-size:var(--udex-tab-navigation-content-font-size);font-weight:var(--udex-tab-navigation-content-font-weight);line-height:var(--udex-tab-navigation-content-line-height)}.udex-tab-navigation__content-item:focus,.udex-tab-navigation__content-item:focus-visible{outline-offset:2px;outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.udex-tab-navigation__badge{margin-inline-start:var(--udexSpacer4);display:inline-flex}.udex-tab-navigation__button-body-text,.udex-tab-navigation__button-link{display:none}@media screen and (max-width: 979px){.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-mobile)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__root{flex-direction:column}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header{flex:0 0 100%}:host([orientation=\"Vertical\"]) .udex-tab-navigation__content{flex:0 0 100%;padding-inline-start:0}:host([orientation=\"Vertical\"])>.udex-tab-navigation__root>.udex-tab-navigation__content{display:none}}:host([orientation=\"Vertical\"]) .udex-tab-navigation__root{display:flex;gap:var(--udexSpacer24, 24px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header{flex-direction:column;align-items:stretch;min-height:auto;height:auto;flex:0 0 25%;width:100%;max-height:none;align-self:var(--udex-tab-navigation-header-alignment, flex-start)}:host([orientation=\"Vertical\"][vertical-alignment=\"Center\"]){--udex-tab-navigation-header-alignment: center}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header:before{display:none}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs{flex-direction:column;gap:var(--udexSpacer16, 16px);overflow:visible;white-space:normal;max-height:none;border-inline-start:1px solid var(--udexColorGrey3, #D5DADD)}@media screen and (max-width: 979px){:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs{gap:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-tab:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__tab-wrapper:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-link:not(:last-child):not(:has(+.udex-tab-navigation__content)){margin-block-end:var(--udexSpacer8, 8px)}}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab{padding:var(--udexSpacer16, 16px);align-items:flex-start;width:100%;height:auto;min-height:auto;margin-inline-end:0;transition:all .2s ease-in}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:0}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab--active{padding:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab--active:before{content:\"\";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--udexSpacer16, 16px);padding:var(--udexSpacer16, 16px);transition:all .2s ease-in}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active){padding:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active):before{content:\"\";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab{padding:0}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab--active:before{display:none}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-badge{inset-block-start:0;inset-inline-end:-10px}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-text{position:relative;font-size:var(--udexTypographyHeadingRegularXXSFontSize, 20px);line-height:1.1;font-weight:var(--udexTypographyFontWeightMedium);text-align:start}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-body-text{display:none;margin:0;font-family:var(--udex-button-tab-font-family);font-size:var(--udexTypographyBodyXSFontSize, 14px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udexColorGrey7);line-height:var(--udex-tab-navigation-content-line-height);text-align:start}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-body-text{display:block}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-links{display:none;flex-direction:column;gap:var(--udexSpacer2, 2px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-links{display:flex}:host([orientation=\"Vertical\"]) .udex-tab-navigation__content{flex:1 1 75%;padding-block-start:0;padding-inline-start:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"][placement=\"End\"]) .udex-tab-navigation__header{order:1}:host([orientation=\"Vertical\"]) .udex-tab-navigation__play-button{margin-block-end:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__footer{margin-block-start:var(--udex-tab-navigation-footer-spacing, var(--udexSpacer20, 20px));padding-inline-start:var(--udexSpacer16, 16px)}\n`"]}
+{"version":3,"file":"TabNavigation.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TabNavigation.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-header-background-color: transparent;--udex-button-tab-vertical-gap: var(--udexSpacer32, 32px);--udex-button-tab-text-transform-first-letter: uppercase;--udex-button-tab-text-transform: none;--udex-button-tab-text-color-default: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-text-color-hover: var(--udexColorBlue8);--udex-button-tab-text-color-active: var(--udexColorBlue8);--udex-button-tab-border-color-active: var(--udexColorBlue8);--udex-button-tab-font-size-default: var(--sapFontSize, var(--udexTypographyNavigationBoldXLFontSize));--udex-button-tab-font-family: var(--sapFontFamily, sans-serif);--udex-button-tab-font-weight: var(--sapButton_Emphasized_FontWeight, var(--udexTypographyFontWeightBold));--udex-button-tab-line-height: 1.1;--udex-button-tab-padding-vertical: var(--udexSpacer12, 12px);--udex-button-tab-padding-horizontal: var(--udexSpacer4, 4px);--udex-button-tab-with-icon-without-background-border-color-active: transparent;--udex-button-tab-with-icon-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-tab-with-icon-background-hover: var(--udexColorBlue2, #D1EFFF);--udex-button-tab-with-icon-color: var(--udexColorGrey7, #475E75);--udex-button-tab-with-icon-color-hover: var(--udexColorGrey9, #223548);--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px);--udex-button-tab-with-icon-background-active: var(--udexColorBlue8, #0057D2);--udex-button-tab-with-icon-color-active: var(--sapBackgroundColor, var(--udexColorNeutralWhite));--udex-button-tab-with-icon-border-color: var(--udexColorGrey3, #D5DADD);--udex-button-tab-with-icon-without-background-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-with-icon-without-background-color-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-without-background-margin-bottom: var(--udexSpacer16, 16px);--udex-button-tab-with-icon-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-tab-with-icon-text-color-active: var(--sapTextColor, --udexCoreNavigation);--udex-tab-navigation-tab-with-icon-without-background-color: transparent;--udex-tab-navigation-tab-with-icon-without-background-color-active: transparent;--udex-button-more-margin-inline-end: 0;--udex-tab-navigation-content-padding-vertical-desktop: var(--udexSpacer40, 40px);--udex-tab-navigation-content-padding-vertical-mobile: var(--udexSpacer32, 32px);--udex-tab-navigation-content-font-family: var(--sapFontFamily, sans-serif);--udex-tab-navigation-content-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-tab-navigation-content-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-navigation-content-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-tab-header-width: 428px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer{margin-bottom:var(--udex-button-tab-with-icon-without-background-margin-bottom);background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color);color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active:before{background-color:var(--udex-button-tab-with-icon-without-background-border-color-active)}:host([mode=\"Dark\"]){--udex-header-background-color: var(--sapList_GroupHeaderTextColor, var(--udexColorGrey10));--udex-button-tab-text-color-default: var(--sapList_GroupHeaderBackground, var(--udexColorNeutralWhite));--udex-button-tab-text-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-border-color-active: transparent;--udex-button-tab-with-icon-background: transparent;--udex-button-tab-with-icon-color: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-background-active: transparent;--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px)}:host([mode=\"Dark\"]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge,:host([icon-without-background]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-inline-end:-9px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer,:host([icon-without-background]) .udex-tab-navigation__button-icon{width:24px;height:24px}:host([icon-without-background]) .udex-tab-navigation__button-tab--with-icon{padding-block-end:var(--udex-button-tab-padding-vertical)}:host([icon-without-background]) .udex-tabs-navigation__button-tab{padding-bottom:var(--udex-button-tab-padding-vertical)}:host(:not([icon-without-background])) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{color:var(--udex-button-tab-with-icon-text-color-active)}:host([mode=\"Dark\"]) .udex-tab-navigation__button-icon-outer,:host([mode=\"Dark\"]) .udex-tab-navigation__button-icon{width:32px;height:32px}:host([desktop]) .udex-tab-navigation__button-tab:focus .udex-tab-navigation__button-text,.udex-tab-navigation__button-tab:focus-visible .udex-tab-navigation__button-text{outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.udex-tab-navigation__root{width:100%}.udex-tab-navigation__header{background-color:var(--udex-header-background-color);min-height:43px;display:flex;align-items:center;position:relative}.udex-tab-navigation__header:before{content:\"\";position:absolute;left:0;right:0;bottom:0;z-index:-1;border-bottom:1px solid var(--udexColorGrey3, #D5DADD)}.udex-tab-navigation__header-tabs{display:flex;flex:1 1 0%;overflow:hidden;white-space:nowrap}.udex-tab-navigation__button-tab{padding:0;display:block;background:none;border:0;border-radius:0;cursor:pointer}.udex-tab-navigation__button-tab{padding:var(--udex-button-tab-padding-vertical) var(--udex-button-tab-padding-horizontal) calc(var(--udex-button-tab-padding-vertical) + 3px);position:relative;z-index:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--udex-button-tab-text-color-default);font-size:var(--udex-button-tab-font-size-default);font-family:var(--udex-button-tab-font-family);font-weight:var(--udex-button-tab-font-weight);line-height:var(--udex-button-tab-line-height);text-decoration:none;text-align:center;text-transform:var(--udex-button-tab-text-transform);white-space:normal}.udex-tab-navigation__button-text{margin:0}.udex-tab-navigation__button-text:first-letter{text-transform:var(--udex-button-tab-text-transform-first-letter)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon{justify-content:start}.udex-tab-navigation__button-tab:not(.udex-tab-navigation__button-tab--icon-tab):hover{color:var(--udex-button-tab-text-color-hover)}.udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{font-weight:var(--udex-button-tab-with-icon-font-weight)}.udex-tab-navigation__button-tab:focus-visible{outline:none}.udex-tab-navigation__button-tab[hidden]{display:none}.udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:var(--udex-button-tab-vertical-gap)}.udex-tab-navigation__button-tab--with-icon{padding-block-end:calc(var(--udex-button-tab-padding-vertical) + 2px)}.udex-tab-navigation__button-tab--active{color:var(--udex-button-tab-text-color-active)}.udex-tab-navigation__button-tab--active:before{content:\"\";position:absolute;inset-block-end:0;inset-inline:0 0;z-index:1;height:3px;background-color:var(--udex-button-tab-border-color-active);border-radius:2px 2px 0 0}.udex-tab-navigation__button-badge{position:absolute;inset-block-start:var(--udexSpacer12);inset-inline-end:-6px;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}.udex-tab-navigation__button-more{margin-inline-start:auto;flex:0 0 auto;margin-inline-end:var(--udex-button-more-margin-inline-end)}.udex-tab-navigation__button-more[hidden]{display:none}.udex-tab-navigation__button-icon-outer{margin-left:auto;margin-right:auto;margin-bottom:var(--udex-button-tab-with-icon-margin-bottom);display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;border-radius:50%;background-color:var(--udex-button-tab-with-icon-background);color:var(--udex-button-tab-with-icon-color);box-shadow:inset 0 0 0 1px var(--udex-button-tab-with-icon-border-color);position:relative;z-index:0}.udex-tab-navigation__button-icon{width:16px;height:16px;color:var(--udex-button-tab-with-icon-color)}.udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-block-start:1px;inset-inline-end:1px}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-active);box-shadow:none}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-active)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-hover);box-shadow:none}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-hover)}.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-desktop);font-family:var(--udex-tab-navigation-content-font-family);font-size:var(--udex-tab-navigation-content-font-size);font-weight:var(--udex-tab-navigation-content-font-weight);line-height:var(--udex-tab-navigation-content-line-height)}.udex-tab-navigation__content-item:focus,.udex-tab-navigation__content-item:focus-visible{outline-offset:2px;outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.udex-tab-navigation__badge{margin-inline-start:var(--udexSpacer4);display:inline-flex}.udex-tab-navigation__button-body-text,.udex-tab-navigation__button-link{display:none}@media screen and (max-width: 979px){.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-mobile)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__root{flex-direction:column}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header{flex:0 0 100%}:host([orientation=\"Vertical\"]) .udex-tab-navigation__content{flex:0 0 100%;padding-inline-start:0}:host([orientation=\"Vertical\"])>.udex-tab-navigation__root>.udex-tab-navigation__content{display:none}}:host([orientation=\"Vertical\"]) .udex-tab-navigation__root{display:flex;gap:var(--udexSpacer24, 24px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header{flex-direction:column;align-items:stretch;min-height:auto;height:auto;flex:0 0 25%;width:100%;max-height:none;align-self:var(--udex-tab-navigation-header-alignment, flex-start)}:host([orientation=\"Vertical\"][vertical-alignment=\"Center\"]){--udex-tab-navigation-header-alignment: center}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header:before{display:none}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs{flex-direction:column;gap:var(--udexSpacer16, 16px);overflow:visible;white-space:normal;max-height:none;border-inline-start:1px solid var(--udexColorGrey3, #D5DADD)}@media screen and (max-width: 979px){:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs{gap:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-tab:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__tab-wrapper:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation=\"Vertical\"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-link:not(:last-child):not(:has(+.udex-tab-navigation__content)){margin-block-end:var(--udexSpacer8, 8px)}}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab{padding:var(--udexSpacer16, 16px);align-items:flex-start;width:100%;height:auto;min-height:auto;margin-inline-end:0;transition:all .2s ease-in}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:0}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab--active{padding:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab--active:before{content:\"\";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--udexSpacer16, 16px);padding:var(--udexSpacer16, 16px);transition:all .2s ease-in}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active){padding:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active):before{content:\"\";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab{padding:0}:host([orientation=\"Vertical\"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab--active:before{display:none}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-badge{inset-block-start:0;inset-inline-end:-10px}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-text{position:relative;font-size:var(--udexTypographyHeadingRegularXXSFontSize, 20px);line-height:1.1;font-weight:var(--udexTypographyFontWeightMedium);text-align:start}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-body-text{display:none;margin:0;font-family:var(--udex-button-tab-font-family);font-size:var(--udexTypographyBodyXSFontSize, 14px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udexColorGrey7);line-height:var(--udex-tab-navigation-content-line-height);text-align:start}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-body-text{display:block}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-links{display:none;flex-direction:column;gap:var(--udexSpacer2, 2px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-links{display:flex}:host([orientation=\"Vertical\"]) .udex-tab-navigation__content{flex:1 1 75%;padding-block-start:0;padding-inline-start:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"][placement=\"End\"]) .udex-tab-navigation__header{order:1}:host([orientation=\"Vertical\"]) .udex-tab-navigation__play-button{margin-block-end:var(--udexSpacer16, 16px)}:host([orientation=\"Vertical\"]) .udex-tab-navigation__footer{margin-block-start:var(--udex-tab-navigation-footer-spacing, var(--udexSpacer20, 20px));padding-inline-start:var(--udexSpacer16, 16px)}:host([process-tab]){--udex-button-tab-process-item-count-font-size: var(--udexTypographyNavigationRegularXSFontSize, 12px);--udex-button-tab-process-item-count-font-weight: var(--udexTypographyFontWeightRegular, 400)}:host([process-tab]) .udex-tab-navigation__button-tab--process{flex-direction:row;align-items:flex-start;padding:var(--udexSpacer12, 12px) 0 calc(var(--udexSpacer12, 12px) + 3px);gap:var(--udexSpacer8, 8px)}:host([process-tab]) .udex-tab-navigation__button-tab--process:not(:last-child){margin-inline-end:var(--udexSpacer32, 32px)}:host([process-tab]) .udex-tab-navigation__button-tab--process .udex-tab-navigation__button-icon-outer{flex-shrink:0;margin:0;align-self:center}:host([process-tab]) .udex-tab-navigation__button-text-block{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--udexSpacer4, 4px)}:host([process-tab]) .udex-tab-navigation__button-item-count{display:block;font-size:var(--udex-button-tab-process-item-count-font-size);font-weight:var(--udex-button-tab-process-item-count-font-weight);line-height:1.1;color:var(--udexColorGrey7, #475E75)}:host([process-tab]) .udex-tab-navigation__button-text-block .udex-tab-navigation__button-text{text-align:start;font-weight:var(--udex-button-tab-font-weight);font-size:var(--udex-button-tab-font-size-default)}\n`"]}

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

@@ -211,6 +211,11 @@
           "name": "show-items",
           "description": "Defines how many breadcrumb items should be visible",
           "values": []
+        },
+        {
+          "name": "show-current-page",
+          "description": "Defines whether the current page item is displayed in the main navigation path.\nWhen set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.\nBy default, the current page is hidden from the main path and only visible in the dropdown.",
+          "values": []
         }
       ],
       "references": []
@@ -3924,6 +3929,11 @@
             { "name": "_self" },
             { "name": "_top" }
           ]
+        },
+        {
+          "name": "item-count-text",
+          "description": "Defines the item count text displayed above the tab label in Process Tab variant.\nOnly rendered when the tab navigation uses the Process Tab variant.",
+          "values": []
         }
       ],
       "references": []
@@ -3969,7 +3979,12 @@
         },
         {
           "name": "icon-without-background",
-          "description": "Defines the background color of the component.",
+          "description": "!DEPRECATED! Defines the background color of the component.",
+          "values": []
+        },
+        {
+          "name": "process-tab",
+          "description": "Enables the Process Tab variant, where each tab displays an icon\nalongside an optional item count text above the label.",
           "values": []
         }
       ],

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.32.0",
+  "version": "2.33.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -440,6 +440,11 @@
               "name": "show-items",
               "description": "Defines how many breadcrumb items should be visible",
               "value": { "type": "number", "default": "3" }
+            },
+            {
+              "name": "show-current-page",
+              "description": "Defines whether the current page item is displayed in the main navigation path.\nWhen set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.\nBy default, the current page is hidden from the main path and only visible in the dropdown.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -465,6 +470,11 @@
                 "name": "show-items",
                 "description": "Defines how many breadcrumb items should be visible",
                 "value": { "type": "number" }
+              },
+              {
+                "name": "show-current-page",
+                "description": "Defines whether the current page item is displayed in the main navigation path.\nWhen set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.\nBy default, the current page is hidden from the main path and only visible in the dropdown.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
@@ -8447,6 +8457,11 @@
               "value": {
                 "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
               }
+            },
+            {
+              "name": "item-count-text",
+              "description": "Defines the item count text displayed above the tab label in Process Tab variant.\nOnly rendered when the tab navigation uses the Process Tab variant.",
+              "value": { "type": "string | undefined" }
             }
           ],
           "slots": [
@@ -8508,6 +8523,11 @@
                 "value": {
                   "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
                 }
+              },
+              {
+                "name": "item-count-text",
+                "description": "Defines the item count text displayed above the tab label in Process Tab variant.\nOnly rendered when the tab navigation uses the Process Tab variant.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -8564,7 +8584,12 @@
             },
             {
               "name": "icon-without-background",
-              "description": "Defines the background color of the component.",
+              "description": "!DEPRECATED! Defines the background color of the component.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "process-tab",
+              "description": "Enables the Process Tab variant, where each tab displays an icon\nalongside an optional item count text above the label.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -8627,7 +8652,12 @@
               },
               {
                 "name": "icon-without-background",
-                "description": "Defines the background color of the component.",
+                "description": "!DEPRECATED! Defines the background color of the component.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "process-tab",
+                "description": "Enables the Process Tab variant, where each tab displays an icon\nalongside an optional item count text above the label.",
                 "value": { "type": "boolean" }
               }
             ],

package/package.json

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

package/src/Breadcrumbs.ts

@@ -4,7 +4,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import { isTabNext, isTabPrevious, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -20,8 +20,10 @@ import {
   AVAILABLE_VALUES,
   BREADCRUMBS_ARIA_LABEL,
   BREADCRUMBS_OVERFLOW_ARIA_LABEL,
+  OF,
 } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -105,6 +107,17 @@ class UDExBreadcrumbs extends UI5Element {
   @property({ type: Number })
     showItems: number = 3;
 
+  /**
+   * Defines whether the current page item is displayed in the main navigation path.
+   * When set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.
+   * By default, the current page is hidden from the main path and only visible in the dropdown.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    showCurrentPage: boolean = false;
+
   /**
    * Indicates if dropdown is opened
    *
@@ -112,7 +125,7 @@ class UDExBreadcrumbs extends UI5Element {
    * @private
    */
   @property({ noAttribute: true, type: Boolean })
-    _dropdownOpened!: boolean;
+    _dropdownOpened: boolean = false;
 
   /**
    * Defines the component items.
@@ -249,11 +262,6 @@ class UDExBreadcrumbs extends UI5Element {
       e.preventDefault();
       this._dropdownArrowLink.focus();
       this._toggleDropdown();
-      return;
-    }
-
-    if (isEscape(e)) {
-      this._toggleDropdown();
     }
   }
 
@@ -313,6 +321,13 @@ class UDExBreadcrumbs extends UI5Element {
     return this._getItems().filter(i => this._isItemVisible(i));
   }
 
+  get _triggerAccessibilityAttributes(): Pick<AccessibilityAttributes, "hasPopup" | "expanded"> {
+    return {
+      hasPopup: "listbox" as const,
+      expanded: this._dropdownOpened ? "true" : "false",
+    };
+  }
+
   get _triggerClass(): string {
     const rootClass = "udex-breadcrumbs";
     return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;
@@ -329,6 +344,10 @@ class UDExBreadcrumbs extends UI5Element {
   get _dropdownAccessibleNameText(): string {
     return translate(UDExBreadcrumbs, AVAILABLE_VALUES);
   }
+
+  get _ofText(): string {
+    return translate(UDExBreadcrumbs, OF);
+  }
 }
 
 UDExBreadcrumbs.define();

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -4,6 +4,10 @@ import UDExLink from "./Link.js";
 import { Placement, HorizontalAlign } from "./types/Dropdown.js";
 
 export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
+  const focusableCount = this._dropdownItems.filter(i => !i._isCurrentPageItem).length;
+  const ofText = this._ofText;
+  let focusablePos = 0;
+
   return (
     <UDExDropdown
       id={`udex-${this._id}-breadcrumbs__popover`}
@@ -15,47 +19,55 @@ export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
       onKeyDown={this._handleKeydown}
       onClose={this._afterDropdownClose}
       onOpen={this._afterDropdownOpen}>
-      <div className={`${this._rootClass}__popover-content`}>
-        {this._dropdownItems.map((item, index) => (
-          item.icon ? (
-            <UDExLink
-              key={index}
-              data-index={index}
-              id={`${item._id}-li`}
-              onClick={this._onDropdownLinkPress}
-              href={item.href}
-              target={item.target}
-              class={`${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
-              icon={item.icon}
-              accessibleName={item.textContent ?? undefined}
-              data-ui5-stable={item.stableDomRef}>
-              {item.textContent}
-            </UDExLink>
-          ) : item._isCurrentPageItem ? (
-            <span
-              key={index}
-              id={`${item._id}-li`}
-              className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
-              accessible-name={item.accessibleName}
-              data-ui5-stable={item.stableDomRef}>
-              {item.textContent}
-            </span>
-          ) : (
-            <UDExLink
-              key={index}
-              data-index={index}
-              id={`${item._id}-li`}
-              onClick={this._onDropdownLinkPress}
-              href={item.href}
-              target={item.target}
-              class={`${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
-              accessibleName={item.accessibleName}
-              data-ui5-stable={item.stableDomRef}>
-              {item.textContent}
-            </UDExLink>
-          )
-        ))}
-      </div>
+      <nav className={`${this._rootClass}__popover-content`} aria-label={this._breadcrumbsAccessibleNameText}>
+        <ol>
+          {this._dropdownItems.map((item, index) => {
+            if (!item._isCurrentPageItem) { focusablePos++; }
+            const posLabel = `${item.accessibleName || item.textContent || ""}, ${focusablePos} ${ofText} ${focusableCount}`;
+            return item._isCurrentPageItem ? (
+              <li key={index} aria-hidden="true">
+                <span
+                  id={`${item._id}-li`}
+                  className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+                  aria-current="page"
+                  accessible-name={item.accessibleName}
+                  data-ui5-stable={item.stableDomRef}>
+                  {item.textContent}
+                </span>
+              </li>
+            ) : (
+              <li key={index}>
+                {item.icon ? (
+                  <UDExLink
+                    data-index={index}
+                    id={`${item._id}-li`}
+                    onClick={this._onDropdownLinkPress}
+                    href={item.href}
+                    target={item.target}
+                    class={`${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+                    icon={item.icon}
+                    accessibleName={posLabel}
+                    data-ui5-stable={item.stableDomRef}>
+                    {item.textContent}
+                  </UDExLink>
+                ) : (
+                  <UDExLink
+                    data-index={index}
+                    id={`${item._id}-li`}
+                    onClick={this._onDropdownLinkPress}
+                    href={item.href}
+                    target={item.target}
+                    class={`${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+                    accessibleName={posLabel}
+                    data-ui5-stable={item.stableDomRef}>
+                    {item.textContent}
+                  </UDExLink>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
     </UDExDropdown>
   );
 }

package/src/BreadcrumbsTemplate.tsx

@@ -20,30 +20,44 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
               onClick={this._toggleDropdown}
               accessibleName={this._dropdownArrowAccessibleNameText}
               accessibleRole={UDExButtonAccessibleRole.Button}
-              icon={slimArrowDown}
-              aria-haspopup="true">
+              accessibilityAttributes={this._triggerAccessibilityAttributes}
+              icon={slimArrowDown}>
             </UDExLink>
           </li>
           {this._linksData.map(linkData =>
-            <li
-              class={`${this._rootClass}__link-wrapper ui5-breadcrumbs-link-wrapper`}
-              id={`${linkData._id}-link-wrapper`}>
-              {!linkData._isCurrentPageItem && (
-                <>
-                  <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
-                  <UDExLink
-                    onClick={this._onLinkPress}
-                    id={`${linkData._id}-link`}
-                    class={`${rootClass}__item ${this._rootClass}__item--visible`}
-                    href={linkData.href}
-                    target={linkData.target}
-                    accessibleName={linkData._accessibleNameText}
-                    data-ui5-stable={linkData.stableDomRef}>
-                    {linkData.innerText}
-                  </UDExLink>
-                </>
-              )}
-            </li>
+            (linkData._isCurrentPageItem && !this.showCurrentPage ? null : (
+              <li
+                role={linkData._isCurrentPageItem ? "presentation" : undefined}
+                class={`${this._rootClass}__link-wrapper ui5-breadcrumbs-link-wrapper`}
+                id={`${linkData._id}-link-wrapper`}>
+                {linkData._isCurrentPageItem ? (
+                  <>
+                    <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                    <span
+                      id={`${linkData._id}-link`}
+                      class={`${rootClass}__item ${this._rootClass}__item--visible ${this._rootClass}__item--current-page`}
+                      aria-current="page"
+                      data-ui5-stable={linkData.stableDomRef}>
+                      {linkData.textContent}
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                    <UDExLink
+                      onClick={this._onLinkPress}
+                      id={`${linkData._id}-link`}
+                      class={`${rootClass}__item ${this._rootClass}__item--visible`}
+                      href={linkData.href}
+                      target={linkData.target}
+                      accessibleName={linkData._accessibleNameText}
+                      data-ui5-stable={linkData.stableDomRef}>
+                      {linkData.textContent}
+                    </UDExLink>
+                  </>
+                )}
+              </li>
+            ))
           )}
         </ol>
       </nav>

package/src/HeroBanner.ts

@@ -5,8 +5,6 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/media-play.js";
-import "@ui5/webcomponents-icons/dist/media-pause.js";
 import HeroBannerTemplate from "./HeroBannerTemplate.js";
 
 // Styles
@@ -178,9 +176,6 @@ class UDExHeroBanner extends UI5Element {
     return !!this.backgroundPicture?.length;
   }
 
-  get mediaButtonIconName() {
-    return this._isVideoRunning ? "media-pause" : "media-play";
-  }
   get _video() {
     return this.shadowRoot?.querySelector<HTMLVideoElement>("video");
   }

package/src/HeroBannerTemplate.tsx

@@ -1,8 +1,13 @@
 import type HeroBanner from "./HeroBanner.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/play.js";
+import "@ui5/webcomponents-icons/dist/pause.js";
+import playIcon from "@ui5/webcomponents-icons/play.js";
+import pauseIcon from "@ui5/webcomponents-icons/pause.js";
 
 export default function HeroBannerTemplate(this: HeroBanner) {
   const rootClass = "udex-hero-banner";
+  const btnIcon = this._isVideoRunning ? playIcon : pauseIcon;
 
   return (
     <div
@@ -55,7 +60,7 @@ export default function HeroBannerTemplate(this: HeroBanner) {
             aria-label="Play / Pause button"
             role="button"
             onClick={this._toggleMediaButton}>
-            <UI5Icon name={this.mediaButtonIconName}></UI5Icon>
+            <UI5Icon name={btnIcon}></UI5Icon>
           </button>
         </div>
       ) : (

package/src/ListItem.hbs

@@ -91,24 +91,28 @@
                     <slot part="content"></slot>
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
-                {{#if hasFirstIcon}}
-                  <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
-                {{#if hasSecondIcon}}
-                  <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
+                <div class="udex-list__btn-wrap">
+                    {{#if hasFirstIcon}}
+                        <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                    {{#if hasSecondIcon}}
+                        <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                </div>
             {{else}}
                 <div class="udex-list__text-holder">
                     <slot part="content"></slot>
                     {{#if supportingText}}<span class="udex-list__supporting-text" part="supporting">{{supportingText}}</span>{{/if}}
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
-                {{#if hasFirstIcon}}
-                    <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
-                {{#if hasSecondIcon}}
-                    <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
+                <div class="udex-list__btn-wrap">
+                    {{#if hasFirstIcon}}
+                        <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                    {{#if hasSecondIcon}}
+                        <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                </div>
             {{/if}}
             {{#if collapsible}}
               <div class="udex-list__group-heading__icon-wrapper">

package/src/SecondaryNavigation.hbs

@@ -10,6 +10,7 @@
                 {{#if headingHref.length}}
                     <a
                         class="udex-secondary-navigation__title"
+                        tabindex="0"
                         @click="{{handleHeadingClick}}"
                         href="{{headingHref}}">
                         {{heading}}
@@ -19,14 +20,12 @@
                 {{/if}}
             </div>
         {{/if}}
-        <div class="udex-secondary-navigation__wrap">
+        <nav class="udex-secondary-navigation__wrap">
             <ul
-                role="menubar"
                 class="udex-secondary-navigation__list"
                 @keydown="{{handleKeyDown}}">
                 {{#each visibleItems}}
                     <li
-                        role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
                             index="{{@index}}"
@@ -44,7 +43,6 @@
                 {{/each}}
                 {{#if _showMoreButton}}
                     <li
-                        role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
                             _nav-items-length="{{visibleItems.length}}"
@@ -60,7 +58,7 @@
             {{#if hasDesktopButtonsSlot}}
                 {{>buttons}}
             {{/if}}
-        </div>
+        </nav>
     </div>
     <udex-secondary-navigation-item
         @keydown="{{handleKeyDown}}"
@@ -75,7 +73,9 @@
         _is-mobile-menu-opener
         .subItems="{{this.parsedItems}}">
         {{#if hasMobileButtonsSlot}}
-            {{>buttons}}
+            <div class="udex-secondary-navigation__buttons" @click="{{handleMobileButtonsClick}}">
+                <slot name="buttons"></slot>
+            </div>
         {{/if}}
     </udex-secondary-navigation-item>
 </div>