@inera/ids-design 5.3.0 → 5.4.0

package/src/components/popover/popover.scss

@@ -0,0 +1,9 @@
+.ids-popover {
+  position: relative;
+  display: inline-block;
+
+  .ids-popover-trigger {
+    display: inline-block;
+    cursor: pointer;
+  }
+}

package/src/components/progressbar/progressbar-lit.ts

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

package/src/components/progressbar/progressbar.scss

@@ -0,0 +1,39 @@
+@use "../../layout/breakpoints";
+
+.ids-progressbar {
+  border: var(--IDS-PROGRESSBAR__BORDER-COLOR);
+  height: 0.938rem;
+  box-sizing: border-box;
+  border-radius: 0.625rem;
+  position: relative;
+  @media (max-width: breakpoints.$medium) {
+    height: 0.625rem;
+  }
+  .ids-progressbar__progress {
+    left: 0;
+    background-color: var(--IDS-PROGRESSBAR__PROGRESS-COLOR);
+    width: 15%;
+    display: block;
+    height: 0.938rem;
+    border-radius: 0.625rem;
+    transition: width 0.3s ease;
+    margin-top: -0.063rem;
+    margin-left: -0.063rem;
+    @media (max-width: breakpoints.$medium) {
+      height: 0.625rem;
+    }
+  }
+  .ids-progressbar__progress--none {
+    display: none;
+  }
+  .ids-progressbar__label {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.938rem;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    letter-spacing: -0.025rem;
+    color: var(--IDS-PROGRESSBAR__LABEL-COLOR);
+    font-weight: 700;
+  }
+}

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

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

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

@@ -0,0 +1,179 @@
+@use "../../layout/breakpoints";
+@use "../../global/partials";
+
+.ids-side-menu {
+  &.ids-side-menu--hide-on-mobile {
+    @media (max-width: breakpoints.$medium) {
+      display: none;
+    }
+  }
+
+  .ids-side-menu__header {
+    border-left: 0.5rem solid var(--IDS-COLOR-NEUTRAL-100);
+    background-color: var(--IDS-COLOR-NEUTRAL-100);
+    border-top-right-radius: 0.313rem;
+    border-bottom-right-radius: 0.313rem;
+    display: flex;
+
+    .ids-side-menu__header-inner {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      width: 100%;
+      color: var(--IDS-SIDE-MENU__LINK-COLOR);
+      margin-right: 0.5rem;
+    }
+
+    &.ids-side-menu--child-leaf {
+      .ids-side-menu__header-inner {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .ids-side-menu__icon-button {
+      @include partials.ids-button-no-styles();
+      @include partials.ids-focusable(-0.125rem);
+      height: 2.75rem;
+      width: 1.5rem;
+      position: relative;
+      cursor: pointer;
+    }
+
+    .ids-side-menu__icon {
+      position: absolute;
+      top: 1.125rem;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .ids-side-menu__label {
+      text-align: left;
+      line-height: 1.625rem;
+      margin: 0.25rem 0;
+      padding: 0.313rem 0;
+    }
+
+    .ids-side-menu__link {
+      display: grid;
+      grid-template-columns: 1fr auto;
+
+      ::slotted(a),
+      a {
+        color: var(--IDS-SIDE-MENU__LINK-COLOR);
+        @include partials.ids-focusable(-0.125rem);
+        cursor: pointer;
+        text-decoration: none !important;
+        display: flex;
+        gap: 0.5rem;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin: 0.25rem 0;
+        padding: 0.313rem 0;
+        line-height: 1.625rem;
+        text-align: left;
+      }
+
+      &:hover {
+        ::slotted(a),
+        a {
+          color: var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);
+          text-decoration: underline !important;
+        }
+      }
+
+      ::slotted(button),
+      button {
+        border: 0;
+        border-radius: 0;
+        background-color: transparent;
+        @include partials.ids-focusable(-0.125rem);
+        color: var(--IDS-SIDE-MENU__LINK-COLOR);
+        cursor: pointer;
+        display: flex;
+        gap: 0.5rem;
+        justify-content: space-between;
+        align-items: flex-start;
+        line-height: 1.625rem;
+        width: 100%;
+        margin: 0.25rem 0;
+        padding: 0.313rem 0;
+        text-align: left;
+
+        &:focus {
+          outline: var(--IDS-FOCUS__OUTLINE) !important;
+          outline-offset: -0.125rem !important;
+          outline-color: var(--IDS-COLOR-NEUTRAL-40) !important;
+        }
+      }
+
+      &:hover {
+        ::slotted(button),
+        button {
+          color: var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);
+          text-decoration: underline !important;
+        }
+      }
+    }
+
+    &.ids-side-menu--active {
+      background-color: var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR);
+      border-color: var(--IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR);
+
+      .ids-side-menu__label {
+        font-weight: 700;
+      }
+
+      .ids-side-menu__link {
+        font-weight: 700;
+
+        &:hover {
+          ::slotted(a),
+          a,
+          ::slotted(button),
+          button {
+            cursor: default;
+            color: var(--IDS-SIDE-MENU__LINK-COLOR);
+            text-decoration: none !important;
+          }
+        }
+      }
+    }
+
+    &.ids-side-menu--level-2 {
+      .ids-side-menu__header-inner {
+        margin-left: 1.5rem;
+      }
+    }
+
+    &.ids-side-menu--level-3 {
+      .ids-side-menu__header-inner {
+        margin-left: 3.125rem;
+      }
+    }
+
+    &.ids-side-menu--level-4 {
+      .ids-side-menu__header-inner {
+        margin-left: 4.625rem;
+      }
+    }
+  }
+
+  .ids-side-menu__label,
+  .ids-side-menu__link {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+
+  &.ids-side-menu--disabled {
+    cursor: default;
+  }
+
+  ::slotted(button),
+  button {
+    &:focus,
+    &:focus-visible {
+      outline: var(--IDS-FOCUS__OUTLINE) !important;
+      outline-offset: -0.125rem !important;
+      outline-color: var(--IDS-COLOR-NEUTRAL-40) !important;
+    }
+  }
+}

package/src/components/side-panel/side-panel-lit.ts

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

package/src/components/side-panel/side-panel.scss

@@ -0,0 +1,330 @@
+@use "../../layout/breakpoints";
+@use "../../global/partials";
+
+.ids-side-panel {
+  background-color: var(--IDS-OVERLAY__BACKGROUND-COLOR);
+  overflow: hidden;
+  z-index: 1;
+
+  .ids-side-panel__mobile-menu {
+    display: none;
+    background-color: var(--IDS-COLOR-NEUTRAL-100);
+  }
+
+  &.ids-side-panel--regular {
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    width: 0;
+    height: 0;
+    transition: opacity 0s linear 0.2s, visibility 0.3s, width 0s linear 0.4s, height 0s linear 0.4s;
+
+    .ids-side-panel__panel {
+      background-color: var(--IDS-COLOR-NEUTRAL-100);
+      border-left: 0;
+      box-sizing: border-box;
+      padding: 1.25rem 1rem 0 1rem;
+      display: flex;
+      flex-direction: column;
+      overflow-x: hidden;
+      position: relative;
+      width: 100%;
+      height: 70vh;
+      transform: translateY(100vh);
+      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .ids-side-panel__content {
+      @include partials.ids-scrollbar();
+      width: 100%;
+      padding-bottom: 1.25rem;
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
+      order: 1;
+    }
+
+    .ids-side-panel__inner {
+      padding: 0.5rem;
+    }
+
+    .ids-side-panel__actions {
+      text-align: right;
+      width: 100%;
+      margin-right: 0.313rem;
+      order: 0;
+    }
+
+    .ids-side-panel__close-button {
+      @include partials.ids-button-no-styles();
+      @include partials.ids-focusable();
+    }
+
+    &.ids-side-panel--show {
+      opacity: 1;
+      visibility: visible;
+      width: 100%;
+      height: 100vh;
+      transition: width 0s, height 0s;
+
+      .ids-side-panel__panel {
+        transform: translateY(30vh);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
+    @media (min-width: breakpoints.$small) {
+      .ids-side-panel__panel {
+        height: 50vh;
+      }
+
+      &.ids-side-panel--show {
+        .ids-side-panel__panel {
+          transform: translateY(50vh);
+        }
+      }
+    }
+
+    @media (min-width: breakpoints.$medium) {
+      display: flex;
+      position: relative;
+      overflow-x: hidden;
+      width: 0;
+      transform: none;
+      background-color: var(--IDS-COLOR-NEUTRAL-100);
+      transition: width 0.3s ease-in-out, opacity 0s linear 0.3s, height 0.4s, visibility 0.4s,
+        transform linear 0s;
+      border-left: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+
+      .ids-side-panel__panel {
+        top: 0;
+        padding: 1.25rem 0 0 1rem;
+        transform: none;
+        transition: none;
+        height: 100%;
+      }
+
+      .ids-side-panel__content,
+      .ids-side-panel__actions {
+        width: 21.875rem;
+      }
+
+      &.ids-side-panel--show {
+        width: 23.75rem;
+        height: 100%;
+        transform: none;
+        transition: width 0.3s ease-in-out, visibility 0s, opacity 0s, transform linear 0s;
+
+        .ids-side-panel__panel {
+          transform: none;
+          transition: none;
+        }
+      }
+
+      &.ids-side-panel--left {
+        border-left: 0;
+        border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+        .ids-side-panel__panel {
+          direction: rtl;
+          padding: 1.25rem 1rem 1.25rem 0;
+
+          .ids-side-panel__content {
+            direction: ltr;
+          }
+        }
+      }
+
+      &.ids-side-panel--elevated {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 0;
+        height: 100%;
+        left: auto;
+        z-index: 2;
+        border-left: 0;
+        box-shadow: -0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
+
+        &.ids-side-panel--left {
+          left: 0;
+          right: auto;
+          border-right: 0;
+          box-shadow: 0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
+
+          .ids-side-panel__panel {
+            padding: 1.25rem 1rem 1.25rem 0;
+          }
+        }
+
+        &.ids-side-panel--show {
+          width: 23.75rem;
+        }
+      }
+    }
+  }
+
+  &.ids-side-panel--menu {
+    position: relative;
+    display: flex;
+    width: 3.125rem;
+    height: 100%;
+    background-color: var(--IDS-COLOR-NEUTRAL-100);
+    border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+    padding: 0;
+
+    .ids-side-panel__panel {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: 1.25rem 0 0 0;
+    }
+
+    .ids-side-panel__content {
+      @include partials.ids-scrollbar();
+      width: 100%;
+      height: 100%;
+      padding: 0.5rem;
+      margin: -0.5rem 0 0 -0.5rem;
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
+      opacity: 0;
+      visibility: hidden;
+      transition: visibility 0s, opacity 0s;
+    }
+
+    .ids-side-panel__actions {
+      text-align: right;
+      margin-right: 1.25rem;
+      width: 2.25rem;
+    }
+
+    .ids-side-panel__footer {
+      text-align: left;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+      padding: 1.25rem;
+      border-bottom: 0.5rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR);
+      border-top: 0.063rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR);
+      opacity: 0;
+      visibility: hidden;
+      transition: visibility 0s, opacity 0s;
+    }
+
+    .ids-side-panel__footer-links,
+    ::slotted([slot="footer-links"]) {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .ids-side-panel__hamburger {
+      @include partials.ids-hamburger(var(--IDS-COLOR-ACCENT-40));
+      border: 0;
+      background-color: transparent;
+      height: 1.875rem;
+      padding: 0 0.25rem;
+      margin-right: -0.25rem;
+
+      &:focus {
+        @include partials.ids-outline(-0.125rem);
+      }
+    }
+
+    &.ids-side-panel--show {
+      width: 100%;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      border-right: 0;
+
+      .ids-side-panel__actions {
+        width: auto;
+      }
+
+      .ids-side-panel__mobile-menu {
+        display: block;
+        margin-top: 2.5rem;
+      }
+
+      .ids-side-panel__content,
+      .ids-side-panel__footer {
+        opacity: 1;
+        visibility: visible;
+        transition: visibility 0s, opacity 0s;
+      }
+    }
+
+    &.ids-side-panel--elevated {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: auto;
+      right: calc(100% - 3.125rem);
+      width: 3.125rem;
+      z-index: 2;
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &.ids-side-panel--show {
+        width: 100%;
+        transform: translateX(calc(100% - 3.125rem));
+      }
+    }
+
+    @media (min-width: breakpoints.$medium) {
+      transition: width 0.3s ease-in-out;
+
+      .ids-side-panel__mobile-menu {
+        display: none !important;
+      }
+
+      .ids-side-panel__panel {
+        width: 23.75rem;
+        position: relative;
+        transform: none;
+        transition: none;
+      }
+
+      .ids-side-panel__content {
+        width: 23.75rem;
+      }
+
+      .ids-side-panel__footer {
+        width: 23.75rem;
+      }
+
+      &.ids-side-panel--show {
+        position: relative;
+        width: 23.75rem;
+        height: 100%;
+        transform: none;
+        transition: width 0.3s ease-in-out;
+        border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+      }
+
+      &.ids-side-panel--elevated {
+        border-right: 0;
+        box-shadow: 0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
+
+        &.ids-side-panel--show {
+          position: fixed;
+          width: 23.75rem;
+          transform: translateX(20.625rem);
+          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+      }
+    }
+  }
+}

package/src/components/stepper/stepper-lit.ts

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