@inera/ids-design 6.2.0 → 7.0.1

package/components/region-icon/region-icon.css

@@ -0,0 +1,191 @@
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBARS
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-region-icon {
+  display: flex;
+}
+.ids-region-icon.ids-region-icon--inline {
+  display: inline-flex;
+}
+.ids-region-icon.ids-region-icon--xs {
+  font-size: 1.5rem;
+}
+.ids-region-icon.ids-region-icon--s {
+  font-size: 2rem;
+}
+.ids-region-icon.ids-region-icon--m {
+  font-size: 2.5rem;
+}
+.ids-region-icon.ids-region-icon--l {
+  font-size: 3rem;
+}
+.ids-region-icon.ids-region-icon--ml {
+  font-size: 2.5rem;
+}
+@media (min-width: 1024px) {
+  .ids-region-icon.ids-region-icon--ml {
+    font-size: 3rem;
+  }
+}
+.ids-region-icon.ids-region-icon--color-preset-1 {
+  color: var(--IDS-ICON__COLOR-PRESET-1);
+}
+.ids-region-icon.ids-region-icon--color-preset-2 {
+  color: var(--IDS-ICON__COLOR-PRESET-2);
+}
+.ids-region-icon.ids-region-icon--color-preset-3 {
+  color: var(--IDS-ICON__COLOR-PRESET-3);
+}
+.ids-region-icon.ids-region-icon--color-preset-4 {
+  color: var(--IDS-ICON__COLOR-PRESET-4);
+}
+.ids-region-icon.ids-region-icon--stockholm:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e947";
+}
+.ids-region-icon.ids-region-icon--blekinge:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e99c";
+}
+.ids-region-icon.ids-region-icon--dalarna:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e99d";
+}
+.ids-region-icon.ids-region-icon--gavleborg:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e99e";
+}
+.ids-region-icon.ids-region-icon--gotland:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e99f";
+}
+.ids-region-icon.ids-region-icon--halland:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a0";
+}
+.ids-region-icon.ids-region-icon--jamtland-harjedalen:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a1";
+}
+.ids-region-icon.ids-region-icon--jonkoping:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a2";
+}
+.ids-region-icon.ids-region-icon--kalmar:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a3";
+}
+.ids-region-icon.ids-region-icon--kronoberg:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a4";
+}
+.ids-region-icon.ids-region-icon--norrbotten:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a5";
+}
+.ids-region-icon.ids-region-icon--orebro:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a6";
+}
+.ids-region-icon.ids-region-icon--ostergotland:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a7";
+}
+.ids-region-icon.ids-region-icon--skane:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a8";
+}
+.ids-region-icon.ids-region-icon--sormland:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9a9";
+}
+.ids-region-icon.ids-region-icon--uppsala:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9aa";
+}
+.ids-region-icon.ids-region-icon--varmland:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9ab";
+}
+.ids-region-icon.ids-region-icon--vasterbotten:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9ac";
+}
+.ids-region-icon.ids-region-icon--vasternorrland:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9ad";
+}
+.ids-region-icon.ids-region-icon--vastmanland:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9ae";
+}
+.ids-region-icon.ids-region-icon--vastragotaland:before {
+  font-family: Inera-Design-Icons !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  content: "\e9af";
+}

package/components/side-panel/side-panel-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}}.ids-side-panel{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);overflow:hidden;z-index:1}.ids-side-panel.ids-side-panel--regular{bottom:0;height:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity 0s linear .2s,visibility .3s,width 0s linear .4s,height 0s linear .4s;visibility:hidden;width:0;z-index:2}.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;display:flex;flex-direction:column;height:70vh;overflow-x:hidden;padding:1.25rem 1rem 0;position:relative;transform:translateY(100vh);transition:transform .3s cubic-bezier(.4,0,.2,1);width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{box-sizing:border-box;order:1;overflow-x:hidden;overflow-y:auto;padding-bottom:1.25rem;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__COLOR);border:.125rem solid var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;box-sizing:border-box;cursor:auto}.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--regular .ids-side-panel__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:has(.ids-side-panel__footer){display:flex;flex-direction:column;justify-content:space-between}.ids-side-panel.ids-side-panel--regular .ids-side-panel__inner{padding:.5rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions{margin-right:.313rem;order:0;text-align:right;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;height:1.25rem;outline:inherit;padding:0;position:relative;width:1.25rem}.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--regular .ids-side-panel__close-button:before{color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;pointer-events:none;position:absolute;top:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:active:before,.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus:before,.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100vh;opacity:1;transition:width 0s,height 0s;visibility:visible;width:100%}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:translateY(30vh);transition:transform .3s cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:50vh}.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--regular{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;overflow-x:hidden;position:relative;transform:none;transition:width .3s ease-in-out,opacity 0s linear .3s,height .4s,visibility .4s,transform 0s linear;width:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:100%;padding:1.25rem 0 0 1rem;top:0;transform:none;transition:none}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions,.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{width:21.875rem}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100%;transform:none;transition:width .3s ease-in-out,visibility 0s,opacity 0s,transform 0s linear;width:23.75rem}.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--regular.ids-side-panel--left{border-left:0;border-right:.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: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}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated{border-left:0;bottom:0;box-shadow:-.188rem 0 .25rem -.125rem rgba(0,0,0,.2);height:100%;left:auto;position:fixed;right:0;top:0;width:0;z-index:2}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2);left:0;right:auto}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel{padding:1.25rem 1rem 1.25rem 0}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--show{width:23.75rem}}.ids-side-panel.ids-side-panel--menu{background-color:var(--IDS-COLOR-NEUTRAL-100);border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;height:100%;padding:0;position:relative;width:3.125rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__inner{padding:.5rem .75rem .5rem .5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{box-sizing:border-box;display:flex;flex-direction:column;padding:1.25rem 0 0;position:relative;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{box-sizing:border-box;height:100%;opacity:0;overflow-x:hidden;overflow-y:auto;transition:visibility 0s,opacity 0s;visibility:hidden;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__COLOR);border:.125rem solid var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;box-sizing:border-box;cursor:auto}.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__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:has(.ids-side-panel__footer){display:flex;flex-direction:column;justify-content:space-between}.ids-side-panel.ids-side-panel--menu .ids-side-panel__actions{margin-right:1.25rem;text-align:right;width:2.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer{border-bottom:.5rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR);border-top:.063rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR);box-sizing:border-box;display:flex;flex-direction:column;gap:1.25rem;opacity:0;padding:1.25rem;text-align:left;transition:visibility 0s,opacity 0s;visibility:hidden}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links{display:flex;flex-direction:column;gap:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links ::slotted(*){display:block;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-text{line-height:1.5rem;margin-top:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger{background-color:transparent;border:0;cursor:pointer;height:1.875rem;margin-right:-.25rem;padding:0 .25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger{cursor:pointer;position:relative;transition:all .2s;user-select:none}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;display:block;height:.125rem;position:relative;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;content:\"\";display:inline-block;height:.125rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{top:.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after{top:-.5rem}.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:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.1rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:1.5rem}.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:rotate(45deg);transform:rotate(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:rotate(-45deg);transform:rotate(-45deg)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:0;bottom:0;left:0;position:fixed;right:0;top:0;width:100%}.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__content,.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__footer{opacity:1;transition:visibility 0s,opacity 0s;visibility:visible}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{bottom:0;left:auto;position:fixed;right:calc(100% - 3.125rem);top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);width:3.125rem;z-index:2}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{transform:translateX(calc(100% - 3.125rem));width:100%}@media (min-width:1024px){.ids-side-panel.ids-side-panel--menu{transition:width .3s ease-in-out}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{position:relative;transform:none;transition:none;width:23.75rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);height:100%;position:relative;transform:none;transition:width .3s ease-in-out;width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2)}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{position:fixed;transform:translateX(20.625rem);transition:transform .3s cubic-bezier(.4,0,.2,1);width:23.75rem}}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-side-panel{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);overflow:hidden;z-index:1}.ids-side-panel.ids-side-panel--regular{bottom:0;height:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity 0s linear .2s,visibility .3s,width 0s linear .4s,height 0s linear .4s;visibility:hidden;width:0;z-index:2}.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;display:flex;flex-direction:column;height:70vh;overflow-x:hidden;padding:1.25rem 1rem 0;position:relative;transform:translateY(100vh);transition:transform .3s cubic-bezier(.4,0,.2,1);width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{box-sizing:border-box;order:1;overflow-x:hidden;overflow-y:auto;padding-bottom:1.25rem;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar{width:.625rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-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__content:has(.ids-side-panel__footer){display:flex;flex-direction:column;justify-content:space-between}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:focus,.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--regular .ids-side-panel__inner{margin:.5rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions{margin-right:.313rem;order:0;text-align:right;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;height:1.25rem;outline:inherit;padding:0;position:relative;width:1.25rem}.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--regular .ids-side-panel__close-button:before{color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;pointer-events:none;position:absolute;top:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:active:before,.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus:before,.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100vh;opacity:1;transition:width 0s,height 0s;visibility:visible;width:100%}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:translateY(30vh);transition:transform .3s cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:50vh}.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--regular{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;overflow-x:hidden;position:relative;transform:none;transition:width .3s ease-in-out,opacity 0s linear .3s,height .4s,visibility .4s,transform 0s linear;width:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:100%;padding:1.25rem 0 0 1rem;top:0;transform:none;transition:none}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions,.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{width:21.875rem}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100%;transform:none;transition:width .3s ease-in-out,visibility 0s,opacity 0s,transform 0s linear;width:23.75rem}.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--regular.ids-side-panel--left{border-left:0;border-right:.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: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}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated{border-left:0;bottom:0;box-shadow:-.188rem 0 .25rem -.125rem rgba(0,0,0,.2);height:100%;left:auto;position:fixed;right:0;top:0;width:0;z-index:2}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2);left:0;right:auto}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel{padding:1.25rem 1rem 1.25rem 0}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--show{width:23.75rem}}.ids-side-panel.ids-side-panel--menu{background-color:var(--IDS-COLOR-NEUTRAL-100);border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;height:100%;padding:0;position:relative;width:3.125rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__inner{padding:.5rem .75rem .5rem .5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{box-sizing:border-box;display:flex;flex-direction:column;padding:1.25rem 0 0;position:relative;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{box-sizing:border-box;height:100%;opacity:0;overflow-x:hidden;overflow-y:auto;transition:visibility 0s,opacity 0s;visibility:hidden;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar{width:.625rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-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__content:has(.ids-side-panel__footer){display:flex;flex-direction:column;justify-content:space-between}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:focus,.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--menu .ids-side-panel__actions{margin-right:1.25rem;text-align:right;width:2.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer{border-bottom:.5rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR);border-top:.063rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR);box-sizing:border-box;display:flex;flex-direction:column;gap:1.25rem;opacity:0;padding:1.25rem;text-align:left;transition:visibility 0s,opacity 0s;visibility:hidden}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links{display:flex;flex-direction:column;gap:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links ::slotted(*){display:block;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-text{line-height:1.5rem;margin-top:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger{background-color:transparent;border:0;cursor:pointer;height:1.875rem;margin-right:-.25rem;padding:0 .25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger{cursor:pointer;position:relative;transition:all .2s;user-select:none}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;cursor:pointer;display:block;height:.125rem;position:relative;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;content:\"\";display:inline-block;height:.125rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{top:.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after{top:-.5rem}.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:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.1rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:1.5rem}.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:rotate(45deg);transform:rotate(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:rotate(-45deg);transform:rotate(-45deg)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:0;bottom:0;left:0;position:fixed;right:0;top:0;width:100%}.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__content,.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__footer{opacity:1;transition:visibility 0s,opacity 0s;visibility:visible}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{bottom:0;left:auto;position:fixed;right:calc(100% - 3.125rem);top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);width:3.125rem;z-index:2}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{transform:translateX(calc(100% - 3.125rem));width:100%}@media (min-width:1024px){.ids-side-panel.ids-side-panel--menu{transition:width .3s ease-in-out}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{position:relative;transform:none;transition:none;width:23.75rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);height:100%;position:relative;transform:none;transition:width .3s ease-in-out;width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2)}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{position:fixed;transform:translateX(20.625rem);transition:transform .3s cubic-bezier(.4,0,.2,1);width:23.75rem}}";
 
 var sidePanelLit = css`${unsafeCSS(css_248z)}`;
 

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

@@ -66,24 +66,21 @@
   order: 1;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar {
-  width: 1rem;
-  position: absolute;
-  margin-left: -1.25rem;
-}
-.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-track {
-  background: var(--IDS-COLOR-NEUTRAL-99);
-  border-radius: 0.625rem;
-  margin-bottom: 0;
+  width: 0.625rem;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb {
   cursor: auto;
-  background: var(--IDS-SCROLL__COLOR);
+  background: var(--IDS-SCROLL__THUMB-COLOR);
   border-radius: 0.625rem;
-  box-sizing: border-box;
-  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
+  border: 0.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);
 }
 .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__THUMB-HOVER-COLOR);
+}
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);
+  border-radius: 0.625rem;
+  outline: 0.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR);
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-corner {
   background-color: transparent;
@@ -93,8 +90,12 @@
   justify-content: space-between;
   flex-direction: column;
 }
+.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:focus, .ids-side-panel.ids-side-panel--regular .ids-side-panel__content:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-offset: -0.125rem !important;
+}
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__inner {
-  padding: 0.5rem;
+  margin: 0.5rem;
 }
 .ids-side-panel.ids-side-panel--regular .ids-side-panel__actions {
   text-align: right;
@@ -251,24 +252,21 @@
   transition: visibility 0s, opacity 0s;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar {
-  width: 1rem;
-  position: absolute;
-  margin-left: -1.25rem;
-}
-.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-track {
-  background: var(--IDS-COLOR-NEUTRAL-99);
-  border-radius: 0.625rem;
-  margin-bottom: 0;
+  width: 0.625rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb {
   cursor: auto;
-  background: var(--IDS-SCROLL__COLOR);
+  background: var(--IDS-SCROLL__THUMB-COLOR);
   border-radius: 0.625rem;
-  box-sizing: border-box;
-  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
+  border: 0.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);
 }
 .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__THUMB-HOVER-COLOR);
+}
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);
+  border-radius: 0.625rem;
+  outline: 0.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR);
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-corner {
   background-color: transparent;
@@ -278,6 +276,10 @@
   justify-content: space-between;
   flex-direction: column;
 }
+.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:focus, .ids-side-panel.ids-side-panel--menu .ids-side-panel__content:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-offset: -0.125rem !important;
+}
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__actions {
   text-align: right;
   margin-right: 1.25rem;
@@ -316,6 +318,7 @@
   height: 1.875rem;
   padding: 0 0.25rem;
   margin-right: -0.25rem;
+  cursor: pointer;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger {
   transition: all 0.2s;
@@ -325,6 +328,7 @@
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines {
   display: block;
+  cursor: pointer;
   width: 1.3125rem;
   border-radius: 0.125rem;
   transition: all 0.2s;

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:.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:flex-start;display:flex;flex-wrap:wrap;gap:1rem;width:100%}.ids-step .ids-step__button-text{gap:.5rem;justify-content:space-between;min-height:2.625rem;width:calc(100% - 3.75rem)}.ids-step .ids-step__button-text,.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!important;font-weight:400!important;height:2.625rem;justify-content:center;position:relative;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--valid:before{color:var(--IDS-STEP--VALID__INDICATOR-ICON-COLOR);content:\"\\e93a\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem!important;pointer-events:none;position:absolute}.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-STEP--INVALID__INDICATOR-ICON-COLOR)}.ids-step .ids-step__indicator.ids-step__indicator--invalid:before{color:var(--IDS-STEP--INVALID__INDICATOR-ICON-COLOR);content:\"\\e91d\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem!important;pointer-events:none;position:absolute}.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-HEADING-M__FONT-FAMILY);font-size:var(--IDS-HEADING-M__FONT-SIZE);font-style:normal;font-weight:var(--IDS-HEADING-M__FONT-WEIGHT);letter-spacing:var(--IDS-HEADING-M__LETTER-SPACING);line-height:var(--IDS-HEADING-M__LINE-HEIGHT);margin:0!important;word-break:break-word}@media (min-width:1024px){.ids-step .ids-step__headline,.ids-step ::slotted([slot=headline]){font-size:var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);letter-spacing:var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);line-height:var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP)}}.ids-step .ids-step__chevron{flex-shrink:0;height:2.625rem;position:relative;width:1.25rem}.ids-step .ids-step__chevron:before{color:var(--IDS-STEP__CHEVRON-COLOR);content:\"\\e906\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-step .ids-step__chevron.ids-step__chevron--expanded:before{content:\"\\e909\"}.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 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,.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h1,.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h2,.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h3,.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h4{color:var(--IDS-STEP--DISABLED__HEADLINE-COLOR);font-family:var(--IDS-HEADING-M__FONT-FAMILY);font-size:var(--IDS-HEADING-M__FONT-SIZE);font-style:italic!important;font-style:normal;font-weight:var(--IDS-HEADING-M__FONT-WEIGHT);letter-spacing:var(--IDS-HEADING-M__LETTER-SPACING);line-height:var(--IDS-HEADING-M__LINE-HEIGHT)}@media (min-width:1024px){.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline,.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h1,.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h2,.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h3,.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h4{font-size:var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);letter-spacing:var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);line-height:var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP)}}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__chevron{display:none}.ids-step .ids-step__button-inner{align-items:flex-start;display:flex;flex-wrap:wrap;gap:1rem;width:100%}.ids-step .ids-step__button-text{gap:.5rem;justify-content:space-between;min-height:2.625rem;width:calc(100% - 3.75rem)}.ids-step .ids-step__button-text,.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!important;font-weight:400!important;height:2.625rem;justify-content:center;position:relative;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--valid:before{color:var(--IDS-STEP--VALID__INDICATOR-ICON-COLOR);content:\"\\e93a\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem!important;pointer-events:none;position:absolute}.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-STEP--INVALID__INDICATOR-ICON-COLOR)}.ids-step .ids-step__indicator.ids-step__indicator--invalid:before{color:var(--IDS-STEP--INVALID__INDICATOR-ICON-COLOR);content:\"\\e91d\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem!important;pointer-events:none;position:absolute}.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 .ids-step__headline h1,.ids-step .ids-step__headline h2,.ids-step .ids-step__headline h3,.ids-step .ids-step__headline h4,.ids-step ::slotted([slot=headline]){color:var(--IDS-STEP__HEADLINE-COLOR);font-family:var(--IDS-HEADING-M__FONT-FAMILY);font-size:var(--IDS-HEADING-M__FONT-SIZE);font-style:normal;font-weight:var(--IDS-HEADING-M__FONT-WEIGHT);letter-spacing:var(--IDS-HEADING-M__LETTER-SPACING);line-height:var(--IDS-HEADING-M__LINE-HEIGHT);margin:0!important;word-break:break-word}@media (min-width:1024px){.ids-step .ids-step__headline,.ids-step .ids-step__headline h1,.ids-step .ids-step__headline h2,.ids-step .ids-step__headline h3,.ids-step .ids-step__headline h4,.ids-step ::slotted([slot=headline]){font-size:var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);letter-spacing:var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);line-height:var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP)}}.ids-step .ids-step__chevron{flex-shrink:0;height:2.625rem;position:relative;width:1.25rem}.ids-step .ids-step__chevron:before{color:var(--IDS-STEP__CHEVRON-COLOR);content:\"\\e906\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-step .ids-step__chevron.ids-step__chevron--expanded:before{content:\"\\e909\"}.ids-step .ids-step__content{display:none;padding:1rem 0 0}.ids-step .ids-step__content.ids-step__content--expanded{display:block}@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__content{padding:1.25rem 0 0 4rem}}";
 
 var stepperLit = css`${unsafeCSS(css_248z)}`;
 

package/components/stepper/stepper.css

@@ -76,9 +76,30 @@
   font-style: italic;
   color: var(--IDS-STEP--DISABLED__LABEL-COLOR);
 }
-.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline {
-  font-style: italic;
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline,
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h1,
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h2,
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h3,
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h4 {
+  font-style: italic !important;
+  font-style: normal;
   color: var(--IDS-STEP--DISABLED__HEADLINE-COLOR);
+  font-family: var(--IDS-HEADING-M__FONT-FAMILY);
+  font-size: var(--IDS-HEADING-M__FONT-SIZE);
+  line-height: var(--IDS-HEADING-M__LINE-HEIGHT);
+  letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING);
+  font-weight: var(--IDS-HEADING-M__FONT-WEIGHT);
+}
+@media (min-width: 1024px) {
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline,
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h1,
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h2,
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h3,
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h4 {
+    font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);
+    line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP);
+    letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);
+  }
 }
 .ids-step .ids-step__button.ids-step__button--disabled .ids-step__chevron {
   display: none;
@@ -161,6 +182,10 @@
   align-self: flex-start;
 }
 .ids-step .ids-step__headline,
+.ids-step .ids-step__headline h1,
+.ids-step .ids-step__headline h2,
+.ids-step .ids-step__headline h3,
+.ids-step .ids-step__headline h4,
 .ids-step ::slotted([slot=headline]) {
   margin: 0 !important;
   word-break: break-word;
@@ -174,6 +199,10 @@
 }
 @media (min-width: 1024px) {
   .ids-step .ids-step__headline,
+  .ids-step .ids-step__headline h1,
+  .ids-step .ids-step__headline h2,
+  .ids-step .ids-step__headline h3,
+  .ids-step .ids-step__headline h4,
   .ids-step ::slotted([slot=headline]) {
     font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);
     line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP);
@@ -204,6 +233,10 @@
 }
 .ids-step .ids-step__content {
   padding: 1rem 0 0 0;
+  display: none;
+}
+.ids-step .ids-step__content.ids-step__content--expanded {
+  display: block;
 }
 @media only screen and (min-width: 1024px) {
   .ids-step {
@@ -213,9 +246,6 @@
     height: 1.25rem;
     bottom: -1.3125rem;
   }
-  .ids-step .ids-step__headline-label {
-    padding-left: 1.25rem;
-  }
   .ids-step .ids-step__content {
     padding: 1.25rem 0 0 4rem;
   }

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(--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:.0625rem solid transparent;border-radius:var(--IDS-TAB__BORDER-RADIUS);box-shadow:var(--IDS-TAB_BOX-SHADOW);box-sizing:border-box;color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;outline:none;padding:.625rem 1.438rem .75rem;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{color:var(--IDS-TAB__COLOR);display:flex;justify-content:center}.ids-tab .ids-tab__label{align-items:center;flex-direction:column;font-size:1rem;font-weight:400;gap:.25rem;line-height:1.5rem;text-align:center}.ids-tab .ids-icon,.ids-tab .ids-tab-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;color:var(--IDS-ICON__COLOR);display:flex!important;font-size:1.25rem!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-left:var(--IDS-TAB--SELECTED-BORDER);border-right:var(--IDS-TAB--SELECTED-BORDER);border-top:var(--IDS-TAB--SELECTED-BORDER);box-shadow:var(--IDS-TAB--SELECTED__BOX-SHADOW)}.ids-tab.ids-tab--selected,.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 .ids-notification-badge,.ids-tab ids-notification-badge{margin-bottom:-.125rem;margin-left:.375rem}.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(:focus),:host(:not([selected]):focus){outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0;z-index:10}.ids-tab{-webkit-touch-callout:none;align-items:center;background:none;border:none;border-left:.0625rem solid var(--IDS-TAB__BORDER-COLOR);border-radius:var(--IDS-TAB__BORDER-RADIUS);border-right:.0625rem solid var(--IDS-TAB__BORDER-COLOR);border-top:.0625rem solid var(--IDS-TAB__BORDER-COLOR);color:inherit;color:var(--IDS-TAB__COLOR);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:1.5rem;min-width:1.5rem;outline:inherit;outline:none;overflow:hidden;padding:.4375rem 1.4375rem;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;z-index:1}.ids-tab:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tab:after{background-color:var(--IDS-TABS__BORDER-BOTTOM-COLOR);bottom:0;content:\"\";height:.25rem;left:0;position:absolute;right:0;z-index:2}.ids-tab:focus{z-index:2}.ids-tab .ids-tab__label{align-items:center;color:var(--IDS-TAB__COLOR);display:flex;flex-direction:row;font-size:1rem;font-weight:400;gap:.5rem;justify-content:center;line-height:1.6875rem;text-align:center}.ids-tab .ids-tab__label:before{background-color:transparent;content:\"\";height:var(--IDS-TAB--SELECTED__BORDER-HEIGHT);left:0;position:absolute;right:0;top:0;width:100%}.ids-tab.ids-tab--selected{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);border-right:.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);border-top:.0625rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);padding:.4375rem 1.375rem}.ids-tab.ids-tab--selected,.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected .ids-tab__label:before{background-color:var(--IDS-TAB--SELECTED-BORDER-COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-tab .ids-tab-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;color:var(--IDS-ICON__COLOR);display:flex!important;font-size:1.25rem!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(--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 css_248z = ":host([selected=true]){display:block}.ids-tab-panel{display:none;margin-top:1.5rem;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:.125rem}.ids-tab-panel .ids-tab-panel--hidden{display:none}.ids-tab-panel.ids-tab-panel--compact{margin-top:.125rem}.ids-tab-panel.ids-tab-panel--selected{display:block}";
 
 var tabPanelLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tabs/tab-panel.css

@@ -4,7 +4,7 @@
 
 .ids-tab-panel {
   display: none;
-  padding-top: 1.5rem;
+  margin-top: 1.5rem;
   outline-offset: 0.125rem;
   outline-color: var(--IDS-FOCUS__OUTLINE-COLOR);
 }
@@ -12,7 +12,7 @@
   display: none;
 }
 .ids-tab-panel.ids-tab-panel--compact {
-  padding-top: 0;
+  margin-top: 0.125rem;
 }
 .ids-tab-panel.ids-tab-panel--selected {
   display: block;

package/components/tabs/tab.css

@@ -17,9 +17,11 @@
   border-radius: var(--IDS-TAB__BORDER-RADIUS);
 }
 
-:host(:not([selected]):focus) {
+:host(:not([selected]):focus),
+:host(:focus) {
   outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: 0.125rem;
+  outline-offset: 0;
+  z-index: 10;
 }
 
 .ids-tab {
@@ -40,15 +42,10 @@
   display: flex;
   outline: none;
   justify-content: center;
-  align-items: flex-end;
-  box-sizing: border-box;
-  padding: 0.625rem 1.438rem 0.75rem 1.438rem;
-  background: var(--IDS-TAB_BACKGROUND-COLOR);
-  box-shadow: var(--IDS-TAB_BOX-SHADOW);
-  border: 0.0625rem solid transparent;
-  border-radius: var(--IDS-TAB__BORDER-RADIUS);
+  align-items: center;
   cursor: pointer;
   position: relative;
+  z-index: 1;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -56,63 +53,73 @@
   -ms-user-select: none;
   user-select: none;
   color: var(--IDS-TAB__COLOR);
-  /*   &:has(.ids-tab__icon),
-    &.ids-tab--has-icon {
-      .ids-tab__label {
-        margin-bottom: -0.4375rem;
-      }
-    } */
+  overflow: hidden;
+  padding: 0.4375rem 1.4375rem;
+  border-top: 0.0625rem solid var(--IDS-TAB__BORDER-COLOR);
+  border-left: 0.0625rem solid var(--IDS-TAB__BORDER-COLOR);
+  border-right: 0.0625rem solid var(--IDS-TAB__BORDER-COLOR);
+  border-radius: var(--IDS-TAB__BORDER-RADIUS);
+}
+.ids-tab:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-tab:after {
+  content: "";
+  position: absolute;
+  height: 0.25rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--IDS-TABS__BORDER-BOTTOM-COLOR);
+  z-index: 2;
+}
+.ids-tab:focus {
+  z-index: 2;
 }
 .ids-tab .ids-tab__label {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
   color: var(--IDS-TAB__COLOR);
   font-weight: 400;
   font-size: 1rem;
-  line-height: 1.5rem;
+  line-height: 1.6875rem;
   text-align: center;
-  gap: 0.25rem;
-}
-.ids-tab .ids-tab-icon,
-.ids-tab ::slotted([slot=icon]),
-.ids-tab .ids-icon {
-  display: flex !important;
-  align-self: center !important;
-  font-size: 1.25rem !important;
-  color: var(--IDS-ICON__COLOR);
+  gap: 0.5rem;
 }
-.ids-tab:after {
+.ids-tab .ids-tab__label:before {
   content: "";
-  height: var(--IDS-TAB--SELECTED__AFTER-HEIGHT);
   background-color: transparent;
   position: absolute;
-  width: calc(100% + 0.125rem);
-  left: -0.063rem;
+  width: 100%;
+  left: 0;
   right: 0;
-  bottom: var(--IDS-TAB--SELECTED__AFTER-BOTTOM);
+  height: var(--IDS-TAB--SELECTED__BORDER-HEIGHT);
+  top: 0;
 }
 .ids-tab.ids-tab--selected {
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  border-top: var(--IDS-TAB--SELECTED-BORDER);
-  border-left: var(--IDS-TAB--SELECTED-BORDER);
-  border-right: var(--IDS-TAB--SELECTED-BORDER);
-  box-shadow: var(--IDS-TAB--SELECTED__BOX-SHADOW);
+  padding: 0.4375rem 1.375rem;
   color: var(--IDS-TAB--SELECTED_COLOR);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border-top: 0.0625rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);
+  border-left: 0.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);
+  border-right: 0.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);
 }
 .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.ids-tab--selected .ids-tab__label:before {
+  background-color: var(--IDS-TAB--SELECTED-BORDER-COLOR);
 }
-.ids-tab ids-notification-badge,
-.ids-tab .ids-notification-badge {
-  margin-left: 0.375rem;
-  margin-bottom: -0.125rem;
+.ids-tab.ids-tab--selected:after {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-tab:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+.ids-tab .ids-tab-icon,
+.ids-tab ::slotted([slot=icon]) {
+  display: flex !important;
+  align-self: center !important;
+  font-size: 1.25rem !important;
+  color: var(--IDS-ICON__COLOR);
 }