@inera/ids-design 5.3.0 → 5.4.1

package/components/side-panel/side-panel.css

@@ -14,7 +14,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -48,7 +48,7 @@
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-left: 0;
   box-sizing: border-box;
-  padding: 20px 16px 0 16px;
+  padding: 1.25rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
@@ -60,51 +60,42 @@
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__content {
   width: 100%;
-  padding-bottom: 20px;
+  padding-bottom: 1.25rem;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: auto;
   order: 1;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar {
-  width: 14px;
+  width: 1rem;
   position: absolute;
-  margin-left: -20px;
-  margin-top: 4px;
+  margin-left: -1.25rem;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-track {
-  background: var(--IDS-SCROLL_TRACK-COLOR);
-  border-radius: 10px;
-  margin-top: 4px;
+  background: var(--IDS-COLOR-NEUTRAL-99);
+  border-radius: 0.625rem;
   margin-bottom: 0;
 }
-.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-resizer {
-  appearance: none;
-  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-}
-.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb {
   cursor: auto;
-  background: var(--IDS-SCROLL_COLOR);
-  border-radius: 10px;
+  background: var(--IDS-SCROLL__COLOR);
+  border-radius: 0.625rem;
   box-sizing: border-box;
-  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb:hover {
-  background: var(--IDS-SCROLL_HOVER-COLOR);
+  background: var(--IDS-SCROLL__HOVER-COLOR);
+}
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__inner {
-  padding: 8px;
+  padding: 0.5rem;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__actions {
   text-align: right;
   width: 100%;
-  margin-right: 5px;
+  margin-right: 0.313rem;
   order: 0;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button {
@@ -117,8 +108,8 @@
   outline: inherit;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-side-panel.ids-side-panel--regular.ids-side-panel--show {
   opacity: 1;
@@ -148,21 +139,21 @@
     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: 1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+    border-left: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
   }
   .ids-side-panel.ids-side-panel--regular .ids-side-panel__panel {
     top: 0;
-    padding: 20px 0 0 16px;
+    padding: 1.25rem 0 0 1rem;
     transform: none;
     transition: none;
     height: 100%;
   }
   .ids-side-panel.ids-side-panel--regular .ids-side-panel__content,
   .ids-side-panel.ids-side-panel--regular .ids-side-panel__actions {
-    width: 350px;
+    width: 21.875rem;
   }
   .ids-side-panel.ids-side-panel--regular.ids-side-panel--show {
-    width: 380px;
+    width: 23.75rem;
     height: 100%;
     transform: none;
     transition: width 0.3s ease-in-out, visibility 0s, opacity 0s, transform linear 0s;
@@ -173,11 +164,11 @@
   }
   .ids-side-panel.ids-side-panel--regular.ids-side-panel--left {
     border-left: 0;
-    border-right: 1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+    border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
   }
   .ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel {
     direction: rtl;
-    padding: 20px 16px 20px 0;
+    padding: 1.25rem 1rem 1.25rem 0;
   }
   .ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel .ids-side-panel__content {
     direction: ltr;
@@ -192,28 +183,28 @@
     left: auto;
     z-index: 2;
     border-left: 0;
-    box-shadow: -3px 0 4px -2px rgba(0, 0, 0, 0.2);
+    box-shadow: -0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
   }
   .ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left {
     left: 0;
     right: auto;
     border-right: 0;
-    box-shadow: 3px 0 4px -2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
   }
   .ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel {
-    padding: 20px 16px 20px 0;
+    padding: 1.25rem 1rem 1.25rem 0;
   }
   .ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--show {
-    width: 380px;
+    width: 23.75rem;
   }
 }
 .ids-side-panel.ids-side-panel--menu {
   position: relative;
   display: flex;
-  width: 50px;
+  width: 3.125rem;
   height: 100%;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
-  border-right: 1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+  border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
   padding: 0;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__panel {
@@ -222,12 +213,13 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 20px 0 0 0;
+  padding: 1.25rem 0 0 0;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content {
   width: 100%;
   height: 100%;
-  padding-right: 8px;
+  padding: 0.5rem;
+  margin: -0.5rem 0 0 -0.5rem;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: auto;
@@ -236,70 +228,58 @@
   transition: visibility 0s, opacity 0s;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar {
-  width: 14px;
+  width: 1rem;
   position: absolute;
-  margin-left: -20px;
-  margin-top: 4px;
+  margin-left: -1.25rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-track {
-  background: var(--IDS-SCROLL_TRACK-COLOR);
-  border-radius: 10px;
-  margin-top: 4px;
+  background: var(--IDS-COLOR-NEUTRAL-99);
+  border-radius: 0.625rem;
   margin-bottom: 0;
 }
-.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-resizer {
-  appearance: none;
-  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-}
-.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb {
   cursor: auto;
-  background: var(--IDS-SCROLL_COLOR);
-  border-radius: 10px;
+  background: var(--IDS-SCROLL__COLOR);
+  border-radius: 0.625rem;
   box-sizing: border-box;
-  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb:hover {
-  background: var(--IDS-SCROLL_HOVER-COLOR);
+  background: var(--IDS-SCROLL__HOVER-COLOR);
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__actions {
-  position: absolute;
-  top: 20px;
-  left: 12px;
+  text-align: right;
+  margin-right: 1.25rem;
+  width: 2.25rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__footer {
   text-align: left;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  padding: 20px;
-  border-bottom: 8px solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR);
-  border-top: 1px solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR);
+  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.ids-side-panel--menu .ids-side-panel__footer-link {
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links,
+.ids-side-panel.ids-side-panel--menu ::slotted([slot=footer-links]) {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0.75rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger {
   border: 0;
   background-color: transparent;
-  height: 30px;
-  padding: 0 4px;
-  margin-right: -4px;
-}
-.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  height: 1.875rem;
+  padding: 0 0.25rem;
+  margin-right: -0.25rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger {
   transition: 0.2s;
@@ -310,18 +290,18 @@
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines {
   display: block;
   width: 1.3125rem;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   transition: 0.2s;
   background-color: var(--IDS-COLOR-ACCENT-40);
   position: relative;
-  height: 3px;
+  height: 0.188rem;
   width: 1.25rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before,
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after {
   display: inline-block;
   width: 1.3125rem;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   transition: 0.2s;
   background-color: var(--IDS-COLOR-ACCENT-40);
   position: absolute;
@@ -332,7 +312,7 @@
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before,
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after {
-  height: 3px;
+  height: 0.188rem;
   width: 1.25rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before,
@@ -341,10 +321,10 @@
   transform-origin: 0.13393rem center;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before {
-  top: 8px;
+  top: 0.5rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after {
-  top: -8px;
+  top: -0.5rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger {
   -webkit-transform: scale3d(0.8, 0.8, 0.8);
@@ -359,7 +339,7 @@
   transform-origin: 50% 50%;
   top: 0;
   width: 2rem;
-  left: -5px;
+  left: -0.313rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
   -ms-transform: rotate(45deg);
@@ -371,6 +351,10 @@
   -webkit-transform: rotate3d(0, 0, 1, -45deg);
   transform: rotate3d(0, 0, 1, -45deg);
 }
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
 .ids-side-panel.ids-side-panel--menu.ids-side-panel--show {
   width: 100%;
   position: fixed;
@@ -380,9 +364,12 @@
   right: 0;
   border-right: 0;
 }
+.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__actions {
+  width: auto;
+}
 .ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__mobile-menu {
   display: block;
-  margin-top: 40px;
+  margin-top: 2.5rem;
 }
 .ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__content,
 .ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__footer {
@@ -390,23 +377,19 @@
   visibility: visible;
   transition: visibility 0s, opacity 0s;
 }
-.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__actions {
-  right: 20px;
-  left: auto;
-}
 .ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated {
   position: fixed;
   top: 0;
   bottom: 0;
   left: auto;
-  right: calc(100% - 50px);
-  width: 50px;
+  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.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show {
   width: 100%;
-  transform: translateX(calc(100% - 50px));
+  transform: translateX(calc(100% - 3.125rem));
 }
 @media (min-width: 1024px) {
   .ids-side-panel.ids-side-panel--menu {
@@ -416,34 +399,33 @@
     display: none !important;
   }
   .ids-side-panel.ids-side-panel--menu .ids-side-panel__panel {
-    width: 380px;
+    width: 23.75rem;
     position: relative;
     transform: none;
     transition: none;
   }
   .ids-side-panel.ids-side-panel--menu .ids-side-panel__content {
-    width: 380px;
-    margin-top: 36px;
+    width: 23.75rem;
   }
   .ids-side-panel.ids-side-panel--menu .ids-side-panel__footer {
-    width: 380px;
+    width: 23.75rem;
   }
   .ids-side-panel.ids-side-panel--menu.ids-side-panel--show {
     position: relative;
-    width: 380px;
+    width: 23.75rem;
     height: 100%;
     transform: none;
     transition: width 0.3s ease-in-out;
-    border-right: 1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+    border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
   }
   .ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated {
     border-right: 0;
-    box-shadow: 3px 0 4px -2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
   }
   .ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show {
     position: fixed;
-    width: 380px;
-    transform: translateX(330px);
+    width: 23.75rem;
+    transform: translateX(20.625rem);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 }

package/components/stepper/stepper-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}:host([last]) .ids-step:after{content:none}.ids-stepper .ids-step:last-child:after{display:none}.ids-step{background-color:var(--IDS-COLOR-NEUTRAL-100);border:var(--IDS-STEP__BORDER);border-radius:5px;display:flex;flex-direction:column;margin-bottom:16px;padding:16px;position:relative}.ids-step:after{background-color:var(--IDS-STEP__AFTER-BACKGROUND-COLOR);bottom:-17px;content:\"\";height:16px;left:36px;position:absolute;width:4px}.ids-step .ids-step__label{color:var(--IDS-STEP__LABEL-COLOR);font-size:1rem}.ids-step .ids-step__button{background:none;border:none;border-radius:5px;cursor:pointer;display:block;width:100%}.ids-step .ids-step__button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-step .ids-step__button.ids-step__button--disabled{cursor:default;pointer-events:none}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__label{color:var(--IDS-STEP--DISABLED__LABEL-COLOR);font-style:italic}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline{color:var(--IDS-STEP--DISABLED__HEADLINE-COLOR);font-style:italic}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__chevron{display:none}.ids-step .ids-step__button-inner{align-items:center;display:flex;justify-content:space-between}.ids-step .ids-step__button-text{display:flex;flex:1 auto}.ids-step .ids-step__indicator-wrapper{align-items:flex-start;display:flex}.ids-step .ids-step__indicator{align-items:center;background-color:var(--IDS-STEP__INDICATOR-BACKGROUND-COLOR);border:var(--IDS-STEP__INDICATOR-BORDER);border-radius:100px;color:var(--IDS-STEP__INDICATOR-COLOR);display:flex;flex-direction:column;font-family:var(--IDS-STEP__INDICATOR-FONT-FAMILY);font-size:1.25rem;font-weight:400!important;height:42px;justify-content:center;width:42px}.ids-step .ids-step__indicator.ids-step__indicator--selected{background-color:var(--IDS-STEP--SELECTED__INDICATOR-BACKGROUND-COLOR);color:var(--IDS-COLOR-NEUTRAL-100)}.ids-step .ids-step__indicator.ids-step__indicator--valid{background-color:var(--IDS-STEP--VALID__INDICATOR-BACKGROUND-COLOR);border:var(--IDS-STEP--VALID__INDICATOR-BORDER)}.ids-step .ids-step__indicator.ids-step__indicator--invalid{background-color:var(--IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR);border:var(--IDS-STEP--INVALID__INDICATOR-BORDER)}.ids-step .ids-step__headline-label{align-self:center;display:flex;flex-direction:column;padding-left:16px}.ids-step .ids-step__label{align-self:flex-start;display:flex}.ids-step .ids-step__headline,.ids-step ::slotted([slot=headline]){color:var(--IDS-STEP__HEADLINE-COLOR);font-family:var(--IDS-STEP__HEADLINE-FONT-FAMILY);font-size:1.25rem;font-style:normal;font-weight:700;line-height:1.5rem;margin:0}.ids-step .ids-step__chevron{padding-left:10px;padding-right:10px}.ids-step .ids-step__content{padding:16px 0 0}@media only screen and (min-width:1024px){.ids-step{margin-bottom:20px}.ids-step:after{bottom:-21px;height:20px}.ids-step .ids-step__headline-label{padding-left:20px}.ids-step .ids-step__content{padding:20px 0 0 64px}}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}:host([last]) .ids-step:after{content:none}.ids-stepper .ids-step:last-child:after{display:none}.ids-step{background-color:var(--IDS-COLOR-NEUTRAL-100);border:var(--IDS-STEP__BORDER);border-radius:.3125rem;display:flex;flex-direction:column;margin-bottom:1rem;padding:1rem;position:relative}.ids-step:after{background-color:var(--IDS-STEP__AFTER-BACKGROUND-COLOR);bottom:-1.0625rem;content:\"\";height:1rem;left:2.25rem;position:absolute;width:.25rem}.ids-step .ids-step__label{color:var(--IDS-STEP__LABEL-COLOR);font-size:1rem}.ids-step .ids-step__button{background:none;border:none;border-radius:.3125rem;cursor:pointer;display:block;width:100%}.ids-step .ids-step__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-step .ids-step__button.ids-step__button--disabled{cursor:default;pointer-events:none}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__label{color:var(--IDS-STEP--DISABLED__LABEL-COLOR);font-style:italic}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline{color:var(--IDS-STEP--DISABLED__HEADLINE-COLOR);font-style:italic}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__chevron{display:none}.ids-step .ids-step__button-inner{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.ids-step .ids-step__button-text{align-items:center;display:flex;flex:1 auto;flex-wrap:wrap;justify-content:space-between}.ids-step .ids-step__indicator-wrapper{align-items:flex-start;display:flex}.ids-step .ids-step__indicator{align-items:center;background-color:var(--IDS-STEP__INDICATOR-BACKGROUND-COLOR);border:var(--IDS-STEP__INDICATOR-BORDER);border-radius:6.25rem;color:var(--IDS-STEP__INDICATOR-COLOR);display:flex;flex-direction:column;font-family:var(--IDS-STEP__INDICATOR-FONT-FAMILY);font-size:1.25rem;font-weight:400!important;height:2.625rem;justify-content:center;width:2.625rem}.ids-step .ids-step__indicator.ids-step__indicator--selected{background-color:var(--IDS-STEP--SELECTED__INDICATOR-BACKGROUND-COLOR);color:var(--IDS-COLOR-NEUTRAL-100)}.ids-step .ids-step__indicator.ids-step__indicator--valid{background-color:var(--IDS-STEP--VALID__INDICATOR-BACKGROUND-COLOR);border:var(--IDS-STEP--VALID__INDICATOR-BORDER)}.ids-step .ids-step__indicator.ids-step__indicator--invalid{background-color:var(--IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR);border:var(--IDS-STEP--INVALID__INDICATOR-BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-step .ids-step__headline-label{align-self:center;display:flex;flex-direction:column}.ids-step .ids-step__label{align-self:flex-start;display:flex}.ids-step .ids-step__headline,.ids-step ::slotted([slot=headline]){color:var(--IDS-STEP__HEADLINE-COLOR);font-family:var(--IDS-STEP__HEADLINE-FONT-FAMILY);font-size:1.25rem;font-style:normal;font-weight:700;line-height:1.5rem;margin:0}.ids-step .ids-step__chevron{padding-left:.625rem;padding-right:.625rem}.ids-step .ids-step__content{padding:1rem 0 0}@media only screen and (min-width:1024px){.ids-step{margin-bottom:1.25rem}.ids-step:after{bottom:-1.3125rem;height:1.25rem}.ids-step .ids-step__headline-label{padding-left:1.25rem}.ids-step .ids-step__content{padding:1.25rem 0 0 4rem}}";
 
 var stepperLit = css`${unsafeCSS(css_248z)}`;
 

package/components/stepper/stepper.css

@@ -14,7 +14,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -31,11 +31,11 @@
 }
 
 .ids-step {
-  margin-bottom: 16px;
-  padding: 16px;
+  margin-bottom: 1rem;
+  padding: 1rem;
   position: relative;
   border: var(--IDS-STEP__BORDER);
-  border-radius: 5px;
+  border-radius: 0.3125rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   display: flex;
   flex-direction: column;
@@ -44,10 +44,10 @@
   content: "";
   position: absolute;
   background-color: var(--IDS-STEP__AFTER-BACKGROUND-COLOR);
-  width: 4px;
-  height: 16px;
-  left: 36px;
-  bottom: -17px;
+  width: 0.25rem;
+  height: 1rem;
+  left: 2.25rem;
+  bottom: -1.0625rem;
 }
 .ids-step .ids-step__label {
   font-size: 1rem;
@@ -58,12 +58,12 @@
   display: block;
   background: none;
   border: none;
-  border-radius: 5px;
+  border-radius: 0.3125rem;
   cursor: pointer;
 }
 .ids-step .ids-step__button:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-step .ids-step__button.ids-step__button--disabled {
   pointer-events: none;
@@ -82,12 +82,16 @@
 }
 .ids-step .ids-step__button-inner {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 .ids-step .ids-step__button-text {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
   flex: 1 auto;
+  flex-wrap: wrap;
 }
 .ids-step .ids-step__indicator-wrapper {
   display: flex;
@@ -98,9 +102,9 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 42px;
-  height: 42px;
-  border-radius: 100px;
+  width: 2.625rem;
+  height: 2.625rem;
+  border-radius: 6.25rem;
   background-color: var(--IDS-STEP__INDICATOR-BACKGROUND-COLOR);
   border: var(--IDS-STEP__INDICATOR-BORDER);
   color: var(--IDS-STEP__INDICATOR-COLOR);
@@ -119,9 +123,9 @@
 .ids-step .ids-step__indicator.ids-step__indicator--invalid {
   background-color: var(--IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR);
   border: var(--IDS-STEP--INVALID__INDICATOR-BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
 .ids-step .ids-step__headline-label {
-  padding-left: 16px;
   display: flex;
   flex-direction: column;
   align-self: center;
@@ -141,24 +145,24 @@
   margin: 0;
 }
 .ids-step .ids-step__chevron {
-  padding-right: 10px;
-  padding-left: 10px;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
 }
 .ids-step .ids-step__content {
-  padding: 16px 0 0 0;
+  padding: 1rem 0 0 0;
 }
 @media only screen and (min-width: 1024px) {
   .ids-step {
-    margin-bottom: 20px;
+    margin-bottom: 1.25rem;
   }
   .ids-step::after {
-    height: 20px;
-    bottom: -21px;
+    height: 1.25rem;
+    bottom: -1.3125rem;
   }
   .ids-step .ids-step__headline-label {
-    padding-left: 20px;
+    padding-left: 1.25rem;
   }
   .ids-step .ids-step__content {
-    padding: 20px 0 0 64px;
+    padding: 1.25rem 0 0 4rem;
   }
 }

package/components/table/table.css

@@ -6,22 +6,22 @@
   border-left: var(--IDS-TABLE__BORDER-LR);
   border-right: var(--IDS-TABLE__BORDER-LR);
   border-bottom: var(--IDS-TABLE__BORDER-BOTTOM);
-  border-spacing: 0px;
+  border-spacing: 0;
   overflow: hidden;
 }
 .ids-table th {
-  background-color: var(--IDS-TABLE-HEAD__BACKGROUND_COLOR);
+  background-color: var(--IDS-TABLE__HEAD-BACKGROUND-COLOR);
   text-align: start;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 .ids-table th,
 .ids-table td {
-  padding: 10px;
+  padding: 0.625rem;
 }
 .ids-table td,
 .ids-table th {
-  border-left: var(--IDS-TABLE-CELL__BORDER);
-  border-top: var(--IDS-TABLE-CELL__BORDER);
+  border-left: var(--IDS-TABLE__CELL-BORDER);
+  border-top: var(--IDS-TABLE__CELL-BORDER);
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 .ids-table tr:first-child th {

package/components/tabs/tab-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ":host{border-radius:var(--IDS-TAB_BORDER-RADIUS)}:host(:not([selected]):focus){outline:var(--focus_outline);outline-offset:2px}.ids-tab{-webkit-touch-callout:none;align-items:flex-end;background:none;background:var(--IDS-TAB_BACKGROUND-COLOR);border:none;border:var(--IDS-TAB_BORDER);border-radius:var(--IDS-TAB_BORDER-RADIUS);box-shadow:var(--IDS-TAB_BOX-SHADOW);color:inherit;cursor:pointer;font:inherit;min-height:24px;min-width:24px;outline:inherit;outline:none;padding:10px 23px 14px;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ids-tab,.ids-tab .ids-tab__label{display:flex;justify-content:center}.ids-tab .ids-tab__label{color:var(--IDS-TAB_COLOR);flex-direction:column;font-size:1rem;font-weight:400}.ids-tab ids-notification-badge{margin-bottom:-2px;margin-left:6px}.ids-tab.ids-tab--has-icon .ids-tab__label,.ids-tab:has(.ids-tab__icon) .ids-tab__label{line-height:35px;margin-bottom:-7px}.ids-tab .ids-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;display:flex!important}.ids-tab:after{background-color:transparent;bottom:var(--IDS-TAB--SELECTED--AFTER_BOTTOM);content:\"\";height:var(--IDS-TAB--SELECTED--AFTER_HEIGHT);left:-1px;position:absolute;right:0;width:calc(100% + 2px)}.ids-tab.ids-tab--selected{background-color:#fff;border:var(--IDS-TAB--SELECTED-BORDER);box-shadow:var(--IDS-TAB--SELECTED_BOX-SHADOW)}.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR)}.ids-tab:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}";
+var css_248z = ":host{border-radius:var(--IDS-TAB__BORDER-RADIUS)}:host(:not([selected]):focus){outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.125rem}.ids-tab{-webkit-touch-callout:none;align-items:flex-end;background:none;background:var(--IDS-TAB_BACKGROUND-COLOR);border:none;border:var(--IDS-TAB__BORDER);border-radius:var(--IDS-TAB__BORDER-RADIUS);box-shadow:var(--IDS-TAB_BOX-SHADOW);color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;outline:none;padding:.625rem 1.438rem .875rem;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ids-tab,.ids-tab .ids-tab__label{display:flex;justify-content:center}.ids-tab .ids-tab__label{color:var(--IDS-TAB__COLOR);flex-direction:column;font-size:1rem;font-weight:400}.ids-tab ids-notification-badge{margin-bottom:-.125rem;margin-left:.375rem}.ids-tab.ids-tab--has-icon .ids-tab__label,.ids-tab:has(.ids-tab__icon) .ids-tab__label{line-height:2.188rem;margin-bottom:-.438rem}.ids-tab .ids-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;display:flex!important}.ids-tab:after{background-color:transparent;bottom:var(--IDS-TAB--SELECTED__AFTER-BOTTOM);content:\"\";height:var(--IDS-TAB--SELECTED__AFTER-HEIGHT);left:-.063rem;position:absolute;right:0;width:calc(100% + .125rem)}.ids-tab.ids-tab--selected{background-color:var(--IDS-COLOR-NEUTRAL-100);border:var(--IDS-TAB--SELECTED-BORDER);box-shadow:var(--IDS-TAB--SELECTED__BOX-SHADOW)}.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-TAB--SELECTED__AFTER-BACKGROUND-COLOR)}.ids-tab:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}";
 
 var tabLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tabs/tab-panel-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ":host([selected=true]){display:block}.ids-tab-panel{display:none;outline-color:var(--focus-outline_color);outline-offset:2px;padding-top:1.5rem}.ids-tab-panel .ids-tab-panel--hidden{display:none}.ids-tab-panel.ids-tab-panel--compact{padding-top:0}.ids-tab-panel.ids-tab-panel--selected{display:block}";
+var css_248z = ":host([selected=true]){display:block}.ids-tab-panel{display:none;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:.125rem;padding-top:1.5rem}.ids-tab-panel .ids-tab-panel--hidden{display:none}.ids-tab-panel.ids-tab-panel--compact{padding-top:0}.ids-tab-panel.ids-tab-panel--selected{display:block}";
 
 var tabPanelLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tabs/tab-panel.css

@@ -5,8 +5,8 @@
 .ids-tab-panel {
   display: none;
   padding-top: 1.5rem;
-  outline-offset: 2px;
-  outline-color: var(--focus-outline_color);
+  outline-offset: 0.125rem;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR);
 }
 .ids-tab-panel .ids-tab-panel--hidden {
   display: none;