@inera/ids-design 5.3.0 → 5.4.1

package/components/footer-inera-admin/footer-inera-admin.css

@@ -11,17 +11,17 @@
 }
 
 .ids-container {
-  max-width: var(--IDS_MAX-WIDTH);
+  max-width: var(--IDS__MAX-WIDTH);
   display: grid;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
 
 .ids-container.ids-container--gutterless {
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
 }
 
 .ids-container.ids-container--fluid {
@@ -32,7 +32,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -40,51 +40,40 @@
 /*******
 * A11Y
 ********/
-/* Footer inera admin */
 .ids-footer-inera-admin {
-  background-color: var(--footer_background-color);
+  background-color: var(--IDS-COLOR-SECONDARY-90);
   position: relative;
-  margin-top: var(--footer_margin-top);
-  box-shadow: var(--footer_box-shadow);
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner {
-  max-width: var(--IDS_MAX-WIDTH);
-  display: grid;
+  max-width: var(--IDS__MAX-WIDTH);
   margin-left: auto;
   margin-right: auto;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: var(--footer-inner_padding-top);
-  padding-bottom: var(--footer-inner_padding-bottom);
-}
-@media (max-width: 1024px) {
-  .ids-footer-inera-admin .ids-footer-inera-admin__inner {
-    padding-bottom: var(--footer-inner-mobile_padding-bottom);
-  }
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 3.125rem;
+  padding-top: 4.375rem;
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__headline-row {
-  padding-bottom: 20px;
+  padding-bottom: 1.25rem;
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__headline-row .ids-footer-inera-admin__headline {
   display: inline;
-  font-size: 1.5rem;
-  line-height: 1.25;
-  font-size: var(--footer-headline_font-size);
-  line-height: var(--footer-headline_line-height);
-  letter-spacing: var(--footer-headline_letter-spacing);
-  font-weight: var(--footer-headline_font-weight);
-  font-family: var(--footer-headline_font-family);
-  color: var(--footer-headline_color);
+  font-size: 1.625rem;
+  line-height: 2rem;
+  font-weight: bold;
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  letter-spacing: -0.031rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__headline-row .ids-footer-inera-admin__headline .ids-footer-inera-admin__headline--sub {
-  color: var(--footer-headline-sub_color);
+  color: var(--IDS-COLOR-PRIMARY-40);
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__headline-row .ids-footer-inera-admin__headline--sr {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  width: 0.063rem;
+  height: 0.063rem;
   padding: 0;
-  margin: -1px;
+  margin: -0.063rem;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -95,7 +84,8 @@
   flex-wrap: wrap;
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__text {
-  color: var(--footer-content_color) !important;
+  font-size: 1rem;
+  color: var(--IDS-COLOR-ON-SECONDARY-90) !important;
   flex: 0 0 41.6%;
   max-width: 41.6%;
   margin-right: 8.3%;
@@ -104,27 +94,43 @@
   .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__text {
     flex: 0 0 100%;
     max-width: 100%;
-    margin-right: 0%;
+    margin-right: 0;
   }
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content ::slotted([slot=link-col-1]),
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content ::slotted([slot=link-col-2]),
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content ::slotted([slot=link-col-3]) {
   display: block;
-  margin-bottom: 10px !important;
+  margin-bottom: 0.625rem !important;
+  color: var(--IDS-COLOR-NEUTRAL-20) !important;
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col {
   flex: 0 0 16%;
   max-width: 16%;
 }
-.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col.ids-footer-inera-admin__link-col--2 {
-  flex: 0 0 25%;
-  max-width: 25%;
+.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col ul {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+}
+.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col .ids-link {
+  margin-bottom: 0.625rem !important;
+  color: var(--IDS-COLOR-NEUTRAL-20) !important;
+}
+.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col ::slotted([slot=link-col-1]),
+.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col ::slotted([slot=link-col-2]),
+.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col ::slotted([slot=link-col-3]) {
+  display: block;
+  margin-bottom: 0.625rem !important;
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col.ids-footer-inera-admin__link-col--1 {
   flex: 0 0 50%;
   max-width: 50%;
 }
+.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col.ids-footer-inera-admin__link-col--2 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
 .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col.ids-footer-inera-admin__col-size-auto {
   flex: 0 0 auto;
   width: auto;
@@ -153,25 +159,19 @@
   flex: 0 0 50%;
   max-width: 50%;
 }
-.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col ul {
-  margin: 0px;
-  list-style: none;
-  padding: 0px;
-}
-.ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col .ids-link {
-  margin-bottom: 10px !important;
-}
 @media (max-width: 1024px) {
   .ids-footer-inera-admin .ids-footer-inera-admin__inner .ids-footer-inera-admin__content .ids-footer-inera-admin__link-col {
     display: none;
   }
 }
+@media (max-width: 1024px) {
+  .ids-footer-inera-admin .ids-footer-inera-admin__inner {
+    padding-bottom: 5.313rem;
+  }
+}
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer {
   position: relative;
-  background-color: var(--footer-sub_background-color);
-  border-top: var(--footer-sub_border-top);
-  padding-bottom: var(--footer-sub_padding-bottom);
-  padding-top: var(--footer-sub_padding-top);
+  background-color: var(--IDS-COLOR-PRIMARY-30);
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__mobile-menu {
   display: none;
@@ -181,24 +181,16 @@
     display: block;
   }
 }
-@media (max-width: 1024px) {
-  .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer {
-    background-color: var(--footer-sub-mobile_background-color);
-    padding-top: var(--footer-sub-mobile_padding-top);
-    border-top: none;
-  }
-}
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container {
-  max-width: var(--IDS_MAX-WIDTH);
-  display: grid;
+  max-width: var(--IDS__MAX-WIDTH);
   margin-left: auto;
   margin-right: auto;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container .ids-footer-inera-admin_sub-footer-mobile-text {
-  color: var(--footer-sub-mobile_color);
-  padding: 30px 40px 10px;
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  padding: 1.875rem 2.5rem 0.625rem;
   font-size: 0.875rem;
   text-align: center;
   line-height: 1.25rem;
@@ -216,9 +208,10 @@
   }
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container .ids-footer-inera-admin__sub-footer-row .ids-footer-inera-admin__sub-footer-left {
+  flex: 50%;
   font-size: 0.875rem !important;
-  line-height: 0.875rem !important;
-  color: var(--footer-sub-text_color) !important;
+  line-height: 1.125rem !important;
+  color: var(--IDS-COLOR-NEUTRAL-100) !important;
 }
 @media (max-width: 1024px) {
   .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container .ids-footer-inera-admin__sub-footer-row .ids-footer-inera-admin__sub-footer-left {
@@ -226,15 +219,15 @@
   }
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container .ids-footer-inera-admin__sub-footer-row .ids-footer-inera-admin__sub-footer-right {
+  flex: auto;
   text-align: end;
-  display: flex;
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container .ids-footer-inera-admin__sub-footer-row .ids-footer-inera-admin__sub-footer-right ::slotted(*),
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container .ids-footer-inera-admin__sub-footer-row .ids-footer-inera-admin__sub-footer-right a {
-  font-size: 0.875rem;
-  color: var(--footer-sub-text_color);
-  margin-left: 16px !important;
-  display: block;
+  font-size: 0.875rem !important;
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  margin-left: 1rem !important;
+  display: inline-block !important;
 }
 @media (max-width: 1024px) {
   .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container .ids-footer-inera-admin__sub-footer-row .ids-footer-inera-admin__sub-footer-right {
@@ -244,8 +237,15 @@
 @media (max-width: 1024px) {
   .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container {
     height: auto;
-    padding-left: 0px;
-    padding-right: 0px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+@media (min-width: 1024px) {
+  .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer {
+    background-color: var(--IDS-COLOR-PRIMARY-40);
+    padding-bottom: 0.625rem;
+    padding-top: 0.625rem;
   }
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__content-row {
@@ -254,8 +254,8 @@
 .ids-footer-inera-admin .ids-footer-inera-admin__mobile-links {
   font-size: 0.875rem;
   display: none;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
   padding-top: 1.25rem;
   flex-direction: column;
 }
@@ -263,7 +263,7 @@
 .ids-footer-inera-admin .ids-footer-inera-admin__mobile-links a {
   display: flex;
   width: 100%;
-  padding: 16px 0 !important;
+  padding: 1rem 0 !important;
 }
 @media (max-width: 1024px) {
   .ids-footer-inera-admin .ids-footer-inera-admin__mobile-links {
@@ -281,25 +281,42 @@
     flex-direction: column;
     padding-bottom: 1rem;
     padding-top: 1rem;
-    color: var(--footer-sub-mobile_color);
+    color: var(--IDS-COLOR-NEUTRAL-100);
     font-size: 0.875rem;
     text-align: center;
     line-height: 1.25rem;
-    padding-left: 40px;
-    padding-right: 40px;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
   }
   .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer-mobile .ids-footer-inera-admin__sub-footer-mobile-text {
-    margin-top: 30px;
+    margin-top: 1.875rem;
   }
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__inner-wrapper {
+  position: relative;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='69' viewBox='0 0 140 69' fill='none'%3E%3Cpath d='M0 0C0 37.6907 31.34 68.2449 70 68.2449C108.66 68.2449 140 37.6907 140 0H95.9677C95.9677 13.9821 84.3417 25.3166 70 25.3166C55.6583 25.3166 44.0323 13.9821 44.0323 0H0Z' fill='white'/%3E%3C/svg%3E");
-  background-position-x: calc(50% - 225px);
+  background-position-x: calc(100% - 1.25rem);
   background-repeat: no-repeat;
 }
-@media (max-width: 1024px) {
+@media (min-width: 1024px) {
   .ids-footer-inera-admin .ids-footer-inera-admin__inner-wrapper {
-    background-position-x: calc(100% - 20px);
+    background-position-x: calc(50% - 14.063rem);
+  }
+}
+.ids-footer-inera-admin .ids-footer-inera-admin__inner-wrapper::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 6.25rem;
+  height: 5.125rem;
+  left: calc(50% - 6.25rem);
+  top: calc(100% - 5.125rem);
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='82' viewBox='0 0 180 82' fill='none'%3E%3Cpath d='M0 81.6913C0.209931 36.677 40.4238 0.244873 90 0.244873C139.576 0.244873 179.79 36.677 180 81.6913H123.385C123.176 65.0951 108.309 51.7001 90 51.7001C71.6905 51.7001 56.8235 65.0951 56.6148 81.6913H0Z' fill='white'/%3E%3C/svg%3E");
+}
+@media (max-width: 1024px) {
+  .ids-footer-inera-admin .ids-footer-inera-admin__inner-wrapper::after {
+    content: none;
   }
 }
 .ids-footer-inera-admin .sub-footer-container::after {
@@ -309,46 +326,30 @@
   background-color: var(--IDS-COLOR-PRIMARY-40);
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .sub-footer-container {
-  min-height: 40px;
+  min-height: 2.5rem;
 }
 .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer__mobile-text {
-  color: var(--footer-sub-mobile_color);
-  padding: 30px 40px 10px 40px;
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  padding: 1.875rem 2.5rem 0.625rem 2.5rem;
   font-size: 0.875rem;
   text-align: center;
   line-height: 1.25rem;
   display: inline-block;
 }
-.ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container::after {
-  content: " ";
-  display: block;
-  position: absolute;
-  width: 250px;
-  height: 100px;
-  left: calc(50% - 250px);
-  top: -82px;
-  background-repeat: no-repeat;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='82' viewBox='0 0 180 82' fill='none'%3E%3Cpath d='M0 81.6913C0.209931 36.677 40.4238 0.244873 90 0.244873C139.576 0.244873 179.79 36.677 180 81.6913H123.385C123.176 65.0951 108.309 51.7001 90 51.7001C71.6905 51.7001 56.8235 65.0951 56.6148 81.6913H0Z' fill='white'/%3E%3C/svg%3E");
-}
-@media (max-width: 1024px) {
-  .ids-footer-inera-admin .ids-footer-inera-admin__sub-footer .ids-footer-inera-admin__sub-footer-container::after {
-    content: none;
-  }
-}
 .ids-footer-inera-admin .ids-footer-inera-admin__mobile-menu {
-  padding-bottom: 100px;
-  background-color: var(--footer_background-color);
+  padding-bottom: 6.25rem;
+  background-color: var(--IDS-COLOR-SECONDARY-90);
   position: relative;
 }
 @media (max-width: 1024px) {
   .ids-footer-inera-admin .ids-footer-inera-admin__mobile-menu::after {
-    content: " ";
+    content: "";
     display: block;
     position: absolute;
-    width: 154px;
-    height: 77px;
-    left: 20px;
-    bottom: 0px;
+    width: 9.625rem;
+    height: 4.875rem;
+    left: 1.5rem;
+    bottom: 0;
     background-repeat: no-repeat;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='154' height='78' viewBox='0 0 154 78' fill='none'%3E%3Cpath d='M154 77.7737C154 77.7522 154 77.7307 154 77.7092C154 35.2188 119.526 0.773669 77 0.773673C34.474 0.773677 -3.72026e-06 35.2188 -5.63531e-09 77.7092C-3.7567e-09 77.7307 1.52569e-05 77.7522 3.05176e-05 77.7737L48.4356 77.7737C48.4355 77.7522 48.4355 77.7307 48.4355 77.7092C48.4355 61.9466 61.2241 49.1686 77 49.1686C92.7758 49.1686 105.565 61.9466 105.565 77.7092C105.565 77.7307 105.564 77.7522 105.564 77.7737L154 77.7737Z' fill='%23fff'/%3E%3C/svg%3E");
   }

package/components/form/error-message/error-message-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-error-message{align-items:center;background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);border:var(--IDS-ERROR-MESSAGE__BORDER);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-ERROR-MESSAGE__COLOR);display:none;gap:8px;margin-top:var(--IDS-ERROR-MESSAGE__MARGIN-TOP);padding:var(--IDS-ERROR-MESSAGE__PADDING);position:relative}.ids-error-message.ids-error-message--show{display:inline-flex}.ids-error-message:after,.ids-error-message:before{content:\"\";display:block;height:12px;left:41px;position:absolute;transform:rotate(45deg);width:12px;z-index:9}.ids-error-message:after{background-color:var(--IDS-COLOR-NEUTRAL-100);top:-6px}.ids-error-message:before{background-color:var(--IDS-ERROR-MESSAGE__BORDER-COLOR);top:-7px}.ids-error-message .ids-error-message__icon{background-image:var(--IDS-ERROR-MESSAGE__ICON__BACKGROUND-IMAGE);background-repeat:no-repeat;min-height:20px;min-width:20px}";
+var css_248z = ".ids-error-message{align-items:center;background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);border:var(--IDS-ERROR-MESSAGE__BORDER);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-ERROR-MESSAGE__COLOR);display:none;gap:.5rem;margin-top:var(--IDS-ERROR-MESSAGE__MARGIN-TOP);padding:var(--IDS-ERROR-MESSAGE__PADDING);position:relative}.ids-error-message.ids-error-message--show{display:inline-flex}.ids-error-message:after,.ids-error-message:before{content:\"\";display:block;height:.75rem;left:2.563rem;position:absolute;transform:rotate(45deg);width:.75rem;z-index:9}.ids-error-message:after{background-color:var(--IDS-COLOR-NEUTRAL-100);top:-.375rem}.ids-error-message:before{background-color:var(--IDS-ERROR-MESSAGE__BORDER-COLOR);top:-.438rem}.ids-error-message .ids-error-message__icon{background-image:var(--IDS-ERROR-MESSAGE__ICON-BACKGROUND-IMAGE);background-repeat:no-repeat;min-height:1.25rem;min-width:1.25rem}";
 
 var errorMessageLit = css`${unsafeCSS(css_248z)}`;
 

package/components/form/error-message/error-message.css

@@ -8,7 +8,7 @@
   align-items: center;
   display: none;
   color: var(--IDS-ERROR-MESSAGE__COLOR);
-  gap: 8px;
+  gap: 0.5rem;
 }
 .ids-error-message.ids-error-message--show {
   display: inline-flex;
@@ -16,24 +16,24 @@
 .ids-error-message::after, .ids-error-message::before {
   content: "";
   display: block;
-  width: 12px;
-  height: 12px;
+  width: 0.75rem;
+  height: 0.75rem;
   position: absolute;
-  left: 41px;
+  left: 2.563rem;
   transform: rotate(45deg);
   z-index: 9;
 }
 .ids-error-message::after {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
-  top: -6px;
+  top: -0.375rem;
 }
 .ids-error-message::before {
   background-color: var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
-  top: -7px;
+  top: -0.438rem;
 }
 .ids-error-message .ids-error-message__icon {
-  min-width: 20px;
-  min-height: 20px;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
   background-repeat: no-repeat;
-  background-image: var(--IDS-ERROR-MESSAGE__ICON__BACKGROUND-IMAGE);
+  background-image: var(--IDS-ERROR-MESSAGE__ICON-BACKGROUND-IMAGE);
 }

package/components/form/group/group-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-form-group__fieldset{border:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}.ids-form-group__fieldset.ids-form-group__fieldset--compact{gap:0}.ids-form-group__fieldset legend{color:var(--IDS-COLOR-NEUTRAL-20);color:var(--IDS-FORM__LABEL__COLOR);display:inline-flex;font-family:var(--body-font-family);font-size:var(--body-font-size);font-style:normal;font-weight:400;gap:8px;letter-spacing:0;line-height:var(--body-line-height);margin-bottom:10px;padding:0}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-form-group__fieldset{border:none;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0}.ids-form-group__fieldset.ids-form-group__fieldset--compact{gap:0}.ids-form-group__fieldset legend{color:var(--IDS-COLOR-NEUTRAL-20);color:var(--IDS-FORM-LABEL__COLOR);display:inline-flex;font-family:var(--IDS-BODY__FONT-FAMILY);font-size:var(--IDS-BODY__FONT-SIZE);font-style:normal;font-weight:400;gap:.5rem;letter-spacing:0;line-height:var(--IDS-BODY__LINE-HEIGHT);margin-bottom:.625rem;padding:0}";
 
 var groupLit = css`${unsafeCSS(css_248z)}`;
 

package/components/form/group/group.css

@@ -16,7 +16,7 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
 }
 .ids-form-group__fieldset.ids-form-group__fieldset--compact {
   gap: 0;
@@ -25,13 +25,13 @@
   padding: 0;
   font-style: normal;
   color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--body-font-family);
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
+  font-family: var(--IDS-BODY__FONT-FAMILY);
+  font-size: var(--IDS-BODY__FONT-SIZE);
+  line-height: var(--IDS-BODY__LINE-HEIGHT);
   font-weight: 400;
   letter-spacing: 0;
-  color: var(--IDS-FORM__LABEL__COLOR);
+  color: var(--IDS-FORM-LABEL__COLOR);
   display: inline-flex;
-  gap: 8px;
-  margin-bottom: 10px;
+  gap: 0.5rem;
+  margin-bottom: 0.625rem;
 }

package/components/form/range/range-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-range-ticks{display:flex;justify-content:space-between;margin-left:15px;margin-right:15px;margin-top:25px;max-width:100%}.ids-range-ticks.ids-range-tick:first-child{margin-left:-4px}.ids-range-ticks.ids-range-ticks .ids-range-tick:last-child{margin-right:-4px}.ids-range-ticks .ids-range-tick{color:var(--IDS-RANGE-TICK__COLOR);display:flex;font-family:var(--font-family_1);font-size:1rem;justify-content:center;position:relative;text-align:center;width:1px}.ids-range-ticks .ids-range-tick:before{background-color:var(--IDS-RANGE-TICK-LINE__COLOR);content:\"\";display:block;height:10px;margin:auto;position:absolute;top:-15px;width:1px}";
+var css_248z = ".ids-range-wrapper{box-sizing:border-box;margin:0 1rem}.ids-range-ticks{display:flex;justify-content:space-between;margin-left:.75rem;margin-right:.75rem;margin-top:1.563rem;max-width:100%}.ids-range-ticks .ids-range-tick{color:var(--IDS-RANGE__TICK-COLOR);display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;justify-content:center;position:relative;text-align:center;width:.063rem}.ids-range-ticks .ids-range-tick:before{background-color:var(--IDS-RANGE__TICK-LINE-COLOR);content:\"\";display:block;height:.625rem;margin:auto;position:absolute;top:-.938rem;width:.063rem}";
 
 var rangeLit = css`${unsafeCSS(css_248z)}`;
 

package/components/form/range/range.css

@@ -1,34 +1,33 @@
+.ids-range-wrapper {
+  margin: 0 1rem;
+  box-sizing: border-box;
+}
+
 .ids-range-ticks {
   display: flex;
   justify-content: space-between;
   max-width: 100%;
-  margin-left: 15px;
-  margin-right: 15px;
-  margin-top: 25px;
-}
-.ids-range-ticks.ids-range-tick:first-child {
-  margin-left: -4px;
-}
-.ids-range-ticks.ids-range-ticks .ids-range-tick:last-child {
-  margin-right: -4px;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  margin-top: 1.563rem;
 }
 .ids-range-ticks .ids-range-tick {
   display: flex;
   justify-content: center;
   text-align: center;
   position: relative;
-  width: 1px;
+  width: 0.063rem;
   font-size: 1rem;
-  font-family: var(--font-family_1);
-  color: var(--IDS-RANGE-TICK__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--IDS-RANGE__TICK-COLOR);
 }
 .ids-range-ticks .ids-range-tick:before {
   content: "";
   position: absolute;
-  width: 1px;
-  height: 10px;
+  width: 0.063rem;
+  height: 0.625rem;
   display: block;
-  background-color: var(--IDS-RANGE-TICK-LINE__COLOR);
+  background-color: var(--IDS-RANGE__TICK-LINE-COLOR);
   margin: auto;
-  top: -15px;
+  top: -0.938rem;
 }

package/components/form/select-multiple/select-multiple-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-select-multiple__select{background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-bottom:var(--IDS-INPUT__BORDER);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--font-family_1)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select-multiple__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-multiple__select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER)}.ids-select-multiple__select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select-multiple__select.ids-input--light.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER)}.ids-select-multiple__select:disabled{cursor:default}.ids-select-multiple__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-multiple__select:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-select-multiple-wrapper{display:flex;position:relative}.ids-select-multiple-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:0;transform:rotate(90deg);width:12px}.ids-select-multiple-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-multiple-wrapper:has(input:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}.ids-select-multiple__dropdown__wrapper{background-color:var(--IDS-COLOR-NEUTRAL-100);position:relative}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown{background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:var(--IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-RADIUS);box-shadow:0 0 6px rgba(0,0,0,.3);left:0;position:absolute;right:0;z-index:10}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown.ids-select-multiple__dropdown--hide{display:none}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner{overflow-y:auto;padding:10px}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar{margin-left:-20px;margin-top:0;position:absolute;width:14px}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-track{background:var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;margin-bottom:0;margin-top:0}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-resizer{appearance:none;background-image:var(--IDS-TEXTAREA-RESIZER-IMAGE);background-position:50%;background-repeat:no-repeat;background-size:cover}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-corner{background-color:transparent}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL_COLOR);border:3px solid var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;box-sizing:border-box;cursor:auto}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL_HOVER-COLOR)}:host([disabled]) input{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-multiple-label-wrapper{align-items:flex-start;display:inline-flex;gap:8px;margin-bottom:5px;margin-right:8px}.ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper label{display:inline;margin-right:8px;margin-right:4px;position:relative;top:-3px}";
+var css_248z = ".ids-select-multiple__select{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-multiple__select.ids-input--light:disabled,.ids-select-multiple__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-multiple__select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select-multiple__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-multiple__select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select-multiple__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-multiple__select:disabled{cursor:default}.ids-select-multiple__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-multiple__select:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select-multiple-wrapper{display:flex;position:relative}.ids-select-multiple-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-multiple-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-multiple-wrapper:has(input:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}.ids-select-multiple__dropdown__wrapper{background-color:var(--IDS-COLOR-NEUTRAL-100);position:relative}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown{background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:var(--IDS-SELECT-MULTIPLE__DROPDOWN-BORDER-RADIUS);box-shadow:0 0 .375rem rgba(0,0,0,.3);left:0;position:absolute;right:0;z-index:10}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown.ids-select-multiple__dropdown--hide{display:none}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner{overflow-y:auto;padding:.625rem}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-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-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__HOVER-COLOR)}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-corner{background-color:transparent}:host([disabled]) input{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-multiple-label-wrapper{align-items:flex-start;display:inline-flex;gap:.5rem;margin-bottom:.313rem;margin-right:.5rem}.ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper label{display:inline;margin-right:.5rem;margin-right:.25rem;position:relative;top:-.188rem}";
 
 var selectMultipleLit = css`${unsafeCSS(css_248z)}`;