@sapudex/web-components 0.111.0

package/src/themes/SegmentedButtonItem.css

@@ -0,0 +1,238 @@
+:host {
+  --udex-segmented-button-item-font-weight: 500;
+  --udex-segmented-button-item-small-padding: 4px 5px; /* include 1px of border each side */
+  --udex-segmented-button-item-medium-padding: 9px; /* include 1px of border each side */
+  --udex-segmented-button-item-large-padding: 11px; /* include 1px of border each side */
+  --udex-segmented-button-item-with-text-small-padding: 5px 10px 5px 10px; /* include 1px of border each side */
+  --udex-segmented-button-item-with-text-medium-padding: 9px 10px; /* include 1px of border each side */
+  --udex-segmented-button-item-with-text-large-padding: 12px 14px; /* include 1px of border each side */
+  --udex-segmented-button-item-small-height: 25px;
+  --udex-segmented-button-item-small-width: 25px;
+  --udex-segmented-button-item-medium-height: 36px;
+  --udex-segmented-button-item-medium-width: 36px;
+  --udex-segmented-button-item-large-height: 42px;
+  --udex-segmented-button-item-large-width: 42px;
+  --udex-segmented-button-item-small-icon-size: 14px;
+  --udex-segmented-button-item-medium-icon-size: 16px;
+  --udex-segmented-button-item-large-icon-size: 18px;
+  --udex-segmented-button-item-small-line-height: 15x;
+  --udex-segmented-button-item-medium-line-height: 18px;
+  --udex-segmented-button-item-border-radius: var(--udexRadiusM, 8px);
+  --udex-segmented-button-item-color: var(--udexColorBlue9, #0040B0);
+  --udex-segmented-button-item-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-segmented-button-item-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-segmented-button-item-hover-color: var(--udexColorBlue9, #0040B0);
+  --udex-segmented-button-item-hover-border-color: var(--udexColorGrey7, #475E75);
+  --udex-segmented-button-item-hover-background-color: var(--udexColorGrey2, #EAECEE);
+  --udex-segmented-button-item-selected-color: var(--udexColorBlue9, #0040B0);
+  --udex-segmented-button-item-selected-border-color: var(--udexColorBlue9, #0040B0);
+  --udex-segmented-button-item-selected-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-segmented-button-item-active-color: var(--udexColorBlue9, #0040B0);
+  --udex-segmented-button-item-active-border-color: var(--udexColorBlue9, #0040B0);
+  --udex-segmented-button-item-active-background-color: var(--udexColorNeutralWhite, var(--sapButton_BorderColor));
+  --udex-segmented-button-item-warning-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-segmented-button-item-warning-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-segmented-button-item-warning-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-segmented-button-item-error-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-segmented-button-item-error-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-segmented-button-item-error-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-segmented-button-item-success-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-segmented-button-item-success-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-segmented-button-item-success-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-segmented-button-item-warning-active-background-color: var(--udexColorNeutralWhite, var(--sapButton_Attention_Background));
+  --udex-segmented-button-item-warning-active-border-color: var(--udexColorMango6, var(--sapButton_Attention_BorderColor));
+  --udex-segmented-button-item-warning-active-color: var(--udexColorMango9, var(--sapButton_Attention_TextColor));
+  --udex-segmented-button-item-error-active-background-color: var(--udexColorNeutralWhite, var(--sapButton_Reject_Background));
+  --udex-segmented-button-item-error-active-border-color: var(--udexColorRed4, var(--sapButton_Attention_BorderColor));
+  --udex-segmented-button-item-error-active-color: var(--udexColorRed9, var(--sapButton_Attention_TextColor));
+  --udex-segmented-button-item-success-active-background-color: var(--udexColorNeutralWhite, var(--sapButton_Accept_Background));
+  --udex-segmented-button-item-success-active-border-color: var(--udexColorGreen6, var(--sapButton_Attention_BorderColor));
+  --udex-segmented-button-item-success-active-color: var(--udexColorGreen9, var(--sapButton_Attention_TextColor));
+  --udex-segmented-button-item-warning-selected-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-segmented-button-item-warning-selected-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-segmented-button-item-warning-selected-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-segmented-button-item-error-selected-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-segmented-button-item-error-selected-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-segmented-button-item-error-selected-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-segmented-button-item-success-selected-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-segmented-button-item-success-selected-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-segmented-button-item-success-selected-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-segmented-button-item-small-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-segmented-button-item-medium-font-size: var(--sapFontSize, 16px);
+}
+
+:host([design="Default"]),
+:host{
+  background-color: var(--udex-segmented-button-item-background-color);
+  border: var(--sapButton_BorderWidth) solid var(--udex-segmented-button-item-border-color);
+  color: var(--udex-segmented-button-item-color);
+  border-radius: var(--udex-segmented-button-item-border-radius);
+  height: var(--udex-segmented-button-item-medium-height);
+  min-width: var(--udex-segmented-button-item-medium-width);
+  font-weight: var(--udex-segmented-button-item-font-weight);
+}
+
+.ui5-button-root {
+  padding: var(--udex-segmented-button-item-with-text-medium-padding);
+}
+
+:host([has-icon]) .ui5-button-root {
+  padding: var(--udex-segmented-button-item-medium-padding);
+}
+
+:host([size="Large"]) {
+  height: var(--udex-segmented-button-item-large-height);
+  min-width: var(--udex-segmented-button-item-large-width);
+  font-size: var(--udex-segmented-button-item-medium-font-size);
+}
+
+:host([size="Medium"]) {
+  height: var(--udex-segmented-button-item-medium-height);
+  min-width: var(--udex-segmented-button-item-medium-width);
+  font-size: var(--udex-segmented-button-item-medium-font-size);
+}
+
+:host([size="Small"]) {
+  height: var(--udex-segmented-button-item-small-height);
+  min-width: var(--udex-segmented-button-item-small-width);
+  font-size: var(--udex-segmented-button-item-small-font-size);
+}
+
+:host([size="Small"][has-icon]) .ui5-button-root {
+  padding: var(--udex-segmented-button-item-small-padding);
+}
+
+:host([size="Medium"][has-icon]) .ui5-button-root {
+  padding: var(--udex-segmented-button-item-medium-padding);
+}
+
+:host([size="Large"][has-icon]) .ui5-button-root {
+  padding: var(--udex-segmented-button-item-large-padding);
+}
+
+:host([size="Small"]) .ui5-button-root {
+  padding: var(--udex-segmented-button-item-with-text-small-padding);
+}
+
+:host([size="Medium"]) .ui5-button-root {
+  padding: var(--udex-segmented-button-item-with-text-medium-padding);
+}
+
+:host([size="Large"]) .ui5-button-root {
+  padding: var(--udex-segmented-button-item-with-text-large-padding);
+}
+
+:host([design="Success"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Error"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Warning"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover), :host(:not([hidden]):not([disabled]).ui5_hovered),
+:host([design="Default"][pressed]:hover), :host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+  background: var(--udex-segmented-button-item-hover-background-color);
+  border: 1px solid var(--udex-segmented-button-item-hover-border-color);
+  color: var(--udex-segmented-button-item-hover-color);
+}
+
+.ui5-button-icon {
+  height: var(--udex-segmented-button-item-medium-icon-size);
+  width: var(--udex-segmented-button-item-medium-icon-size);
+}
+
+:host([size="Small"]) .ui5-button-icon {
+  height: var(--udex-segmented-button-item-small-icon-size);
+  width: var(--udex-segmented-button-item-small-icon-size);
+}
+
+:host([size="Large"]) .ui5-button-icon {
+  height: var(--udex-segmented-button-item-large-icon-size);
+  width: var(--udex-segmented-button-item-large-icon-size);
+}
+
+:host([pressed]), :host([design="Default"][pressed]),
+:host([pressed]:not([active]):not([non-interactive]):not([_is-touch])),
+:host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+  background: var(--udex-segmented-button-item-selected-background-color);
+  border: 1px solid var(--udex-segmented-button-item-selected-border-color);
+  color: var(--udex-segmented-button-item-selected-color);
+}
+
+:host([active]), :host([active][focused]), :host([active][pressed]), :host([design="Default"][active]), :host([design="Default"][pressed][active]):not([non-interactive]):not([_is-touch]), :host([design="Default"][active][focused]) {
+  color: var(--udex-segmented-button-item-active-color);
+  border-color: var(--udex-segmented-button-item-active-border-color);
+  background-color: var(--udex-segmented-button-item-active-background-color);
+}
+
+:host([design="Success"]) {
+  background-color: var(--udex-segmented-button-item-success-background-color);
+  border-color: var(--udex-segmented-button-item-success-border-color);
+  color: var(--udex-segmented-button-item-success-color);
+}
+
+:host([design="Error"]) {
+  background-color: var(--udex-segmented-button-item-error-background-color);
+  border-color: var(--udex-segmented-button-item-error-border-color);
+  color: var(--udex-segmented-button-item-error-color);
+}
+
+:host([design="Warning"]) {
+  background-color: var(--udex-segmented-button-item-warning-background-color);
+  border-color: var(--udex-segmented-button-item-warning-border-color);
+  color: var(--udex-segmented-button-item-warning-color);
+}
+
+:host([design="Success"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+  background-color: var(--udex-segmented-button-item-success-selected-background-color);
+  border-color: var(--udex-segmented-button-item-success-selected-border-color);
+  color: var(--udex-segmented-button-item-success-selected-color);
+}
+
+:host([design="Error"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+  background-color: var(--udex-segmented-button-item-error-selected-background-color);
+  border-color: var(--udex-segmented-button-item-error-selected-border-color);
+  color: var(--udex-segmented-button-item-error-selected-color);
+}
+
+:host([design="Warning"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+  background-color: var(--udex-segmented-button-item-warning-selected-background-color);
+  border-color: var(--udex-segmented-button-item-warning-selected-border-color);
+  color: var(--udex-segmented-button-item-warning-selected-color);
+}
+
+:host([design="Success"][active]) {
+  background-color: var(--udex-segmented-button-item-success-active-background-color);
+  border-color: var(--udex-segmented-button-item-success-active-border-color);
+  color: var(--udex-segmented-button-item-success-active-color);
+}
+
+:host([design="Error"][active]) {
+  background-color: var(--udex-segmented-button-item-error-active-background-color);
+  border-color: var(--udex-segmented-button-item-error-active-border-color);
+  color: var(--udex-segmented-button-item-error-active-color);
+}
+
+:host([design="Warning"][active]) {
+  background-color: var(--udex-segmented-button-item-warning-active-background-color);
+  border-color: var(--udex-segmented-button-item-warning-active-border-color);
+  color: var(--udex-segmented-button-item-warning-active-color);
+}
+
+:host([disabled]), :host([disabled][focused]), :host([disabled][pressed]), :host([design="Default"][disabled]), :host([design="Transparent"][disabled]), :host([design="Emphasized"][disabled]) {
+  color: var(--udex-segmented-button-item-color);
+  border-color: transparent;
+  background-color: var(--udex-segmented-button-item-background-color);
+}
+
+.ui5-button-text bdi {
+  display: flex;
+  align-items: center;
+  line-height: var(--udex-segmented-button-item-medium-line-height);
+}
+
+:host([size="Small"]) .ui5-button-text bdi {
+  line-height: var(--udex-segmented-button-item-small-line-height);
+}
+
+:host([size="Medium"]) .ui5-button-text bdi, :host([size="Large"]) .ui5-button-text bdi {
+  line-height: var(--udex-segmented-button-item-medium-line-height);
+}
+
+

package/src/themes/SelectBox.css

@@ -0,0 +1,259 @@
+:host([disabled]) .udex-text-field__trigger,
+:host([readonly]) .udex-text-field__trigger {
+  cursor: inherit;
+}
+
+:host([displayonly]) .udex-text-field__token {
+  margin-inline-end: 0;
+  position: relative;
+}
+
+:host([displayonly]:dir(rtl)) .udex-text-field__token:not(:first-child):before {
+  left: auto;
+  right: -2px;
+}
+
+:host([displayonly]) .udex-text-field__token:not(:first-child):before {
+  content: '';
+  position: absolute;
+  top: 9px;
+  left: -2px;
+  display: block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  z-index: 1;
+  background: var(--udexColorGrey7, #475E75);
+}
+
+:host([displayonly]) .udex-text-field__input {
+  overflow: hidden;
+}
+
+:host([displayonly]) udex-tag {
+  --udex-tags-grey-read-only-caption-color: var(--udexColorGrey9, #223548);
+}
+
+.udex-text-field__input:not([readonly]):not([disabled]) .udex-text-field__trigger:hover {
+  border-left: 1px solid var(--udexColorGrey4, #A9B4BE);
+}
+
+.udex-text-field__input[open]:not([readonly]):not([disabled]) .udex-text-field__trigger:hover,
+.udex-text-field__input[open]:not([readonly]) .udex-text-field__trigger {
+  border-left: 1px solid var(--udexColorBlue4, #89D1FF);
+}
+
+:host(:dir(rtl)) .udex-text-field__input:not([readonly]) .udex-text-field__trigger:hover {
+  border-right: 1px solid var(--udexColorGrey4, #A9B4BE);
+  border-left: none;
+}
+
+:host(:dir(rtl)) .udex-text-field__input[open]:not([readonly]) .udex-text-field__trigger {
+  border-right: 1px solid var(--udexColorBlue4, #89D1FF);
+  border-left: none;
+}
+
+:host([displayonly]:dir(rtl)) .udex-text-field__label {
+  right: 0;
+}
+
+:host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__icon {
+  color:  var(--udexCoreSemanticError9, #840606);
+}
+
+:host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
+:host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-left: 1px solid var(--udexCoreSemanticError4, #FF8CB2);
+}
+
+:host([value-state="Error"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-right: 1px solid var(--udexCoreSemanticError4, #FF8CB2);
+  border-left: none;
+}
+
+:host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__icon {
+  color: var(--udexCoreSemanticSuccess9, #1E592F);
+}
+
+:host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
+:host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-left: 1px solid var(--udexCoreSemanticSuccess6, #36a41d);
+}
+
+:host([value-state="Success"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-right: 1px solid var(--udexCoreSemanticSuccess6, #36a41d);
+  border-left: none;
+}
+
+:host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__icon {
+  color: var(--udexCoreSemanticWarning9, #8D2A00);
+}
+
+:host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
+:host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-left: 1px solid var(--udexCoreSemanticWarning6, #E76500);
+}
+
+:host([value-state="Warning"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-right: 1px solid var(--udexCoreSemanticWarning6, #E76500);
+  border-left: none;
+}
+
+:host([mode="SingleSelect"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover {
+  cursor: pointer;
+}
+
+.udex-text-field__label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.udex-text-field__label_active {
+  position: absolute;
+  top: 9px;
+  left: 12px;
+  max-width: max-content;
+}
+
+.udex-text-field__input {
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.udex-text-field__trigger {
+  cursor: pointer;
+  height: 42px;
+  min-width: 42px;
+  border-radius: var(--udexRadiusXS);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: auto;
+  z-index: 1;
+}
+
+.udex-text-field__text-holder {
+  display: flex;
+  overflow: hidden;
+  padding: var(--udexSpacer8) var(--udexSpacer12);
+}
+
+:host([displayonly]) .udex-text-field__text-holder {
+  padding: var(--udexSpacer8) 0;
+}
+
+.udex-text-field__single-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.udex-text-field__single-label b {
+  font-weight: normal;
+}
+
+.udex-text-field__tokenizer {
+  border: none;
+  width: auto;
+  min-width: 100px;
+  max-width: calc(100% - 42px - var(--udexSpacer8));
+}
+
+.udex-text-field__token {
+  margin-inline-end: var(--udexSpacer8);
+  max-width: 100%;
+  display: flex;
+}
+
+.udex-text-field__token:last-child {
+  margin-inline-end: 0;
+}
+
+[overflows].udex-text-field__token {
+  display: none;
+}
+
+[readonly] .udex-text-field__tokenizer,
+[disabled] .udex-text-field__tokenizer {
+  pointer-events: none;
+}
+
+:host([displayonly]) .udex-text-field__tokenizer {
+  margin-inline-start: -20px;
+}
+
+:host .udex-text-field__icon {
+  margin-inline-end: 0;
+  color: var(--udexColorGrey7, #475E75);
+}
+
+:host .udex-text-field__input[open] .udex-text-field__icon {
+  color: var(--udexColorBlue9, #0040B0);
+}
+
+:host([displayonly]:dir(rtl))::part(n-more-text):before {
+  left: auto;
+  right: -10px;
+}
+
+:host([displayonly])::part(n-more-text):before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: -10px;
+  display: block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  z-index: 1;
+  background: var(--udexColorGrey7, #475E75);
+}
+
+:host([readonly])::part(n-more-text) {
+  color: var(--udexColorGrey6 ,#5B738B);
+}
+
+:host([displayonly])::part(n-more-text) {
+  position: relative;
+  margin-inline-start: 9px;
+}
+
+:host([displayonly]) .udex-text-field__label {
+  left: 0;
+}
+
+.udex-truncatable-tag-content {
+  display: flex;
+  align-items: center;
+  padding: var(--udexSpacer12, 12px) var(--udexSpacer12, 12px);
+}
+
+.udex-truncatable-tag-content__label {
+  font-size: var(--udexTypographyBodySFontSize);
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+  padding-inline-end: var(--udexSpacer8, 8px);
+  color: var(--udexCoreTextDark, #223548);
+}
+
+.udex-truncatable-tag-content__icon {
+  min-width: 1.2rem;
+  height: 1.2rem;
+  font-size: 1.5rem;
+  fill: var(--udexColorBlue7, #0070F2);
+  cursor: pointer;
+}
+
+.udex-select-box__overflow-tags {
+  font-size: var(--udexTypographyBodyXXSFontSize);
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+  color: var(--udexCoreTextDark, #223548);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

package/src/themes/SideNavigation.css

@@ -0,0 +1,68 @@
+:host {
+  --udex-side-navigation-box-shadow: none;
+  --udex-side-navigation-padding: var(--udexSpacer40);
+  --udex-side-navigation-navigation-separator-radius: 0;
+  --udex-side-navigation-navigation-separator-background-color: var(--udexCoreDividerLight);
+  --udex-side-navigation-navigation-separator-height: 1px;
+  --udex-side-navigation-navigation-separator-margin: var(--udexSpacer16) 0;
+  --udex-grid-gutter: 3rem;
+  --udex-grid-margin-m: 4.5rem;
+  --udex-grid-margin-l: 4.5rem;
+  --udex-grid-margin-xl: 5.25rem;
+  --udex-column-width-m: calc((100% - (2 * var(--udex-grid-margin-m)) - (11 * var(--udex-grid-gutter))) / 12);
+  --udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);
+  --udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);
+  --udex-side-navigation-max-width-m: calc(4 * var(--udex-column-width-m) + 3 * var(--udex-grid-gutter));
+  --udex-side-navigation-max-width-l: calc(3 * var(--udex-column-width-l) + 2 * var(--udex-grid-gutter));
+  --udex-side-navigation-max-width-xl: calc(3 * var(--udex-column-width-xl) + 2 * var(--udex-grid-gutter));
+  --udex-side-navigation-max-width: var(--udex-side-navigation-max-width-m);
+  font-size: var(--udexTypographyNavigationMediumMFontSize);
+}
+
+:host([fixed-in-place="true"]) {
+  position: sticky;
+  top: 0;
+}
+
+:host(:not([hidden])) {
+  box-shadow: var(--udex-side-navigation-box-shadow);
+  font-family: var(--sapFontFamily);
+  width: 100%;
+  max-width: var(--udex-side-navigation-max-width);
+}
+
+.ui5-sn-list {
+  padding: var(--udex-side-navigation-padding) 0 0;
+  margin: 0;
+}
+
+.ui5-sn-fixed {
+  padding: 0;
+  margin: 0;
+}
+
+.ui5-sn-spacer {
+  background-color: var(--udex-side-navigation-navigation-separator-background-color);
+  margin: var(--udex-side-navigation-navigation-separator-margin);
+  min-height: var(--udex-side-navigation-navigation-separator-height);
+  height: var(--udex-side-navigation-navigation-separator-height);
+  border-radius: var(--udex-side-navigation-navigation-separator-radius);
+}
+
+@media (min-width: 980px) {
+  :host {
+    --udex-side-navigation-max-width: var(--udex-side-navigation-max-width-m);
+  }
+}
+
+@media (min-width: 1280px) {
+  :host {
+    --udex-side-navigation-max-width: var(--udex-side-navigation-max-width-l);
+  }
+}
+
+@media (min-width: 1600px) {
+  :host {
+    --udex-side-navigation-max-width: var(--udex-side-navigation-max-width-xl);
+  }
+}

package/src/themes/SideNavigationGroup.css

@@ -0,0 +1,49 @@
+:host {
+  --udex-side-navigation-item-height: 2.5rem;
+  --udex-side-navigation-icon-color: var(--udexColorGrey9, #223548);
+  --udex-side-navigation-item-focus-border-offset: 0;
+
+  color: var(--udexColorGrey7, #475E75);
+}
+
+.ui5-sn-item-separator:has(+ .ui5-sn-item-group) {
+  background-color: var(--udexCoreDividerLight);
+  margin: var(--udexSpacer16) 0;
+  min-height: auto;
+  height: 1px;
+}
+
+.ui5-sn-item-separator:not(:has(+ .ui5-sn-item-group)) {
+  display: none;
+}
+
+.ui5-sn-item.ui5-sn-item-group {
+  height: var(--udex-side-navigation-item-height);
+  min-height: auto;
+  padding: var(--udexSpacer8) 0;
+  padding-inline-start: var(--udexSpacer16);
+  margin-block-end: 0;
+  gap: 0;
+  font-size: var(--udexTypographyEyebrowSFontSize);
+  font-style: normal;
+  font-weight: var(--udexTypographyFontWeightMedium);
+  letter-spacing: 0.36px;
+  text-transform: uppercase;
+  padding-inline-end: var(--udexSpacer16);
+}
+
+:host .ui5-sn-item-toggle-icon {
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  color: var(--udex-side-navigation-icon-color);
+  padding-inline-start: var(--udexSpacer12);
+}
+
+.ui5-sn-item:focus:after {
+  inset: var(--udex-side-navigation-item-focus-border-offset);
+}
+
+:host(:not([expanded]):last-child) {
+  margin-block-end: var(--udexSpacer16);
+}

package/src/themes/SideNavigationItem.css

@@ -0,0 +1,74 @@
+:host {
+  --udex-side-navigation-item-height: 2.5rem;
+  --udex-side-navigation-icon-color: var(--udexColorGrey9, #223548);
+  --udex-side-navigation-item-color-selected-text: var(--udexColorBlue7, #0070F2);
+  --udex-side-navigation-icon-font-size: 1.25rem;
+  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
+  --udex-side-navigation-selection-indicator-display: none;
+  --udex-side-navigation-text-weight: var(--udexTypographyFontWeightMedium);
+  --udex-side-navigation-item-focus-border-offset: 0;
+  --udex-side-navigation-selection-background-color: none;
+  --udex-side-navigation-hover-selection-background-color: var(--udexColorGrey1, #F5F6F7);
+
+  font-size: var(--udexTypographyNavigationMediumMFontSize);
+}
+
+:host(:not([hidden])) {
+  font-family: var(--sapFontFamily);
+}
+
+.ui5-sn-item-ul {
+  overflow: auto;
+}
+
+.ui5-sn-item {
+  height: var(--udex-side-navigation-item-height);
+  padding-inline-end: var(--udexSpacer16);
+}
+
+.ui5-sn-item .ui5-sn-item-text {
+  font-weight: var(--udex-side-navigation-text-weight);
+}
+
+.ui5-sn-item-icon {
+  height: var(--udex-side-navigation-icon-font-size);
+  width: var(--udex-side-navigation-icon-font-size);
+  min-width: var(--udex-side-navigation-icon-font-size);
+  color: var(--udex-side-navigation-icon-color);
+  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+}
+
+.ui5-sn-item-toggle-icon,
+.ui5-sn-item-external-link-icon {
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  color: var(--udex-side-navigation-icon-color);
+  padding-inline-start: var(--udexSpacer12);
+}
+
+.ui5-sn-item-level1,
+.ui5-sn-item-level1:not(:has(>.ui5-sn-item-icon)),
+.ui5-sn-item-level1.ui5-sn-item-selected:not(:has(>.ui5-sn-item-icon)) {
+  padding-inline-start: var(--udex-side-navigation-item-padding-left);
+}
+
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-toggle-icon,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-external-link-icon,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-icon {
+  color: var(--udex-side-navigation-item-color-selected-text);
+  background: var(--udex-side-navigation-selection-background-color);
+}
+
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
+  background: var(--udex-side-navigation-hover-selection-background-color);
+}
+
+.ui5-sn-item-selected .ui5-sn-item-selection-icon {
+  display: var(--udex-side-navigation-selection-indicator-display);
+}
+
+.ui5-sn-item:focus::after {
+  inset: var(--udex-side-navigation-item-focus-border-offset);
+}