@inera/ids-design 5.2.2 → 5.4.0

package/src/components/list/list.scss

@@ -0,0 +1,148 @@
+@use "../../global/partials";
+
+.ids-list {
+  border-top: 0.063rem solid var(--IDS-LIST__BORDER);
+  display: flex;
+  flex-direction: column;
+}
+
+.ids-list-item-separator {
+  height: 0.0625rem;
+  width: 100%;
+  background-color: var(--IDS-LIST__BORDER);
+}
+
+.ids-list-item {
+  padding: 0;
+  margin: 1.25rem 0;
+  display: flex;
+  gap: 1.25rem;
+  position: relative;
+  color: var(--IDS-LIST__COLOR) !important;
+
+  .ids-list-item__icon--hover {
+    display: none;
+  }
+
+  .ids-list-item__icon,
+  .ids-list-item__icon--hover,
+  .ids-icon {
+    margin-right: 0.5rem;
+    align-self: flex-start;
+    margin-top: 0.525rem;
+  }
+
+  .ids-list-item__date {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    letter-spacing: 0.0625rem;
+    text-transform: uppercase;
+  }
+
+  .date-label-col {
+    padding-right: 1.25rem;
+  }
+
+  .ids-list-item__header,
+  ::slotted([slot="headline"]) {
+    cursor: pointer;
+    display: inline-flex !important;
+    align-items: center !important;
+    margin-bottom: 0 !important;
+    text-decoration: none;
+    margin-top: 0 !important;
+    color: var(--IDS-LINK--COLORPRESET-1__COLOR) !important;
+    @include partials.ids-heading-list();
+  }
+
+  .ids-list-item__body {
+    margin-top: 1rem;
+  }
+
+  &.ids-list-item--interactive {
+    cursor: pointer;
+
+    ::slotted([slot="interactive"]) {
+      position: absolute !important;
+      left: 0 !important;
+      right: 0 !important;
+      top: 0 !important;
+      bottom: 0 !important;
+      opacity: 0 !important;
+    }
+
+    &:focus-within {
+      outline: var(--IDS-FOCUS__OUTLINE);
+      outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+      .ids-list-item__icon {
+        display: none;
+      }
+      .ids-list-item__icon--hover {
+        display: flex;
+      }
+    }
+
+    &:hover {
+      .ids-list-item__header,
+      ::slotted([slot="headline"]) {
+        color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR) !important;
+        text-decoration: underline !important;
+      }
+      .ids-list-item__icon {
+        display: none;
+      }
+      .ids-list-item__icon--hover {
+        display: flex;
+      }
+    }
+
+    .ids-list-item__header {
+      outline: none;
+    }
+  }
+
+  &:not(.ids-list-item--interactive) {
+    .ids-list-item__header {
+      position: relative;
+
+      ::slotted([slot="interactive"]) {
+        position: absolute !important;
+        left: 0 !important;
+        right: 0 !important;
+        top: 0.1875rem !important;
+        bottom: 0.1875rem !important;
+      }
+
+      &:focus {
+        // plain css version
+        outline-offset: 0;
+      }
+
+      &:hover {
+        color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR) !important;
+        text-decoration: underline !important;
+        .ids-list-item__icon {
+          display: none;
+        }
+        .ids-list-item__icon--hover {
+          display: flex;
+        }
+      }
+    }
+  }
+}
+
+.ids-list-item__info {
+  font-size: 1rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  font-style: italic;
+  font-weight: 400;
+  font-size: 1rem;
+  color: var(--IDS-LIST__ITEM-INFO-COLOR);
+  display: block;
+  margin-bottom: 0;
+  margin-top: 0.625rem;
+}

package/src/components/mobile-menu/mobile-menu-lit.ts

@@ -0,0 +1,4 @@
+import { css, unsafeCSS } from 'lit';
+import MobileMenuSCSS from './mobile-menu.scss';
+
+export default css`${unsafeCSS(MobileMenuSCSS)}`;

package/src/components/mobile-menu/mobile-menu.scss

@@ -0,0 +1,458 @@
+@use "../../global/partials";
+
+%ids-mobile-menu-item__link {
+  width: 100%;
+  padding: 0.75rem 0.75rem 0.75rem 1.25rem !important;
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  gap: 0.5rem;
+  color: inherit !important;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: inherit !important;
+  text-decoration: none !important;
+  text-align: start;
+}
+
+%mobile-menu-item--1 {
+  padding-left: 1.25rem !important;
+}
+
+%mobile-menu-item--2 {
+  padding-left: 2.5rem !important;
+}
+
+%mobile-menu-item--3 {
+  padding-left: 3.75rem !important;
+}
+
+@mixin ids-mobile-menu-item--outline($level: 1, $variation: 1, $secondary: false) {
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
+  z-index: 1;
+  
+  @if $variation == 1 {
+    @if $level == 1 {
+      @if $secondary {
+        outline-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--FOCUS__OUTLINE-COLOR) !important;
+      } @else {
+        outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR) !important;
+      }
+    } @else if $level == 2 {
+      outline-color: var(--IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
+    } @else if $level == 3 {
+      outline-color: var(--IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
+    }
+  } @else {
+    @if $level == 1 {
+      outline-color: var(--IDS-MOBILE-MENU-2-ITEM--FOCUS__OUTLINE-COLOR) !important;
+    } @else if $level == 2 {
+      outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
+    } @else if $level == 3 {
+      outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR) !important;
+    }
+  }
+}
+
+@mixin mobile-menu-item__inner($level: 1, $variation: 1, $secondary: false) {
+  cursor: pointer;
+  display: flex;
+  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-size: 1rem;
+  width: 100%;
+  position: relative;
+
+  @if $variation == 1 {
+    @if $level == 1 {
+      font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
+      border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
+      & > .ids-mobile-menu-item__link,
+      & > a,
+      ::slotted([slot="link"]) {
+        @extend %mobile-menu-item--1;
+      }
+
+      @if $secondary == true {
+        color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR);
+        background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR);
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR
+        );
+        &:hover {
+          color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR);
+          @include mobile-menu-item__border-left(
+            --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR
+          );
+        }
+      } @else {
+        background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+        color: var(--IDS-MOBILE-MENU-ITEM__COLOR);
+        @include mobile-menu-item__border-left(--IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR);
+
+        &:hover {
+          @include mobile-menu-item__border-left(
+            --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR
+          );
+        }
+      }
+    }
+    @if $level == 2 {
+      background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR);
+      color: var(--IDS-MOBILE-MENU-ITEM--L2__COLOR);
+      font-weight: var(--IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT);
+      border-bottom: var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM);
+      & > .ids-mobile-menu-item__link,
+      & > a,
+      ::slotted([slot="link"]) {
+        @extend %mobile-menu-item--2;
+      }
+      &:has(.ids-mobile-menu-item__expand-btn) {
+        font-weight: var(--IDS-MOBILE-MENU-ITEM--L2-HAS-CHILDREN__FONT-WEIGHT);
+      }
+
+      @include mobile-menu-item__border-left(--IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR);
+
+      &:hover {
+        color: var(--IDS-MOBILE-MENU-ITEM--L2-HOVER__COLOR);
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR
+        );
+      }
+    }
+    @if $level == 3 {
+      background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR);
+      color: var(--IDS-MOBILE-MENU-ITEM--L2__COLOR);
+      font-weight: var(--IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT);
+      border-bottom: var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM);
+      & > .ids-mobile-menu-item__link,
+      & > a,
+      ::slotted([slot="link"]) {
+        @extend %mobile-menu-item--3;
+      }
+
+      @include mobile-menu-item__border-left(--IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR);
+
+      &:hover {
+        color: var(--IDS-MOBILE-MENU-ITEM--L2-HOVER__COLOR);
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR
+        );
+      }
+    }
+  } @else if $variation == 2 {
+    border-bottom: none;
+
+    @if $level == 1 {
+      background-color: var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
+      color: var(--IDS-MOBILE-MENU-2-ITEM__COLOR);
+      font-weight: var(--IDS-MOBILE-MENU-2-ITEM__FONT-WEIGHT);
+      & > .ids-mobile-menu-item__link,
+      & > a,
+      ::slotted([slot="link"]) {
+        @extend %mobile-menu-item--1;
+      }
+      &::after {
+        background-color: var(--IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR);
+      }
+      @include mobile-menu-item__border-left(--IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR);
+
+      &:hover {
+        color: var(--IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR);
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR
+        );
+      }
+    }
+    @if $level == 2 {
+      background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR);
+      color: var(--IDS-MOBILE-MENU-2-ITEM--L2__COLOR);
+      font-weight: var(--IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT);
+      & > .ids-mobile-menu-item__link,
+      & > a,
+      ::slotted([slot="link"]) {
+        @extend %mobile-menu-item--2;
+      }
+      &::after {
+        background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR);
+      }
+
+      @include mobile-menu-item__border-left(--IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR);
+
+      &:hover {
+        color: var(--IDS-MOBILE-MENU-2-ITEM--L2-HOVER__COLOR);
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR
+        );
+      }
+    }
+    @if $level == 3 {
+      background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR);
+      color: var(--IDS-MOBILE-MENU-2-ITEM--L3__COLOR);
+      font-weight: normal;
+      & > .ids-mobile-menu-item__link,
+      & > a,
+      ::slotted([slot="link"]) {
+        @extend %mobile-menu-item--3;
+      }
+      &::after {
+        background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-COLOR);
+      }
+      &:has(.ids-mobile-menu-item__expand-btn) {
+        font-weight: normal;
+      }
+
+      @include mobile-menu-item__border-left(--IDS-MOBILE-MENU-2-ITEM--L3__BEFORE-BACKGROUND-COLOR);
+
+      &:hover {
+        color: var(--IDS-MOBILE-MENU-2-ITEM--L3-HOVER__COLOR);
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__BEFORE-BACKGROUND-COLOR
+        );
+      }
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      height: 0.063rem;
+      left: 1.25rem;
+      bottom: 0;
+      right: 1.25rem;
+      position: absolute;
+    }
+  }
+
+  & > .ids-mobile-menu-item__link,
+  & > a {
+    @extend %ids-mobile-menu-item__link;
+    &:focus {
+      @include ids-mobile-menu-item--outline($level, $variation, $secondary);
+    }
+  }
+  
+  ::slotted([slot="link"]) {
+    @extend %ids-mobile-menu-item__link;
+    &:focus {
+      @include ids-mobile-menu-item--outline($level, $variation, $secondary);
+    }
+  }
+
+  ::slotted(:focus-within) {
+    @include ids-mobile-menu-item--outline($level, $variation, $secondary);
+  }
+}
+
+@mixin mobile-menu-item__border-left($color) {
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 0.625rem;
+    left: 0;
+    z-index: 0;
+    background-color: var($color);
+  }
+}
+
+@mixin mobile-menu-item--expanded__inner($level: 1) {
+  @if $level == 1 {
+    background-color: var(--IDS-MOBILE-MENU-ITEM--EXPANDED__BACKGROUND-COLOR);
+  } @else if $level == 2 {
+    background-color: var(--IDS-MOBILE-MENU-ITEM--2--EXPANDED__INNER__BACKGROUND-COLOR);
+  } @else if $level == 3 {
+    background-color: var(--IDS-MOBILE-MENU-ITEM--3--EXPANDED__INNER__BACKGROUND-COLOR);
+  }
+}
+
+@mixin mobile-menu-item__expand-btn($level: 1, $variation: 1, $secondary: false) {
+  @include partials.ids-button-base();
+  min-height: 3rem;
+  min-width: 3.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  text-align: start;
+
+  &:focus {
+    @include ids-mobile-menu-item--outline($level, $variation, $secondary);
+  }
+
+  &:only-child {
+    width: 100%;
+    justify-content: space-between;
+    @if $level == 1 {
+      padding-left: 1.25rem;
+    } @else if $level == 2 {
+      padding-left: 2.5rem;
+    } @else if $level == 3 {
+      padding-left: 3.75rem;
+    }
+    .ids-icon {
+      margin-right: 1.5rem;
+    }
+  }
+}
+
+.ids-mobile-menu-item__sub-items {
+  display: none;
+}
+
+.ids-mobile-menu-item--expanded {
+  & > .ids-mobile-menu-item__sub-items {
+    display: block;
+  }
+}
+
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) {
+  .ids-mobile-menu-item {
+    position: relative;
+    min-height: 3rem;
+    min-width: 3rem;
+
+    & > .ids-mobile-menu-item__inner {
+      @include mobile-menu-item__inner();
+      & > .ids-mobile-menu-item__expand-btn {
+        @include mobile-menu-item__expand-btn(1);
+      }
+    }
+
+    &.ids-mobile-menu-item--active {
+      & > .ids-mobile-menu-item__inner {
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-ITEM--ACTIVE__BEFORE-BACKGROUND-COLOR
+        );
+      }
+
+      &:hover {
+        & > .ids-mobile-menu-item__inner {
+          @include mobile-menu-item__border-left(
+            --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR
+          );
+        }
+      }
+    }
+
+    &.ids-mobile-menu-item--secondary {
+      & > .ids-mobile-menu-item__inner {
+        @include mobile-menu-item__inner(1, 1, true);
+        & > .ids-mobile-menu-item__expand-btn {
+          @include mobile-menu-item__expand-btn(1, 1, true);
+        }
+      }
+
+      &.ids-mobile-menu-item--active {
+        & > .ids-mobile-menu-item__inner {
+          color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--ACTIVE__BEFORE-BACKGROUND-COLOR);
+          @include mobile-menu-item__border-left(
+            --IDS-MOBILE-MENU-ITEM-SECONDARY--ACTIVE__BEFORE-BACKGROUND-COLOR
+          );
+        }
+
+        &:hover {
+          & > .ids-mobile-menu-item__inner {
+            color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR);
+            @include mobile-menu-item__border-left(
+              --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR
+            );
+          }
+        }
+      }
+    }
+  }
+
+  .ids-mobile-menu-item--2 {
+    position: relative;
+    & > .ids-mobile-menu-item__inner {
+      @include mobile-menu-item__inner(2);
+      .ids-mobile-menu-item__expand-btn {
+        @include mobile-menu-item__expand-btn(2);
+      }
+    }
+
+    &.ids-mobile-menu-item--active {
+      & > .ids-mobile-menu-item__inner {
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-ITEM--L2-ACTIVE__BEFORE-BACKGROUND-COLOR
+        );
+      }
+
+      &:hover {
+        & > .ids-mobile-menu-item__inner {
+          @include mobile-menu-item__border-left(
+            --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR
+          );
+        }
+      }
+    }
+  }
+
+  .ids-mobile-menu-item--3 {
+    position: relative;
+    & > .ids-mobile-menu-item__inner {
+      @include mobile-menu-item__inner(3);
+      .ids-mobile-menu-item__expand-btn {
+        @include mobile-menu-item__expand-btn(3, 2);
+      }
+    }
+
+    &.ids-mobile-menu-item--active {
+      & > .ids-mobile-menu-item__inner {
+        @include mobile-menu-item__border-left(
+          --IDS-MOBILE-MENU-ITEM--L2-ACTIVE__BEFORE-BACKGROUND-COLOR
+        );
+      }
+
+      &:hover {
+        & > .ids-mobile-menu-item__inner {
+          @include mobile-menu-item__border-left(
+            --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR
+          );
+        }
+      }
+    }
+  }
+}
+
+/* VARIATION 2 */
+.ids-mobile-menu.ids-mobile-menu--variation-2 {
+  .ids-mobile-menu-item {
+    position: relative;
+    & > .ids-mobile-menu-item__inner {
+      @include mobile-menu-item__inner(1, 2);
+      & > .ids-mobile-menu-item__expand-btn {
+        @include mobile-menu-item__expand-btn(1, 2);
+      }
+    }
+  }
+
+  .ids-mobile-menu-item--2 {
+    position: relative;
+    & > .ids-mobile-menu-item__inner {
+      @include mobile-menu-item__inner(2, 2);
+      .ids-mobile-menu-item__expand-btn {
+        @include mobile-menu-item__expand-btn(2, 2);
+      }
+    }
+  }
+
+  .ids-mobile-menu-item--3 {
+    position: relative;
+    & > .ids-mobile-menu-item__inner {
+      @include mobile-menu-item__inner(3, 2);
+      .ids-mobile-menu-item__expand-btn {
+        @include mobile-menu-item__expand-btn(3, 2);
+      }
+    }
+  }
+}
+
+.ids-mobile-menu {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+}

package/src/components/navigation/content/navigation-content-lit.ts

@@ -0,0 +1,4 @@
+import { css, unsafeCSS } from 'lit';
+import NavigationContentSCSS from './navigation-content.scss';
+
+export default css`${unsafeCSS(NavigationContentSCSS)}`;

package/src/components/navigation/content/navigation-content.scss

@@ -0,0 +1,69 @@
+@mixin ids-navigation-content__inner__link {
+  border-top: 0.063rem solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);
+  display: block;
+  padding: 0.875rem 0;
+}
+
+.ids-navigation-content {
+  width: 100%;
+  box-shadow: 0 0 0.625rem rgba(27, 27, 27, 0.2);
+  border-radius: var(--IDS-NAVIGATION-CONTENT__BORDER-RADIUS);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    height: 1.4rem;
+    width: 1.4rem;
+    clip-path: polygon(0 0, 0% 100%, 100% 100%);
+    top: 1.25rem;
+    left: -0.563rem;
+    background-color: var(--IDS-COLOR-NEUTRAL-100);
+    transform: rotate(45deg);
+    z-index: 1;
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    height: 1.4rem;
+    width: 1.4rem;
+    top: 1.25rem;
+    left: -0.688rem;
+    transform: rotate(45deg);
+    z-index: -1;
+    box-shadow: rgba(27, 27, 27, 0.2) 0 0 0.625rem;
+  }
+  .ids-navigation-content__border-top {
+    position: absolute;
+    overflow: hidden;
+    border-radius: var(--IDS-CARD__BORDER-RADIUS);
+    top: 0;
+    width: 100%;
+    display: block;
+    height: 1.25rem;
+    left: 0;
+    div {
+      border-top: var(--IDS-CARD--BORDER-2__BORDER-TOP);
+    }
+  }
+  .ids-navigation-content__inner {
+    padding: 1.25rem;
+    border-top: var(--IDS-NAVIGATION-CONTENT__BORDER-TOP);
+    position: relative;
+    .ids-navigation-content__inner__headline {
+      font-family: var(--IDS-NAVIGATION-CONTENT__FONT-FAMILY);
+      font-weight: var(--IDS-NAVIGATION-CONTENT__FONT-WEIGHT);
+      font-size: var(--IDS-NAVIGATION-CONTENT__FONT-SIZE);
+      line-height: var(--IDS-NAVIGATION-CONTENT__LINE-HEIGHT);
+      letter-spacing: -0.013rem;
+      color: var(--IDS-NAVIGATION-CONTENT__COLOR);
+      margin: 0 0 0.5rem 0;
+    }
+    a {
+      @include ids-navigation-content__inner__link();
+    }
+    ::slotted(*) {
+      @include ids-navigation-content__inner__link();
+    }
+  }
+}

package/src/components/navigation/local/navigation-local-lit.ts

@@ -0,0 +1,4 @@
+import { css, unsafeCSS } from 'lit';
+import NavigationLocalSCSS from './navigation-local.scss';
+
+export default css`${unsafeCSS(NavigationLocalSCSS)}`;