@inera/ids-design 8.2.1 → 9.0.1

package/components/form/darkmode-toggle/darkmode-toggle.css

@@ -0,0 +1,179 @@
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-darkmode-toggle {
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  row-gap: 0;
+  width: 100%;
+}
+.ids-darkmode-toggle label {
+  flex-shrink: 100;
+}
+.ids-darkmode-toggle .ids-label-wrapper {
+  bottom: -0.125rem;
+}
+.ids-darkmode-toggle input[type=checkbox],
+.ids-darkmode-toggle input {
+  cursor: pointer;
+  position: relative;
+  margin: 0;
+  height: 1.75rem;
+  width: 3.5rem;
+  border-radius: 6.25rem;
+  appearance: none;
+  flex-shrink: 0;
+}
+.ids-darkmode-toggle input[type=checkbox]:before,
+.ids-darkmode-toggle input:before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e6fd";
+  position: absolute;
+  cursor: pointer;
+  background-color: var(--IDS-ICON-TOGGLE__BACKGROUND-COLOR);
+  border: var(--IDS-ICON-TOGGLE__BORDER-THICKNESS) solid var(--IDS-ICON-TOGGLE__BORDER-COLOR);
+  color: var(--IDS-ICON-TOGGLE__COLOR);
+  border-radius: 6.25rem;
+  height: 1.75rem;
+  width: 3.5rem;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 0.4375rem;
+}
+input:focus-visible + .ids-darkmode-toggle input[type=checkbox]:before,
+input:focus-visible + .ids-darkmode-toggle input:before {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-darkmode-toggle input[type=checkbox]:after,
+.ids-darkmode-toggle input:after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e6fc";
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  text-align: center;
+  background-color: var(--IDS-ICON-TOGGLE__KNOB-BACKGROUND-COLOR);
+  color: var(--IDS-ICON-TOGGLE__KNOB-COLOR);
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 100%;
+  top: 0.25rem;
+  left: 0.25rem;
+  -webkit-transition: 0.3s;
+  transition: all 0.3s;
+}
+.ids-darkmode-toggle input[type=checkbox]:hover:before,
+.ids-darkmode-toggle input:hover:before {
+  background-color: var(--IDS-ICON-TOGGLE__HOVER-BACKGROUND-COLOR);
+  border-color: var(--IDS-ICON-TOGGLE__HOVER-BORDER-COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:active:before,
+.ids-darkmode-toggle input:active:before {
+  background-color: var(--IDS-ICON-TOGGLE__ACTIVE-BACKGROUND-COLOR);
+  border-color: var(--IDS-ICON-TOGGLE__ACTIVE-BORDER-COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:checked:before,
+.ids-darkmode-toggle input:checked:before {
+  content: "\e6fc";
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 0.4375rem;
+  background-color: var(--IDS-ICON-TOGGLE--CHECKED__BACKGROUND-COLOR);
+  border-color: var(--IDS-ICON-TOGGLE--CHECKED__BORDER-COLOR);
+  color: var(--IDS-ICON-TOGGLE--CHECKED__COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:checked:after,
+.ids-darkmode-toggle input:checked:after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e6fd";
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: center;
+  left: var(--IDS-ICON-TOGGLE--CHECKED__KNOB-LEFT);
+  -webkit-transition: 0.3s;
+  transition: all 0.3s;
+  color: var(--IDS-ICON-TOGGLE--CHECKED__KNOB-COLOR);
+  background-color: var(--IDS-ICON-TOGGLE--CHECKED__KNOB-BACKGROUND-COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:checked:hover:before,
+.ids-darkmode-toggle input:checked:hover:before {
+  background-color: var(--IDS-ICON-TOGGLE--CHECKED__HOVER-BACKGROUND-COLOR);
+  border-color: var(--IDS-ICON-TOGGLE--CHECKED__HOVER-BORDER-COLOR);
+  color: var(--IDS-ICON-TOGGLE__HOVER-COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:checked:active:before,
+.ids-darkmode-toggle input:checked:active:before {
+  background-color: var(--IDS-ICON-TOGGLE--CHECKED__ACTIVE-BACKGROUND-COLOR);
+  border-color: var(--IDS-ICON-TOGGLE--CHECKED__ACTIVE-BORDER-COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:disabled + label,
+.ids-darkmode-toggle input:disabled + label {
+  cursor: default;
+  font-style: italic;
+  color: var(--IDS-FORM-LABEL--DISABLED-COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:disabled:before,
+.ids-darkmode-toggle input:disabled:before {
+  cursor: default;
+  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+  color: var(--IDS-ICON-TOGGLE--DISABLED__COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:disabled:after,
+.ids-darkmode-toggle input:disabled:after {
+  cursor: default;
+  background-color: var(--IDS-ICON-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
+  color: var(--IDS-ICON-TOGGLE--DISABLED__KNOB-COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:disabled:checked:before,
+.ids-darkmode-toggle input:disabled:checked:before {
+  cursor: default;
+  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+  color: var(--IDS-ICON-TOGGLE--DISABLED__COLOR);
+}
+.ids-darkmode-toggle input[type=checkbox]:disabled:checked:after,
+.ids-darkmode-toggle input:disabled:checked:after {
+  cursor: default;
+  background-color: var(--IDS-ICON-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
+  color: var(--IDS-ICON-TOGGLE--DISABLED__KNOB-COLOR);
+}
+@media (max-width: 18.75rem) {
+  .ids-darkmode-toggle {
+    flex-wrap: wrap;
+  }
+}

package/components/form/datepicker/datepicker-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--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids-datepicker .ids-datepicker__input-wrapper{position:relative}.ids-datepicker .ids-datepicker__input{background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-FORM__COLOR);display:block;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;padding:var(--IDS-INPUT__PADDING)}.ids-datepicker .ids-datepicker__input::placeholder{color:var(--IDS-FORM__COLOR)}.ids-datepicker .ids-datepicker__input:hover{background-color:var(--IDS-INPUT__HOVER-BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input:active{background-color:var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-INPUT__ACTIVE-BORDER-COLOR)}.ids-datepicker .ids-datepicker__input:focus-visible,.ids-datepicker .ids-datepicker__input:focus-visible:hover{background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-color:var(--IDS-INPUT__FOCUS-BORDER-COLOR)}.ids-datepicker .ids-datepicker__input:disabled,.ids-datepicker .ids-datepicker__input[readonly],.ids-datepicker .ids-datepicker__input[readonly]:focus-visible,.ids-datepicker .ids-datepicker__input[readonly]:focus-visible:hover{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-datepicker .ids-datepicker__input:disabled::placeholder,.ids-datepicker .ids-datepicker__input[readonly]::placeholder,.ids-datepicker .ids-datepicker__input[readonly]:focus-visible::placeholder,.ids-datepicker .ids-datepicker__input[readonly]:focus-visible:hover::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--invalid,.ids-datepicker .ids-datepicker__input[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER)}.ids-datepicker .ids-datepicker__input.ids-input--light{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light:hover{background-color:var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light:active{background-color:var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-INPUT__ACTIVE-BORDER-COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light:focus-visible,.ids-datepicker .ids-datepicker__input.ids-input--light:focus-visible:hover{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light:disabled,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly],.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible:hover{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-datepicker .ids-datepicker__input.ids-input--light:disabled::placeholder,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]::placeholder,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible::placeholder,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible:hover::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light.ids-input--invalid,.ids-datepicker .ids-datepicker__input.ids-input--light[aria-invalid=true]{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-datepicker .ids-datepicker__input{height:var(--IDS-INPUT__HEIGHT);padding-right:4.25rem;width:100%!important}.ids-datepicker.ids-datepicker--invalid .ids-datepicker__input{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER)}.ids-datepicker .ids-datepicker__trigger{background-color:var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);border:.125rem solid transparent;color:var(--IDS-DATEPICKER__BUTTON-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE)}.ids-datepicker .ids-datepicker__trigger:hover{background-color:var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR)}.ids-datepicker .ids-datepicker__trigger:hover,.ids-datepicker .ids-datepicker__trigger:hover:before{color:var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR)!important}.ids-datepicker .ids-datepicker__trigger:active,.ids-datepicker .ids-datepicker__trigger:active:hover{background-color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .ids-datepicker__trigger:active:before,.ids-datepicker .ids-datepicker__trigger:active:hover:before{color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .ids-datepicker__trigger:disabled,.ids-datepicker .ids-datepicker__trigger[aria-disabled=true],.ids-datepicker .ids-datepicker__trigger[disabled]{background-color:var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR)!important;border-color:transparent;color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important;font-weight:400;pointer-events:none}.ids-datepicker .ids-datepicker__trigger:disabled:before,.ids-datepicker .ids-datepicker__trigger[aria-disabled=true]:before,.ids-datepicker .ids-datepicker__trigger[disabled]:before{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important}.ids-datepicker .ids-datepicker__trigger{background-color:var(--IDS-DATEPICKER__TRIGGER-BUTTON-BACKGROUND-COLOR);border-bottom-right-radius:var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);border-top-right-radius:var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);cursor:pointer;height:var(--IDS-INPUT__HEIGHT);position:absolute;right:0;top:0;width:3.25rem}.ids-datepicker .ids-datepicker__trigger:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__TRIGGER-BUTTON-COLOR);content:\"\\e944\";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-datepicker .ids-datepicker__trigger:disabled{border:.125rem solid var(--IDS-DATEPICKER__BUTTON-DISABLED-BORDER-COLOR)}.ids-datepicker .ids-datepicker__trigger:disabled:before{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)}.ids-datepicker .ids-datepicker__dialog{background-color:var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);border:.0625rem solid var(--IDS-DATEPICKER-CALENDAR__BORDER-COLOR);border-radius:var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-2);display:none;margin-top:.25rem;padding:1rem;position:absolute;right:0;top:var(--IDS-INPUT__HEIGHT)}.ids-datepicker .ids-datepicker__dialog.ids-datepicker__dialog--show{display:block}.ids-datepicker .ids-datepicker__dialog-bar{align-items:center;border-bottom:.0625rem solid var(--IDS-DATEPICKER-CALENDAR__BORDER-COLOR);display:flex;justify-content:space-between;margin-bottom:.5rem;padding-bottom:.75rem}.ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header{color:var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT)}.ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header:focus,.ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header:focus-visible{outline:none}.ids-datepicker .ids-datepicker__dialog-close-button{align-items:center;background-color:var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);border-color:transparent;border-radius:100%;cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:700;height:2.5rem;height:2.25rem;justify-content:center;line-height:1.5rem;position:absolute;right:.5rem;top:.5rem;width:2.5rem;width:2.25rem}.ids-datepicker .ids-datepicker__dialog-close-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-datepicker .rdp-dropdowns{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns{align-items:center;display:flex;gap:.5rem;justify-content:flex-start}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-dropdown_root{cursor:pointer;position:relative}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-dropdown_root:first-of-type{margin-right:.5rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown{background-color:var(--IDS-DATEPICKER__SELECT-BACKGROUND-COLOR);border-color:transparent;border-radius:.0625rem;cursor:pointer;padding:.125rem .25rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown:active{border-color:transparent}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown:disabled{pointer-events:none}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .ids-datepicker__month-select{width:7.25rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .ids-datepicker__year-select{width:4.5rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label{background-color:var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);color:var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT);left:.25rem;pointer-events:none;position:absolute;right:.25rem;text-transform:capitalize;top:.25rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;pointer-events:none;position:absolute;right:.125rem;top:50%;transform:translateY(-50%)}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label svg{display:none}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-dropdown_root{cursor:default}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-caption_label{color:var(--IDS-DATEPICKER__SELECT-DISABLED-COLOR)!important;pointer-events:none}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-caption_label:before{color:var(--IDS-DATEPICKER__SELECT-DISABLED-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons{align-items:center;display:flex;gap:.5rem;justify-content:flex-end}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev{background-color:var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);border:.125rem solid transparent;color:var(--IDS-DATEPICKER__BUTTON-COLOR);cursor:pointer}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:hover,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:hover{background-color:var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:hover:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:hover:before{color:var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:hover,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:hover{background-color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:hover:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:hover:before{color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:disabled,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[aria-disabled=true],.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[disabled],.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:disabled,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[aria-disabled=true],.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[disabled]{background-color:var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR)!important;border-color:transparent;color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important;font-weight:400;pointer-events:none}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:disabled:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[aria-disabled=true]:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[disabled]:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:disabled:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[aria-disabled=true]:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[disabled]:before{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev{align-items:center;border:.0625rem solid transparent;border-radius:100%;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:700;height:2.5rem;height:2.25rem;justify-content:center;line-height:1.5rem;padding:0;position:relative;width:2.5rem;width:2.25rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:before{content:\"\\e937\"}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:before{content:\"\\e938\"}.ids-datepicker .rdp-month_grid{margin-top:.75rem}.ids-datepicker .ids-datepicker__week-number-header,.ids-datepicker .rdp-week_number{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.75rem;font-weight:400;padding-right:.25rem}.ids-datepicker .rdp-weekday{color:var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.75rem;font-weight:var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT);text-transform:uppercase}.ids-datepicker .rdp-day .rdp-day_button{background-color:var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);border:.125rem solid transparent;color:var(--IDS-DATEPICKER__BUTTON-COLOR);cursor:pointer}.ids-datepicker .rdp-day .rdp-day_button:hover{background-color:var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR)}.ids-datepicker .rdp-day .rdp-day_button:hover,.ids-datepicker .rdp-day .rdp-day_button:hover:before{color:var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR)!important}.ids-datepicker .rdp-day .rdp-day_button:active,.ids-datepicker .rdp-day .rdp-day_button:active:hover{background-color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .rdp-day .rdp-day_button:active:before,.ids-datepicker .rdp-day .rdp-day_button:active:hover:before{color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .rdp-day .rdp-day_button:disabled,.ids-datepicker .rdp-day .rdp-day_button[aria-disabled=true],.ids-datepicker .rdp-day .rdp-day_button[disabled]{background-color:var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR)!important;border-color:transparent;color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important;font-weight:400;pointer-events:none}.ids-datepicker .rdp-day .rdp-day_button:disabled:before,.ids-datepicker .rdp-day .rdp-day_button[aria-disabled=true]:before,.ids-datepicker .rdp-day .rdp-day_button[disabled]:before{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important}.ids-datepicker .rdp-day .rdp-day_button{align-items:center;border-radius:100%;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:700;height:2.5rem;justify-content:center;justify-self:center;line-height:1.5rem;width:2.5rem}.ids-datepicker .rdp-day.rdp-today .rdp-day_button{border:.125rem solid var(--IDS-DATEPICKER__BUTTON-TODAY-BORDER-COLOR)}.ids-datepicker .rdp-day.rdp-today .rdp-day_button:hover{border-color:var(--IDS-DATEPICKER__BUTTON-TODAY-HOVER-BORDER-COLOR)}.ids-datepicker .rdp-day:focus-visible,.ids-datepicker .rdp-day[aria-focused=true]{border-radius:100%;outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR)}.ids-datepicker .rdp-day[aria-selected=true] .rdp-day_button{background-color:var(--IDS-DATEPICKER__BUTTON-SELECTED-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-SELECTED-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-SELECTED-COLOR)}.ids-datepicker .rdp-day[aria-selected=true] .rdp-day_button:disabled{border-color:var(--IDS-DATEPICKER__BUTTON-DISABLED-BORDER-COLOR)!important}@media (max-width:640px){.ids-datepicker .ids-datepicker__overlay{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);bottom:0;left:0;position:fixed;right:0;top:0;z-index:200}.ids-datepicker .ids-datepicker__dialog{border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;left:0;min-height:21rem!important;padding-left:1rem!important;padding-right:1rem!important;position:fixed;right:0;top:auto;z-index:210}.ids-datepicker .rdp-month_grid{table-layout:fixed;width:100%}}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids-datepicker .ids-datepicker__input-wrapper{position:relative}.ids-datepicker .ids-datepicker__input{background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-sizing:border-box;color:var(--IDS-FORM__COLOR);display:block;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;padding:var(--IDS-INPUT__PADDING);width:100%}.ids-datepicker .ids-datepicker__input::placeholder{color:var(--IDS-FORM__COLOR)}.ids-datepicker .ids-datepicker__input:hover{background-color:var(--IDS-INPUT__HOVER-BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input:active{background-color:var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-INPUT__ACTIVE-BORDER-COLOR)}.ids-datepicker .ids-datepicker__input:focus-visible,.ids-datepicker .ids-datepicker__input:focus-visible:hover{background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-color:var(--IDS-INPUT__FOCUS-BORDER-COLOR)}.ids-datepicker .ids-datepicker__input:disabled,.ids-datepicker .ids-datepicker__input[readonly],.ids-datepicker .ids-datepicker__input[readonly]:focus-visible,.ids-datepicker .ids-datepicker__input[readonly]:focus-visible:hover{-webkit-text-fill-color:inherit;background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-datepicker .ids-datepicker__input:disabled::placeholder,.ids-datepicker .ids-datepicker__input[readonly]::placeholder,.ids-datepicker .ids-datepicker__input[readonly]:focus-visible::placeholder,.ids-datepicker .ids-datepicker__input[readonly]:focus-visible:hover::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--invalid,.ids-datepicker .ids-datepicker__input[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:var(--IDS-FORM--INVALID-BOX-SHADOW)}.ids-datepicker .ids-datepicker__input.ids-input--light{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light:hover{background-color:var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light:active{background-color:var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-INPUT__ACTIVE-BORDER-COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light:focus-visible,.ids-datepicker .ids-datepicker__input.ids-input--light:focus-visible:hover{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light:disabled,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly],.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible:hover{-webkit-text-fill-color:inherit;background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-datepicker .ids-datepicker__input.ids-input--light:disabled::placeholder,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]::placeholder,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible::placeholder,.ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible:hover::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-datepicker .ids-datepicker__input.ids-input--light.ids-input--invalid,.ids-datepicker .ids-datepicker__input.ids-input--light[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:var(--IDS-FORM--INVALID-BOX-SHADOW)}.ids-datepicker .ids-datepicker__input:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-datepicker .ids-datepicker__input{height:var(--IDS-INPUT__HEIGHT);padding-right:4.25rem;width:100%!important}.ids-datepicker.ids-datepicker--invalid .ids-datepicker__input{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:var(--IDS-FORM--INVALID-BOX-SHADOW)}.ids-datepicker .ids-datepicker__trigger{background-color:var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);border:.125rem solid transparent;color:var(--IDS-DATEPICKER__BUTTON-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE)}.ids-datepicker .ids-datepicker__trigger:hover{background-color:var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR)}.ids-datepicker .ids-datepicker__trigger:hover,.ids-datepicker .ids-datepicker__trigger:hover:before{color:var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR)!important}.ids-datepicker .ids-datepicker__trigger:active,.ids-datepicker .ids-datepicker__trigger:active:hover{background-color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .ids-datepicker__trigger:active:before,.ids-datepicker .ids-datepicker__trigger:active:hover:before{color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .ids-datepicker__trigger:disabled,.ids-datepicker .ids-datepicker__trigger[aria-disabled=true],.ids-datepicker .ids-datepicker__trigger[disabled]{background-color:var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR)!important;border-color:transparent;color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important;font-weight:400;pointer-events:none}.ids-datepicker .ids-datepicker__trigger:disabled:before,.ids-datepicker .ids-datepicker__trigger[aria-disabled=true]:before,.ids-datepicker .ids-datepicker__trigger[disabled]:before{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important}.ids-datepicker .ids-datepicker__trigger{background-color:var(--IDS-DATEPICKER__TRIGGER-BUTTON-BACKGROUND-COLOR);border-bottom-right-radius:var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);border-top-right-radius:var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);cursor:pointer;height:var(--IDS-INPUT__HEIGHT);position:absolute;right:0;top:0;width:3.25rem}.ids-datepicker .ids-datepicker__trigger:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__TRIGGER-BUTTON-COLOR);content:\"\\e944\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-datepicker .ids-datepicker__trigger:disabled{border:.125rem solid var(--IDS-DATEPICKER__BUTTON-DISABLED-BORDER-COLOR)}.ids-datepicker .ids-datepicker__trigger:disabled:before{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)}.ids-datepicker .ids-datepicker__dialog{background-color:var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);border:.0625rem solid var(--IDS-DATEPICKER-CALENDAR__BORDER-COLOR);border-radius:var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-2);display:none;margin-top:.25rem;padding:1rem;position:absolute;right:0;top:var(--IDS-INPUT__HEIGHT);z-index:200}.ids-datepicker .ids-datepicker__dialog.ids-datepicker__dialog--show{display:block}.ids-datepicker .ids-datepicker__dialog-bar{align-items:center;border-bottom:.0625rem solid var(--IDS-DATEPICKER-CALENDAR__BORDER-COLOR);display:flex;justify-content:space-between;margin-bottom:.5rem;padding-bottom:.75rem}.ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header{color:var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT)}.ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header:focus,.ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header:focus-visible{outline:none}.ids-datepicker .ids-datepicker__dialog-close-button{align-items:center;background-color:var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);border-color:transparent;border-radius:100%;cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:700;height:2.5rem;height:2.25rem;justify-content:center;line-height:1.5rem;position:absolute;right:.5rem;top:.5rem;width:2.5rem;width:2.25rem}.ids-datepicker .ids-datepicker__dialog-close-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-datepicker .rdp-dropdowns{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns{align-items:center;display:flex;gap:.5rem;justify-content:flex-start}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-dropdown_root{cursor:pointer;position:relative}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-dropdown_root:first-of-type{margin-right:.5rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown{background-color:var(--IDS-DATEPICKER__SELECT-BACKGROUND-COLOR);border-color:transparent;border-radius:.0625rem;cursor:pointer;padding:.125rem .25rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown:active{border-color:transparent}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown:disabled{pointer-events:none}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .ids-datepicker__month-select{width:7.25rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .ids-datepicker__year-select{width:4.5rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label{background-color:var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);color:var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT);left:.25rem;pointer-events:none;position:absolute;right:.25rem;text-transform:capitalize;top:.25rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;position:absolute;right:.125rem;top:50%;transform:translateY(-50%)}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label svg{display:none}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-dropdown_root{cursor:default}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-caption_label{color:var(--IDS-DATEPICKER__SELECT-DISABLED-COLOR)!important;pointer-events:none}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-caption_label:before{color:var(--IDS-DATEPICKER__SELECT-DISABLED-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons{align-items:center;display:flex;gap:.5rem;justify-content:flex-end}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev{background-color:var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);border:.125rem solid transparent;color:var(--IDS-DATEPICKER__BUTTON-COLOR);cursor:pointer}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:hover,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:hover{background-color:var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:hover:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:hover:before{color:var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:hover,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:hover{background-color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:hover:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:hover:before{color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:disabled,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[aria-disabled=true],.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[disabled],.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:disabled,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[aria-disabled=true],.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[disabled]{background-color:var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR)!important;border-color:transparent;color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important;font-weight:400;pointer-events:none}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:disabled:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[aria-disabled=true]:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[disabled]:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:disabled:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[aria-disabled=true]:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[disabled]:before{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev{align-items:center;border:.0625rem solid transparent;border-radius:100%;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:700;height:2.5rem;height:2.25rem;justify-content:center;line-height:1.5rem;padding:0;position:relative;width:2.5rem;width:2.25rem}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:before,.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);content:\"\\e937\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);content:\"\\e938\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-datepicker .rdp-month_grid{margin-top:.75rem}.ids-datepicker .ids-datepicker__week-number-header,.ids-datepicker .rdp-week_number{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.75rem;font-weight:400;padding-right:.25rem}.ids-datepicker .rdp-weekday{color:var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.75rem;font-weight:var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT);text-transform:uppercase}.ids-datepicker .rdp-day .rdp-day_button{background-color:var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);border:.125rem solid transparent;color:var(--IDS-DATEPICKER__BUTTON-COLOR);cursor:pointer}.ids-datepicker .rdp-day .rdp-day_button:hover{background-color:var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR)}.ids-datepicker .rdp-day .rdp-day_button:hover,.ids-datepicker .rdp-day .rdp-day_button:hover:before{color:var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR)!important}.ids-datepicker .rdp-day .rdp-day_button:active,.ids-datepicker .rdp-day .rdp-day_button:active:hover{background-color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .rdp-day .rdp-day_button:active:before,.ids-datepicker .rdp-day .rdp-day_button:active:hover:before{color:var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR)!important}.ids-datepicker .rdp-day .rdp-day_button:disabled,.ids-datepicker .rdp-day .rdp-day_button[aria-disabled=true],.ids-datepicker .rdp-day .rdp-day_button[disabled]{background-color:var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR)!important;border-color:transparent;color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important;font-weight:400;pointer-events:none}.ids-datepicker .rdp-day .rdp-day_button:disabled:before,.ids-datepicker .rdp-day .rdp-day_button[aria-disabled=true]:before,.ids-datepicker .rdp-day .rdp-day_button[disabled]:before{color:var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR)!important}.ids-datepicker .rdp-day .rdp-day_button{align-items:center;border-radius:100%;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-weight:700;height:2.5rem;justify-content:center;justify-self:center;line-height:1.5rem;width:2.5rem}.ids-datepicker .rdp-day.rdp-today .rdp-day_button{border:.125rem solid var(--IDS-DATEPICKER__BUTTON-TODAY-BORDER-COLOR)}.ids-datepicker .rdp-day.rdp-today .rdp-day_button:hover{border-color:var(--IDS-DATEPICKER__BUTTON-TODAY-HOVER-BORDER-COLOR)}.ids-datepicker .rdp-day:focus-visible,.ids-datepicker .rdp-day[aria-focused=true]{border-radius:100%;outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR)}.ids-datepicker .rdp-day[aria-selected=true] .rdp-day_button{background-color:var(--IDS-DATEPICKER__BUTTON-SELECTED-BACKGROUND-COLOR);border:.125rem solid var(--IDS-DATEPICKER__BUTTON-SELECTED-BORDER-COLOR);color:var(--IDS-DATEPICKER__BUTTON-SELECTED-COLOR)}.ids-datepicker .rdp-day[aria-selected=true] .rdp-day_button:disabled{border-color:var(--IDS-DATEPICKER__BUTTON-DISABLED-BORDER-COLOR)!important}@media (max-width:640px){.ids-datepicker .ids-datepicker__overlay{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);bottom:0;left:0;position:fixed;right:0;top:0;z-index:200}.ids-datepicker .ids-datepicker__dialog{border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;left:0;min-height:21rem!important;padding-left:1rem!important;padding-right:1rem!important;position:fixed;right:0;top:auto;z-index:210}.ids-datepicker .rdp-month_grid{table-layout:fixed;width:100%}}";
 
 var datepickerLit = css`
   ${unsafeCSS(css_248z)}

package/components/form/datepicker/datepicker.css

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -77,6 +77,8 @@
   font-size: 1rem;
   color: var(--IDS-FORM__COLOR);
   display: block;
+  width: 100%;
+  box-sizing: border-box;
 }
 .ids-datepicker .ids-datepicker__input::placeholder {
   color: var(--IDS-FORM__COLOR);
@@ -98,6 +100,7 @@
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
+  -webkit-text-fill-color: inherit;
 }
 .ids-datepicker .ids-datepicker__input:disabled::placeholder, .ids-datepicker .ids-datepicker__input[readonly]::placeholder, .ids-datepicker .ids-datepicker__input[readonly]:focus-visible::placeholder, .ids-datepicker .ids-datepicker__input[readonly]:focus-visible:hover::placeholder {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -105,6 +108,7 @@
 .ids-datepicker .ids-datepicker__input.ids-input--invalid, .ids-datepicker .ids-datepicker__input[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: var(--IDS-FORM--INVALID-BOX-SHADOW);
 }
 .ids-datepicker .ids-datepicker__input.ids-input--light {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
@@ -125,12 +129,15 @@
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
+  -webkit-text-fill-color: inherit;
 }
 .ids-datepicker .ids-datepicker__input.ids-input--light:disabled::placeholder, .ids-datepicker .ids-datepicker__input.ids-input--light[readonly]::placeholder, .ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible::placeholder, .ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible:hover::placeholder {
   color: var(--IDS-FORM--DISABLED__COLOR);
 }
 .ids-datepicker .ids-datepicker__input.ids-input--light.ids-input--invalid, .ids-datepicker .ids-datepicker__input.ids-input--light[aria-invalid=true] {
-  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
+  border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: var(--IDS-FORM--INVALID-BOX-SHADOW);
 }
 .ids-datepicker .ids-datepicker__input:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
@@ -144,6 +151,7 @@
 .ids-datepicker.ids-datepicker--invalid .ids-datepicker__input {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: var(--IDS-FORM--INVALID-BOX-SHADOW);
 }
 .ids-datepicker .ids-datepicker__trigger {
   cursor: pointer;
@@ -194,7 +202,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e944";
@@ -212,6 +219,7 @@
 }
 .ids-datepicker .ids-datepicker__dialog {
   position: absolute;
+  z-index: 200;
   right: 0;
   padding: 1rem;
   top: var(--IDS-INPUT__HEIGHT);
@@ -267,7 +275,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e934";
@@ -334,7 +341,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e936";
@@ -433,7 +439,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e937";
@@ -448,7 +453,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e938";

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-THICKNESS) solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-ERROR-MESSAGE__COLOR);display:none;gap:.5rem;margin-bottom:.25rem;margin-top:.75rem;padding:var(--IDS-ERROR-MESSAGE__PADDING);position:relative}.ids-error-message.ids-error-message--show{display:inline-flex;width:fit-content}.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-ERROR-MESSAGE__BACKGROUND-COLOR);top:-.3rem}.ids-error-message:before{background-color:var(--IDS-ERROR-MESSAGE__BORDER-COLOR);top:var(--IDS-ERROR-MESSAGE__BEFORE-TOP)}.ids-error-message .ids-error-message__text{font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;line-height:1.5rem;min-height:1.5rem;padding-left:1.75rem;position:relative}.ids-error-message .ids-error-message__text:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ERROR-MESSAGE__COLOR);content:\"\\e913\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;line-height:1.5rem;pointer-events:none;position:absolute;top:0}";
+var css_248z = ".ids-error-message{align-items:center;background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);border:var(--IDS-ERROR-MESSAGE__BORDER-THICKNESS) solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-ERROR-MESSAGE__COLOR);display:none;gap:.5rem;margin-bottom:.25rem;margin-top:.75rem;padding:var(--IDS-ERROR-MESSAGE__PADDING);position:relative}.ids-error-message.ids-error-message--show{display:inline-flex;width:fit-content}.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-ERROR-MESSAGE__BACKGROUND-COLOR);top:-.3rem}.ids-error-message:before{background-color:var(--IDS-ERROR-MESSAGE__BORDER-COLOR);top:var(--IDS-ERROR-MESSAGE__BEFORE-TOP)}.ids-error-message .ids-error-message__text{font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;line-height:1.5rem;min-height:1.5rem;padding-left:1.75rem;position:relative}.ids-error-message .ids-error-message__text:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ERROR-MESSAGE__ICON-COLOR);content:\"\\e913\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;line-height:1.5rem;position:absolute;top:0}";
 
 var errorMessageLit = css`${unsafeCSS(css_248z)}`;
 

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

@@ -61,13 +61,12 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e913";
   font-size: 1.25rem;
   line-height: 1.5rem;
-  color: var(--IDS-ERROR-MESSAGE__COLOR);
+  color: var(--IDS-ERROR-MESSAGE__ICON-COLOR);
   left: 0;
   top: 0;
 }

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

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@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{align-items:flex-start;color:var(--ids-color-surface-text-on-default);color:var(--IDS-FORM-LABEL__COLOR);display:inline-flex;font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-weight:var(--ids-font-weight-body-text);gap:.5rem;letter-spacing:0;line-height:var(--ids-line-height-body-text);margin-bottom:.625rem;padding:0}.ids-form-group__fieldset legend ::slotted(*){margin-bottom:-.25rem}";
+var css_248z = ".ids-form-group__fieldset{border:none;display:flex;flex-direction:column;gap:1.25rem;margin:0;padding:0}.ids-form-group__fieldset.ids-form-group__fieldset--compact{gap:.5rem}.ids-form-group__fieldset legend{color:var(--IDS-FORM-LABEL__COLOR);display:inline!important;font-family:var(--IDS-FORM-LABEL__FONT-FAMILY);font-size:var(--IDS-FORM-LABEL__FONT-SIZE);font-style:normal;font-weight:var(--IDS-FORM-LABEL__FONT-WEIGHT);letter-spacing:var(--IDS-FORM-LABEL__LETTER-SPACING);line-height:var(--IDS-FORM-LABEL__HEIGHT);padding:0}.ids-form-group__fieldset legend.ids-label--clickable{cursor:pointer!important}.ids-form-group__fieldset legend.ids-label--disabled{color:var(--IDS-FORM-LABEL--DISABLED-COLOR);cursor:default!important;font-style:italic}.ids-form-group__fieldset .ids-legend__tooltip{bottom:-.1875rem;margin-left:.5rem;position:relative}";
 
 var groupLit = css`${unsafeCSS(css_248z)}`;
 

package/components/form/group/group.css

@@ -1,81 +1,50 @@
-.ids--light, .ids--dark {
-  --IDS-FONT-FAMILY-BASE: "Open Sans";
-  --IDS-FONT-FAMILY-HEADING: "Inter";
-  --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
-  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
-  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
-  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
-  --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
-  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
-  --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
-  --IDS-PAGE-LIST__FONT-WEIGHT: 700;
-  --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
-  --IDS-BULLET-LIST__MARKER-COLOR: var(--ids-color-brand-text-primary);
-  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
-  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
-  --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
-}
-.ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
-  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
-}
-.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
-  --IDS-FONT-FAMILY-BASE: "Open Sans";
-  --IDS-FONT-FAMILY-HEADING: "Poppins";
-  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
-  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
-  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
-  --IDS-PAGE-LIST__FONT-WEIGHT: 600;
-  --IDS-PAGE-LIST__LETTER-SPACING: 0;
-  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
-  --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
-  --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
-}
-.ids--light.ids--dark, .ids--dark.ids--dark {
-  --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
-}
-.ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
-  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
-}
-
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
-}
-
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
 .ids-form-group__fieldset {
   border: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1.25rem;
 }
 .ids-form-group__fieldset.ids-form-group__fieldset--compact {
-  gap: 0;
+  gap: 0.5rem;
 }
 .ids-form-group__fieldset legend {
-  padding: 0;
-  font-style: normal;
-  color: var(--ids-color-surface-text-on-default);
-  font-family: var(--ids-font-family-body-text);
-  font-size: var(--ids-font-size-body-text);
-  line-height: var(--ids-line-height-body-text);
-  font-weight: var(--ids-font-weight-body-text);
-  letter-spacing: 0;
   color: var(--IDS-FORM-LABEL__COLOR);
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  margin-bottom: 0.625rem;
+  font-family: var(--IDS-FORM-LABEL__FONT-FAMILY);
+  font-size: var(--IDS-FORM-LABEL__FONT-SIZE);
+  font-style: normal;
+  font-weight: var(--IDS-FORM-LABEL__FONT-WEIGHT);
+  letter-spacing: var(--IDS-FORM-LABEL__LETTER-SPACING);
+  line-height: var(--IDS-FORM-LABEL__HEIGHT);
+  display: inline !important;
+  padding: 0;
+}
+.ids-form-group__fieldset legend.ids-label--clickable {
+  cursor: pointer !important;
+}
+.ids-form-group__fieldset legend.ids-label--disabled {
+  font-style: italic;
+  color: var(--IDS-FORM-LABEL--DISABLED-COLOR);
+  cursor: default !important;
 }
-.ids-form-group__fieldset legend ::slotted(*) {
-  margin-bottom: -0.25rem;
+.ids-form-group__fieldset .ids-legend__tooltip {
+  position: relative;
+  bottom: -0.1875rem;
+  margin-left: 0.5rem;
 }

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

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-range .ids-label,.ids-range ::slotted(label){display:inline-block;margin-bottom:.75rem!important}.ids-range .ids-range-ticks{display:flex;justify-content:space-between;margin-left:.75rem;margin-right:.75rem;margin-top:1.75rem;max-width:100%}.ids-range .ids-range-ticks .ids-range-tick{color:var(--ids-color-surface-text-on-default);display:flex;font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-weight:var(--ids-font-weight-body-text);justify-content:center;letter-spacing:0;line-height:var(--ids-line-height-body-text);position:relative;text-align:center;width:0}.ids-range .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:-1rem;width:.063rem}.ids-range .ids-range-ticks .ids-range-tick .ids-range-tick__label{display:block;position:relative}.ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick{color:var(--IDS-FORM--DISABLED__COLOR);font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-style:italic;font-weight:var(--ids-font-weight-body-text);letter-spacing:0;line-height:var(--ids-line-height-body-text)}.ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick:before{background-color:var(--IDS-FORM--DISABLED__COLOR)}.ids-range__input,input[type=range]{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;background-color:transparent;background-image:linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR),var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));background-repeat:no-repeat;background-size:98% 100%;border:var(--IDS-RANGE__BORDER-THICKNESS) solid var(--IDS-RANGE__BORDER-COLOR);border-radius:1rem;box-sizing:border-box;cursor:pointer;display:block;height:.5rem;margin:0 0 .75rem;padding:0;touch-action:pan-x;width:100%}.ids-range__input::-webkit-slider-thumb,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-webkit-slider-thumb:hover,input[type=range]::-webkit-slider-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-webkit-slider-thumb:active,input[type=range]::-webkit-slider-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input::-moz-range-thumb,input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-moz-range-thumb:hover,input[type=range]::-moz-range-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-moz-range-thumb:active,input[type=range]::-moz-range-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input::-ms-thumb,input[type=range]::-ms-thumb{background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-ms-thumb:hover,input[type=range]::-ms-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-ms-thumb:active,input[type=range]::-ms-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input:disabled,input[type=range]:disabled{background-color:transparent;background-image:linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR),var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));border:.0625rem solid var(--IDS-RANGE--DISABLED__BORDER-COLOR);cursor:default}.ids-range__input:disabled::-moz-range-thumb,input[type=range]:disabled::-moz-range-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}.ids-range__input:disabled::-webkit-slider-thumb,input[type=range]:disabled::-webkit-slider-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}.ids-range__input:disabled::-ms-thumb,input[type=range]:disabled::-ms-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}";
+var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-range .ids-range-ticks{display:flex;justify-content:space-between;margin-left:.75rem;margin-right:.75rem;margin-top:1.75rem;max-width:100%}.ids-range .ids-range-ticks .ids-range-tick{color:var(--ids-color-surface-text-on-default);display:flex;font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-weight:var(--ids-font-weight-body-text);justify-content:center;letter-spacing:0;line-height:var(--ids-font-line-height-body-text);position:relative;text-align:center;width:0}.ids-range .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:-1rem;width:.063rem}.ids-range .ids-range-ticks .ids-range-tick .ids-range-tick__label{display:block;position:relative}.ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick{color:var(--IDS-FORM--DISABLED__COLOR);font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-style:italic;font-weight:var(--ids-font-weight-body-text);letter-spacing:0;line-height:var(--ids-font-line-height-body-text)}.ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick:before{background-color:var(--IDS-FORM--DISABLED__COLOR)}.ids-range:has(input:disabled) label{color:var(--IDS-FORM-LABEL--DISABLED-COLOR);cursor:default!important;font-style:italic}.ids-range__input,input[type=range]{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;background-color:transparent;background-image:linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR),var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));background-repeat:no-repeat;background-size:98% 100%;border:var(--IDS-RANGE__BORDER-THICKNESS) solid var(--IDS-RANGE__BORDER-COLOR);border-radius:1rem;box-sizing:border-box;cursor:pointer;display:block;height:.5rem;margin:.75rem 0;padding:0;touch-action:pan-x;width:100%}.ids-range__input::-webkit-slider-thumb,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-webkit-slider-thumb:hover,input[type=range]::-webkit-slider-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-webkit-slider-thumb:active,input[type=range]::-webkit-slider-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input::-moz-range-thumb,input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-moz-range-thumb:hover,input[type=range]::-moz-range-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-moz-range-thumb:active,input[type=range]::-moz-range-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input::-ms-thumb,input[type=range]::-ms-thumb{background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-ms-thumb:hover,input[type=range]::-ms-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-ms-thumb:active,input[type=range]::-ms-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input:disabled,input[type=range]:disabled{background-color:transparent;background-image:linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR),var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));border:.0625rem solid var(--IDS-RANGE--DISABLED__BORDER-COLOR);cursor:default}.ids-range__input:disabled::-moz-range-thumb,input[type=range]:disabled::-moz-range-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}.ids-range__input:disabled::-webkit-slider-thumb,input[type=range]:disabled::-webkit-slider-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}.ids-range__input:disabled::-ms-thumb,input[type=range]:disabled::-ms-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}";
 
 var rangeLit = css`${unsafeCSS(css_248z)}`;
 

package/components/form/range/range.css

@@ -38,7 +38,7 @@
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -50,11 +50,6 @@
   }
 }
 
-.ids-range ::slotted(label),
-.ids-range .ids-label {
-  display: inline-block;
-  margin-bottom: 0.75rem !important;
-}
 .ids-range .ids-range-ticks {
   display: flex;
   justify-content: space-between;
@@ -73,7 +68,7 @@
   color: var(--ids-color-surface-text-on-default);
   font-family: var(--ids-font-family-body-text);
   font-size: var(--ids-font-size-body-text);
-  line-height: var(--ids-line-height-body-text);
+  line-height: var(--ids-font-line-height-body-text);
   font-weight: var(--ids-font-weight-body-text);
   letter-spacing: 0;
 }
@@ -96,7 +91,7 @@
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-family: var(--ids-font-family-body-text);
   font-size: var(--ids-font-size-body-text);
-  line-height: var(--ids-line-height-body-text);
+  line-height: var(--ids-font-line-height-body-text);
   font-weight: var(--ids-font-weight-body-text);
   letter-spacing: 0;
   font-style: italic;
@@ -104,6 +99,11 @@
 .ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick:before {
   background-color: var(--IDS-FORM--DISABLED__COLOR);
 }
+.ids-range:has(input:disabled) label {
+  font-style: italic;
+  color: var(--IDS-FORM-LABEL--DISABLED-COLOR);
+  cursor: default !important;
+}
 
 .ids-range__input,
 input[type=range] {
@@ -113,7 +113,7 @@ input[type=range] {
   box-sizing: border-box;
   display: block;
   padding: 0;
-  margin: 0;
+  margin: 0.75rem 0;
   width: 100%;
   height: 0.5rem;
   border: var(--IDS-RANGE__BORDER-THICKNESS) solid var(--IDS-RANGE__BORDER-COLOR);
@@ -124,7 +124,6 @@ input[type=range] {
   background-image: linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));
   touch-action: pan-x;
   -webkit-tap-highlight-color: transparent;
-  margin-bottom: 0.75rem;
 }
 .ids-range__input::-webkit-slider-thumb,
 input[type=range]::-webkit-slider-thumb {