@inera/ids-design 5.2.1 → 5.3.0

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

@@ -22,11 +22,16 @@
 /*******
 * A11Y
 ********/
-:host {
-  display: contents;
-}
-
 .ids-side-panel {
+  background-color: var(--IDS-OVERLAY__BACKGROUND-COLOR);
+  overflow: hidden;
+  z-index: 1;
+}
+.ids-side-panel .ids-side-panel__mobile-menu {
+  display: none;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-side-panel.ids-side-panel--regular {
   opacity: 0;
   visibility: hidden;
   position: fixed;
@@ -37,10 +42,9 @@
   z-index: 2;
   width: 0;
   height: 0;
-  background-color: var(--IDS-OVERLAY__BACKGROUND-COLOR);
   transition: opacity 0s linear 0.2s, visibility 0.3s, width 0s linear 0.4s, height 0s linear 0.4s;
 }
-.ids-side-panel .ids-side-panel__panel {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-left: 0;
   box-sizing: border-box;
@@ -54,7 +58,7 @@
   transform: translateY(100vh);
   transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ids-side-panel .ids-side-panel__content {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__content {
   width: 100%;
   padding-bottom: 20px;
   box-sizing: border-box;
@@ -62,48 +66,48 @@
   overflow-y: auto;
   order: 1;
 }
-.ids-side-panel .ids-side-panel__content::-webkit-scrollbar {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar {
   width: 14px;
   position: absolute;
   margin-left: -20px;
   margin-top: 4px;
 }
-.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-track {
+.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;
   margin-bottom: 0;
 }
-.ids-side-panel .ids-side-panel__content::-webkit-resizer {
+.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__content::-webkit-scrollbar-corner {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-corner {
   background-color: transparent;
 }
-.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-thumb {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb {
   cursor: auto;
   background: var(--IDS-SCROLL_COLOR);
   border-radius: 10px;
   box-sizing: border-box;
   border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
 }
-.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-thumb:hover {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb:hover {
   background: var(--IDS-SCROLL_HOVER-COLOR);
 }
-.ids-side-panel .ids-side-panel__inner {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__inner {
   padding: 8px;
 }
-.ids-side-panel .ids-side-panel__actions {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions {
   text-align: right;
   width: 100%;
   margin-right: 5px;
   order: 0;
 }
-.ids-side-panel .ids-side-panel__actions .ids-side-panel__close-button {
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button {
   background: none;
   color: inherit;
   border: none;
@@ -112,70 +116,73 @@
   cursor: pointer;
   outline: inherit;
 }
-.ids-side-panel .ids-side-panel__actions .ids-side-panel__close-button:focus {
+.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;
 }
-.ids-side-panel.ids-side-panel--show {
+.ids-side-panel.ids-side-panel--regular.ids-side-panel--show {
   opacity: 1;
   visibility: visible;
   width: 100%;
   height: 100vh;
   transition: width 0s, height 0s;
 }
-.ids-side-panel.ids-side-panel--show .ids-side-panel__panel {
+.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel {
   transform: translateY(30vh);
-  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 @media (min-width: 640px) {
-  .ids-side-panel .ids-side-panel__panel {
+  .ids-side-panel.ids-side-panel--regular .ids-side-panel__panel {
     height: 50vh;
   }
-  .ids-side-panel.ids-side-panel--show .ids-side-panel__panel {
+  .ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel {
     transform: translateY(50vh);
   }
 }
 @media (min-width: 1024px) {
-  .ids-side-panel {
+  .ids-side-panel.ids-side-panel--regular {
     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;
-  }
-  .ids-side-panel .ids-side-panel__panel {
     border-left: 1px 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;
     transform: none;
     transition: none;
     height: 100%;
   }
-  .ids-side-panel .ids-side-panel__content,
-  .ids-side-panel .ids-side-panel__actions {
+  .ids-side-panel.ids-side-panel--regular .ids-side-panel__content,
+  .ids-side-panel.ids-side-panel--regular .ids-side-panel__actions {
     width: 350px;
   }
-  .ids-side-panel.ids-side-panel--show {
+  .ids-side-panel.ids-side-panel--regular.ids-side-panel--show {
     width: 380px;
     height: 100%;
     transform: none;
     transition: width 0.3s ease-in-out, visibility 0s, opacity 0s, transform linear 0s;
   }
-  .ids-side-panel.ids-side-panel--show .ids-side-panel__panel {
+  .ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel {
     transform: none;
     transition: none;
   }
-  .ids-side-panel.ids-side-panel--left .ids-side-panel__panel {
+  .ids-side-panel.ids-side-panel--regular.ids-side-panel--left {
     border-left: 0;
     border-right: 1px 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;
   }
-  .ids-side-panel.ids-side-panel--left .ids-side-panel__panel .ids-side-panel__content {
+  .ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel .ids-side-panel__content {
     direction: ltr;
   }
-  .ids-side-panel.ids-side-panel--elevated {
+  .ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated {
     position: fixed;
     top: 0;
     right: 0;
@@ -184,15 +191,259 @@
     height: 100%;
     left: auto;
     z-index: 2;
+    border-left: 0;
+    box-shadow: -3px 0 4px -2px rgba(0, 0, 0, 0.2);
   }
-  .ids-side-panel.ids-side-panel--elevated.ids-side-panel--left {
+  .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);
   }
-  .ids-side-panel.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel {
+  .ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel {
     padding: 20px 16px 20px 0;
   }
-  .ids-side-panel.ids-side-panel--elevated.ids-side-panel--show {
+  .ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--show {
+    width: 380px;
+  }
+}
+.ids-side-panel.ids-side-panel--menu {
+  position: relative;
+  display: flex;
+  width: 50px;
+  height: 100%;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border-right: 1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
+  padding: 0;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 20px 0 0 0;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__content {
+  width: 100%;
+  height: 100%;
+  padding-right: 8px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0s, opacity 0s;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar {
+  width: 14px;
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 4px;
+}
+.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;
+  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;
+  box-sizing: border-box;
+  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb:hover {
+  background: var(--IDS-SCROLL_HOVER-COLOR);
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__actions {
+  position: absolute;
+  top: 20px;
+  left: 12px;
+}
+.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);
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0s, opacity 0s;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-link {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.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;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger {
+  transition: 0.2s;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines {
+  display: block;
+  width: 1.3125rem;
+  border-radius: 2px;
+  transition: 0.2s;
+  background-color: var(--IDS-COLOR-ACCENT-40);
+  position: relative;
+  height: 3px;
+  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;
+  transition: 0.2s;
+  background-color: var(--IDS-COLOR-ACCENT-40);
+  position: absolute;
+  left: 0;
+  content: "";
+  -webkit-transform-origin: 0.09375rem center;
+  transform-origin: 0.09375rem center;
+}
+.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;
+  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 {
+  -webkit-transform-origin: 0.13393rem center;
+  transform-origin: 0.13393rem center;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before {
+  top: 8px;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after {
+  top: -8px;
+}
+.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);
+  transform: scale3d(0.8, 0.8, 0.8);
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
+  background: transparent;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before, .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
+  -ms-transform-origin: 50% 50%;
+  -webkit-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  top: 0;
+  width: 2rem;
+  left: -5px;
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate3d(0, 0, 1, 45deg);
+  transform: rotate3d(0, 0, 1, 45deg);
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
+  -ms-transform: rotate(-45deg);
+  -webkit-transform: rotate3d(0, 0, 1, -45deg);
+  transform: rotate3d(0, 0, 1, -45deg);
+}
+.ids-side-panel.ids-side-panel--menu.ids-side-panel--show {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-right: 0;
+}
+.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__mobile-menu {
+  display: block;
+  margin-top: 40px;
+}
+.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 {
+  opacity: 1;
+  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;
+  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));
+}
+@media (min-width: 1024px) {
+  .ids-side-panel.ids-side-panel--menu {
+    transition: width 0.3s ease-in-out;
+  }
+  .ids-side-panel.ids-side-panel--menu .ids-side-panel__mobile-menu {
+    display: none !important;
+  }
+  .ids-side-panel.ids-side-panel--menu .ids-side-panel__panel {
+    width: 380px;
+    position: relative;
+    transform: none;
+    transition: none;
+  }
+  .ids-side-panel.ids-side-panel--menu .ids-side-panel__content {
+    width: 380px;
+    margin-top: 36px;
+  }
+  .ids-side-panel.ids-side-panel--menu .ids-side-panel__footer {
+    width: 380px;
+  }
+  .ids-side-panel.ids-side-panel--menu.ids-side-panel--show {
+    position: relative;
+    width: 380px;
+    height: 100%;
+    transform: none;
+    transition: width 0.3s ease-in-out;
+    border-right: 1px 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);
+  }
+  .ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show {
+    position: fixed;
     width: 380px;
+    transform: translateX(330px);
+    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:#fff;border:var(--stepper-step_border);border-radius:5px;display:flex;flex-direction:column;margin-bottom:16px;padding:16px;position:relative}.ids-step:after{background-color:var(--stepper-step--after_background-color);bottom:-17px;content:\" \";height:16px;left:36px;position:absolute;width:4px}.ids-step .ids-step__label{color:var(--stepper-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(--stepper-step-label--disabled_color);font-style:italic}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline{color:var(--stepper-step-headline--disabled_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(--stepper-step-indicator_background-color);border:var(--stepper-step-indicator_border);border-radius:100px;color:var(--stepper-step-indicator_color);display:flex;flex-direction:column;font-family:var(--stepper-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(--stepper-step-indicator-selected_background-color);color:#fff}.ids-step .ids-step__indicator.ids-step__indicator--valid{background-color:var(--stepper-step-indicator-valid_background-color);border:var(--stepper-step-indicator-valid_border)}.ids-step .ids-step__indicator.ids-step__indicator--invalid{background-color:var(--stepper-step-indicator-invalid_background-color);border:var(--stepper-step-indicator-invalid_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(--stepper-step-headline_color);font-family:var(--stepper-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: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 stepperLit = css`${unsafeCSS(css_248z)}`;
 

package/components/stepper/stepper.css

@@ -34,16 +34,16 @@
   margin-bottom: 16px;
   padding: 16px;
   position: relative;
-  border: var(--stepper-step_border);
+  border: var(--IDS-STEP__BORDER);
   border-radius: 5px;
-  background-color: white;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
   display: flex;
   flex-direction: column;
 }
 .ids-step::after {
-  content: " ";
+  content: "";
   position: absolute;
-  background-color: var(--stepper-step--after_background-color);
+  background-color: var(--IDS-STEP__AFTER-BACKGROUND-COLOR);
   width: 4px;
   height: 16px;
   left: 36px;
@@ -51,7 +51,7 @@
 }
 .ids-step .ids-step__label {
   font-size: 1rem;
-  color: var(--stepper-step-label_color);
+  color: var(--IDS-STEP__LABEL-COLOR);
 }
 .ids-step .ids-step__button {
   width: 100%;
@@ -71,11 +71,11 @@
 }
 .ids-step .ids-step__button.ids-step__button--disabled .ids-step__label {
   font-style: italic;
-  color: var(--stepper-step-label--disabled_color);
+  color: var(--IDS-STEP--DISABLED__LABEL-COLOR);
 }
 .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline {
   font-style: italic;
-  color: var(--stepper-step-headline--disabled_color);
+  color: var(--IDS-STEP--DISABLED__HEADLINE-COLOR);
 }
 .ids-step .ids-step__button.ids-step__button--disabled .ids-step__chevron {
   display: none;
@@ -101,24 +101,24 @@
   width: 42px;
   height: 42px;
   border-radius: 100px;
-  background-color: var(--stepper-step-indicator_background-color);
-  border: var(--stepper-step-indicator_border);
-  color: var(--stepper-step-indicator_color);
-  font-family: var(--stepper-step-indicator_font-family);
+  background-color: var(--IDS-STEP__INDICATOR-BACKGROUND-COLOR);
+  border: var(--IDS-STEP__INDICATOR-BORDER);
+  color: var(--IDS-STEP__INDICATOR-COLOR);
+  font-family: var(--IDS-STEP__INDICATOR-FONT-FAMILY);
   font-weight: 400 !important;
   font-size: 1.25rem;
 }
 .ids-step .ids-step__indicator.ids-step__indicator--selected {
-  background-color: var(--stepper-step-indicator-selected_background-color);
-  color: white;
+  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(--stepper-step-indicator-valid_background-color);
-  border: var(--stepper-step-indicator-valid_border);
+  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(--stepper-step-indicator-invalid_background-color);
-  border: var(--stepper-step-indicator-invalid_border);
+  background-color: var(--IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR);
+  border: var(--IDS-STEP--INVALID__INDICATOR-BORDER);
 }
 .ids-step .ids-step__headline-label {
   padding-left: 16px;
@@ -132,12 +132,12 @@
 }
 .ids-step .ids-step__headline,
 .ids-step ::slotted([slot=headline]) {
-  font-family: var(--stepper-step-headline_font-family);
+  font-family: var(--IDS-STEP__HEADLINE-FONT-FAMILY);
   font-style: normal;
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 1.5rem;
-  color: var(--stepper-step-headline_color);
+  color: var(--IDS-STEP__HEADLINE-COLOR);
   margin: 0;
 }
 .ids-step .ids-step__chevron {

package/components/tabs/tabs-lit.js

@@ -2,7 +2,7 @@ import { css, unsafeCSS } from 'lit';
 
 var css_248z$1 = ".ids-tabs{align-items:flex-end;border-bottom:var(--IDS-TABS_BORDER-BOTTOM);display:flex;gap:3px;height:3rem;padding:0 20px;position:relative}.ids-tabs.ids-tabs--unresponsive{display:flex!important}.ids-tabs.ids-tabs--has-icons{height:4.7em}.ids-tabs:before{bottom:0;box-shadow:inset 0 -4px 4px -4px rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED--BEFORE_CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}.ids-tab-panels{position:relative;z-index:1}";
 
-var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT_BACKGROUND);border:var(--select_border);border-bottom:var(--IDS-INPUT_BORDER-BOTTOM);border-radius:var(--IDS-INPUT_BORDER-RADIUS);color:var(--IDS-INPUT_COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--font-family_1)!important;font-size:16px;overflow:hidden;padding:.75rem 1.25rem;padding-right:50px!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select:disabled{background:var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);background-image:var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);border:none}.ids-select.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);background-image:var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);border:1px solid transparent}.ids-select:disabled{background-color:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR)!important;background-image:var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);border:var(--IDS-FORM-DISABLED_BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select.ids-input--light{background-color:#fff}.ids-select:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:25px;top:0;transform:rotate(90deg);width:12px}.ids-select-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-wrapper:has(.ids-select:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}.ids-select:disabled{cursor:default}";
+var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-bottom:var(--IDS-INPUT__BORDER);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--font-family_1)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select:disabled{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER)}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:0;transform:rotate(90deg);width:12px}.ids-select-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-wrapper:has(.ids-select:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}";
 
 var tabsLit = css`${unsafeCSS(css_248z)} ${unsafeCSS(css_248z$1)}`;
 

package/components/tooltip/tooltip-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ":host{display:inline-flex}.ids-tooltip{display:inline-block;position:relative!important}.ids-tooltip .ids-tooltip__trigger{display:inline}.ids-tooltip .ids-tooltip__content{background-color:#fff;border:1px solid var(--tooltip_border-color);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 10px rgba(0,0,0,.3);box-sizing:border-box;color:var(--tooltip_color);display:none;max-width:90vw;padding:10px 20px;position:absolute;text-align:left;width:max-content;z-index:2}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-10px;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-10px;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-10px;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-10px;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-10px;left:50%;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-10px;right:0;transform:translateY(100%)}.ids-tooltip:focus-within .ids-tooltip__content,.ids-tooltip:hover .ids-tooltip__content{display:inline-block}";
+var css_248z = ":host{display:inline-flex}.ids-tooltip{display:inline-block;position:relative!important}.ids-tooltip .ids-tooltip__trigger{display:inline}.ids-tooltip .ids-tooltip__content{background-color:#fff;border:1px solid var(--IDS-TOOLTIP__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 10px rgba(0,0,0,.3);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;max-width:90vw;padding:10px 20px;position:absolute;text-align:left;width:max-content;z-index:2}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-10px;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-10px;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-10px;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-10px;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-10px;left:50%;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-10px;right:0;transform:translateY(100%)}.ids-tooltip:focus-within .ids-tooltip__content,.ids-tooltip:hover .ids-tooltip__content{display:inline-block}";
 
 var tooltipLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tooltip/tooltip.css

@@ -11,7 +11,7 @@
 }
 .ids-tooltip .ids-tooltip__content {
   display: none;
-  color: var(--tooltip_color);
+  color: var(--IDS-TOOLTIP__COLOR);
   box-sizing: border-box;
   position: absolute;
   text-align: left;
@@ -19,7 +19,7 @@
   max-width: 90vw;
   z-index: 2;
   background-color: white;
-  border: 1px solid var(--tooltip_border-color);
+  border: 1px solid var(--IDS-TOOLTIP__BORDER-COLOR);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   border-radius: var(--IDS-BORDER-RADIUS);
   padding: 10px 20px;