@inera/ids-design 5.4.1 → 5.5.0

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__mobile-menu{background-color:var(--IDS-COLOR-NEUTRAL-100);display:none}.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__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;outline:inherit;padding:0}.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--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__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%;margin:-.5rem 0 0 -.5rem;opacity:0;overflow-x:hidden;overflow-y:auto;padding:.5rem;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__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,.ids-side-panel.ids-side-panel--menu ::slotted([slot=footer-links]){display:flex;flex-direction:column;gap:.75rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger{background-color:transparent;border:0;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:.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:.188rem;position:relative;transition:.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:.188rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:.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{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.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:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.313rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:2rem}.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__mobile-menu{display:block;margin-top:2.5rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__content,.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__footer{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__mobile-menu{display:none!important}.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,.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer{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__mobile-menu{background-color:var(--IDS-COLOR-NEUTRAL-100);display:none}.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__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;outline:inherit;padding:0}.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--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__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{border-bottom:.25rem solid transparent;border-top:.25rem solid transparent;box-sizing:border-box;height:100%;margin:-.5rem 0 0 -.5rem;opacity:0;overflow-x:hidden;overflow-y:auto;padding:.5rem;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__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,.ids-side-panel.ids-side-panel--menu ::slotted([slot=footer-links]){display:flex;flex-direction:column;gap:.75rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger{background-color:transparent;border:0;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:.188rem;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:.188rem;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__mobile-menu{display:block;margin-top:2.5rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__content,.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__footer{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__mobile-menu{display:none!important}.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,.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer{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

@@ -226,6 +226,8 @@
   opacity: 0;
   visibility: hidden;
   transition: visibility 0s, opacity 0s;
+  border-top: 0.25rem solid transparent;
+  border-bottom: 0.25rem solid transparent;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar {
   width: 1rem;
@@ -282,7 +284,7 @@
   margin-right: -0.25rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger {
-  transition: 0.2s;
+  transition: all 0.2s;
   cursor: pointer;
   user-select: none;
   position: relative;
@@ -291,7 +293,7 @@
   display: block;
   width: 1.3125rem;
   border-radius: 0.125rem;
-  transition: 0.2s;
+  transition: all 0.2s;
   background-color: var(--IDS-COLOR-ACCENT-40);
   position: relative;
   height: 0.188rem;
@@ -302,7 +304,7 @@
   display: inline-block;
   width: 1.3125rem;
   border-radius: 0.125rem;
-  transition: 0.2s;
+  transition: all 0.2s;
   background-color: var(--IDS-COLOR-ACCENT-40);
   position: absolute;
   left: 0;
@@ -326,10 +328,6 @@
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after {
   top: -0.5rem;
 }
-.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger {
-  -webkit-transform: scale3d(0.8, 0.8, 0.8);
-  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;
 }
@@ -338,8 +336,8 @@
   -webkit-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
   top: 0;
-  width: 2rem;
-  left: -0.313rem;
+  width: 1.5rem;
+  left: -0.1rem;
 }
 .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
   -ms-transform: rotate(45deg);

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:none;border:var(--IDS-TAB__BORDER);border-radius:var(--IDS-TAB__BORDER-RADIUS);box-shadow:var(--IDS-TAB_BOX-SHADOW);color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;outline:none;padding:.625rem 1.438rem .875rem;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ids-tab,.ids-tab .ids-tab__label{display:flex;justify-content:center}.ids-tab .ids-tab__label{color:var(--IDS-TAB__COLOR);flex-direction:column;font-size:1rem;font-weight:400}.ids-tab ids-notification-badge{margin-bottom:-.125rem;margin-left:.375rem}.ids-tab.ids-tab--has-icon .ids-tab__label,.ids-tab:has(.ids-tab__icon) .ids-tab__label{line-height:2.188rem;margin-bottom:-.438rem}.ids-tab .ids-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;display:flex!important}.ids-tab:after{background-color:transparent;bottom:var(--IDS-TAB--SELECTED__AFTER-BOTTOM);content:\"\";height:var(--IDS-TAB--SELECTED__AFTER-HEIGHT);left:-.063rem;position:absolute;right:0;width:calc(100% + .125rem)}.ids-tab.ids-tab--selected{background-color:var(--IDS-COLOR-NEUTRAL-100);border:var(--IDS-TAB--SELECTED-BORDER);box-shadow:var(--IDS-TAB--SELECTED__BOX-SHADOW)}.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-TAB--SELECTED__AFTER-BACKGROUND-COLOR)}.ids-tab:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}";
+var 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 .875rem;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ids-tab,.ids-tab .ids-tab__label{color:var(--IDS-TAB__COLOR);display:flex;justify-content:center}.ids-tab .ids-tab__label{flex-direction:column;font-size:1rem;font-weight:400}.ids-tab.ids-tab--has-icon .ids-tab__label,.ids-tab:has(.ids-tab__icon) .ids-tab__label{line-height:2.1875rem;margin-bottom:-.4375rem}.ids-tab .ids-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;display:flex!important}.ids-tab:after{background-color:transparent;bottom:var(--IDS-TAB--SELECTED__AFTER-BOTTOM);content:\"\";height:var(--IDS-TAB--SELECTED__AFTER-HEIGHT);left:-.063rem;position:absolute;right:0;width:calc(100% + .125rem)}.ids-tab.ids-tab--selected{background-color:var(--IDS-COLOR-NEUTRAL-100);border-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 tabLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tabs/tab.css

@@ -38,11 +38,12 @@
   outline: none;
   justify-content: center;
   align-items: flex-end;
+  box-sizing: border-box;
   padding: 0.625rem 1.438rem 0.875rem 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);
-  border: var(--IDS-TAB__BORDER);
   cursor: pointer;
   position: relative;
   -webkit-touch-callout: none;
@@ -51,6 +52,7 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  color: var(--IDS-TAB__COLOR);
 }
 .ids-tab .ids-tab__label {
   display: flex;
@@ -60,13 +62,9 @@
   font-weight: 400;
   font-size: 1rem;
 }
-.ids-tab ids-notification-badge {
-  margin-left: 0.375rem;
-  margin-bottom: -0.125rem;
-}
 .ids-tab:has(.ids-tab__icon) .ids-tab__label, .ids-tab.ids-tab--has-icon .ids-tab__label {
-  margin-bottom: -0.438rem;
-  line-height: 2.188rem;
+  margin-bottom: -0.4375rem;
+  line-height: 2.1875rem;
 }
 .ids-tab ::slotted([slot=icon]),
 .ids-tab .ids-icon {
@@ -85,8 +83,11 @@
 }
 .ids-tab.ids-tab--selected {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
-  border: var(--IDS-TAB--SELECTED-BORDER);
+  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);
+  color: var(--IDS-TAB--SELECTED_COLOR);
 }
 .ids-tab.ids-tab--selected .ids-tab__label {
   color: var(--IDS-TAB--SELECTED_COLOR);
@@ -94,6 +95,11 @@
 .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-left: 0.375rem;
+  margin-bottom: -0.125rem;
+}
 .ids-tab:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;

package/components/tabs/tabs-lit.js

@@ -1,6 +1,6 @@
 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:.188rem;height:3rem;padding:0 1.25rem;position:relative}.ids-tabs.ids-tabs--unresponsive{display:flex!important}.ids-tabs.ids-tabs--has-icons{height:4.7rem}.ids-tabs:before{bottom:0;box-shadow:inset 0 -.25rem .25rem -.25rem 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$1 = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-tabs .ids-tabs__select{display:block}.ids-tabs .ids-tabs__tabs{align-items:flex-end;border-bottom:var(--IDS-TABS__BORDER-BOTTOM);display:none;flex-wrap:wrap;gap:.25rem;padding:0 1.25rem;position:relative}.ids-tabs .ids-tabs__tabs:before{bottom:0;box-shadow:inset 0 -.25rem .25rem -.25rem rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED__BEFORE-CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}@media (min-width:1024px){.ids-tabs .ids-tabs__select{display:none}.ids-tabs .ids-tabs__tabs{display:flex}}.ids-tabs.ids-tabs--unresponsive .ids-tabs__select{display:none}.ids-tabs.ids-tabs--unresponsive .ids-tabs__tabs{display:flex!important}@media (min-width:640px){.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__tabs{display:flex}}@media (min-width:1024px){.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__tabs{display:flex}}.ids-tabs .ids-tabs__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-COLOR);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(--IDS-FONT-FAMILY-BASE)!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.ids-input--light:disabled,.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--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.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);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.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:.75rem}.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)}";
 

package/components/tabs/tabs.css

@@ -1,19 +1,28 @@
-.ids-tabs {
-  display: flex;
-  border-bottom: var(--IDS-TABS__BORDER-BOTTOM);
-  gap: 0.188rem;
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-tabs .ids-tabs__select {
+  display: block;
+}
+.ids-tabs .ids-tabs__tabs {
+  display: none;
+  flex-wrap: wrap;
+  gap: 0.25rem;
   position: relative;
   align-items: flex-end;
-  height: 3rem;
   padding: 0 1.25rem;
+  border-bottom: var(--IDS-TABS__BORDER-BOTTOM);
 }
-.ids-tabs.ids-tabs--unresponsive {
-  display: flex !important;
-}
-.ids-tabs.ids-tabs--has-icons {
-  height: 4.7rem;
-}
-.ids-tabs::before {
+.ids-tabs .ids-tabs__tabs::before {
   content: var(--IDS-TAB--SELECTED__BEFORE-CONTENT);
   box-shadow: 0 -0.25rem 0.25rem -0.25rem rgba(0, 0, 0, 0.2) inset;
   position: absolute;
@@ -23,8 +32,37 @@
   height: 0.625rem;
   pointer-events: none;
 }
-
-.ids-tab-panels {
+@media (min-width: 1024px) {
+  .ids-tabs .ids-tabs__select {
+    display: none;
+  }
+  .ids-tabs .ids-tabs__tabs {
+    display: flex;
+  }
+}
+.ids-tabs.ids-tabs--unresponsive .ids-tabs__select {
+  display: none;
+}
+.ids-tabs.ids-tabs--unresponsive .ids-tabs__tabs {
+  display: flex !important;
+}
+@media (min-width: 640px) {
+  .ids-tabs.ids-tabs--responsive-on-s .ids-tabs__select {
+    display: none;
+  }
+  .ids-tabs.ids-tabs--responsive-on-s .ids-tabs__tabs {
+    display: flex;
+  }
+}
+@media (min-width: 1024px) {
+  .ids-tabs.ids-tabs--responsive-on-m .ids-tabs__select {
+    display: none;
+  }
+  .ids-tabs.ids-tabs--responsive-on-m .ids-tabs__tabs {
+    display: flex;
+  }
+}
+.ids-tabs .ids-tabs__panels {
   z-index: 1;
   position: relative;
 }

package/global/global.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @media (max-width: 1023px) {
   .ids-desktop {
     display: none !important;
@@ -2767,6 +2768,7 @@
   width: 1.25rem;
   height: 1.25rem;
   color: var(--IDS-COLOR-ACCENT-40);
+  box-sizing: border-box;
   border: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   border-radius: 50%;
@@ -2805,9 +2807,11 @@
   cursor: pointer;
   width: 1.125rem;
   height: 1.125rem;
+  box-sizing: border-box;
   border-radius: 50%;
-  top: 0;
-  left: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
 }
@@ -2827,8 +2831,6 @@
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-  top: 0;
-  left: 0;
 }
 .ids-radio input:disabled:checked::after,
 .ids-radio input[type=radio]:disabled:checked::after {
@@ -2838,15 +2840,14 @@
 .ids-radio input[aria-invalid=true]:not(:checked),
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked) {
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
-  box-shadow: inset 0 0 0 0.0625rem var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
 .ids-radio input[aria-invalid=true]:not(:checked)::after,
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked)::after {
-  border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
+  width: 1rem;
+  height: 1rem;
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  top: 0;
-  left: 0;
+  border: 0.125rem solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR) !important;
 }
 .ids-radio.ids-radio--compact {
   margin: 0 !important;
@@ -2911,10 +2912,35 @@ input:focus + .ids-checkbox input::before {
   background-size: 1em 1em;
   background-repeat: no-repeat;
 }
+.ids-checkbox input[type=checkbox]:indeterminate::after,
+.ids-checkbox input:indeterminate::after {
+  content: "";
+  display: inline-block;
+  background-image: var(--IDS-CHECKBOX__INDETERMINATE-BACKGROUND-IMAGE);
+  min-height: 1.25rem;
+  min-width: 1.25rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background-position: center center;
+  background-size: 1em 1em;
+  background-repeat: no-repeat;
+  /*  content: "—";
+   font-size: 1rem;
+   line-height: 1rem;
+   font-weight: 700;
+   color: var(--IDS-CHECKBOX__INDETERMINATE-COLOR);
+   display: inline-block;
+   position: absolute;
+   top: 0.0313rem;
+   left: 0.125rem;
+   cursor: pointer; */
+}
 .ids-checkbox input[type=checkbox]:disabled::before,
 .ids-checkbox input:disabled::before {
   cursor: default;
-  border: var(--IDS-FORM--DISABLED__BORDER);
+  border: var(--IDS-FORM--DISABLED__BORDER) !important;
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
 }
 .ids-checkbox input[type=checkbox]:disabled:after,
@@ -2959,6 +2985,105 @@ input:focus + .ids-checkbox input::before {
   margin-bottom: -0.125rem !important;
 }
 
+.ids-check-button {
+  position: relative;
+  display: inline-flex;
+  padding: 0.25rem 0.75rem;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: var(--IDS-CHECK-BUTTON__BORDER-RADIUS);
+  border: 0.0625rem solid var(--IDS-CHECK-BUTTON__BORDER-COLOR);
+  background-color: var(--IDS-CHECK-BUTTON__BACKGROUND-COLOR);
+  cursor: pointer;
+}
+.ids-check-button .ids-check-button__label {
+  cursor: pointer;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  text-align: center;
+  color: var(--IDS-CHECK-BUTTON__COLOR);
+  font-size: var(--IDS-CHECK-BUTTON__FONT-SIZE);
+  line-height: 1.25rem;
+  font-weight: 400;
+  margin: 0;
+}
+.ids-check-button .ids-check-button__input[type=checkbox],
+.ids-check-button .ids-check-button__input {
+  border-radius: var(--IDS-CHECK-BUTTON__BORDER-RADIUS);
+  cursor: pointer;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  appearance: none;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:checked + .ids-check-button__label {
+  padding-left: 1.75rem;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
+.ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
+  content: "";
+  display: inline-block;
+  background-image: var(--IDS-CHECK-BUTTON--CHECKED__BACKGROUND-IMAGE);
+  min-height: 1.25rem;
+  min-width: 1.25rem;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.75rem;
+  cursor: pointer;
+  background-position: center center;
+  background-size: 0.875rem 0.875rem;
+  background-repeat: no-repeat;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled,
+.ids-check-button .ids-check-button__input:disabled {
+  cursor: default;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled::before,
+.ids-check-button .ids-check-button__input:disabled::before {
+  cursor: default;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled:checked + .ids-check-button__label::before,
+.ids-check-button .ids-check-button__input:disabled:checked + .ids-check-button__label::before {
+  cursor: default;
+  background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:focus + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:focus + .ids-check-button__label {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:disabled + .ids-check-button__label {
+  cursor: default;
+  font-style: normal;
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:disabled) {
+  cursor: default;
+  border-color: var(--IDS-CHECK-BUTTON--DISABLED__BORDER-COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:checked:not(:disabled)) {
+  background-color: var(--IDS-CHECK-BUTTON--CHECKED__BACKGROUND-COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
+  color: var(--IDS-CHECK-BUTTON--CHECKED__COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:focus) {
+  background-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)), .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) {
+  background-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+  border-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label::before, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label::before {
+  background-image: var(--IDS-CHECK-BUTTON--FOCUS__BACKGROUND-IMAGE);
+}
+
 .ids-input-wrapper {
   position: relative;
   display: flex;
@@ -3489,7 +3614,7 @@ input:focus + .ids-toggle input:before {
   background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
   background-image: var(--IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE);
 }
-@media (max-width: 300px) {
+@media (max-width: 18.75rem) {
   .ids-toggle {
     flex-wrap: wrap;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@inera/ids-design",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"