@inera/ids-design 9.1.0 → 9.2.0

package/global/global.css

@@ -61,8 +61,9 @@
       var(--ids-box-shadow-position-y-elevated-2-effect-4, 0.25rem) var(--ids-box-shadow-blur-elevated-2-effect-4, 0.5rem) 0
       rgba(0, 0, 0, 0.14);
 }
-.ids--light.ids--inera, .ids--light.ids--inera-admin,
+.ids--light.ids--inera, .ids--light.ids--inera-general, .ids--light.ids--inera-admin,
 .ids--dark.ids--inera,
+.ids--dark.ids--inera-general,
 .ids--dark.ids--inera-admin {
   --IDS-FOCUS__BORDER-RADIUS: 0;
   --IDS-BORDER-RADIUS-SMALL: 0.125rem;
@@ -113,8 +114,10 @@
 [class^=ids-icon-],
 [class*=" ids-icon-"] {
   position: relative;
-  display: inline-block;
   box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
@@ -133,7 +136,7 @@
   display: block;
   text-decoration: none;
   text-align: center;
-  position: absolute;
+  position: static;
 }
 [class^=ids-icon-].ids-icon--interactive:focus-visible,
 [class*=" ids-icon-"].ids-icon--interactive:focus-visible {
@@ -266,6 +269,10 @@
   flex-shrink: 0;
   margin-top: 0.25rem;
 }
+[class^=ids-icon-].ids-box-link--start-icon:before,
+[class*=" ids-icon-"].ids-box-link--start-icon:before {
+  position: absolute;
+}
 [class^=ids-icon-].ids-mobile-menu-item--start-icon,
 [class*=" ids-icon-"].ids-mobile-menu-item--start-icon {
   flex-shrink: 0;
@@ -294,6 +301,11 @@
   transform: translate(-50%, -50%);
 }
 
+a [class^=ids-icon-]::before,
+a [class*=" ids-icon-"]::before {
+  position: absolute;
+}
+
 .ids-icon-log-out-small:before {
   content: "\e9ce";
 }
@@ -1186,7 +1198,8 @@
   content: "\e913";
 }
 
-.ids--light, .ids--dark {
+.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);
@@ -1204,10 +1217,15 @@
   --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--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--light.ids--inera, .ids--light.ids--inera-general, .ids--light.ids--inera-admin,
+.ids--dark.ids--inera,
+.ids--dark.ids--inera-general,
+.ids--dark.ids--inera-admin {
   --IDS-FONT-FAMILY-BASE: "Open Sans";
   --IDS-FONT-FAMILY-HEADING: "Poppins";
   --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
@@ -1219,10 +1237,16 @@
   --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
   --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
 }
-.ids--light.ids--dark, .ids--dark.ids--dark {
+.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--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-general, .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-general,
+.ids--dark.ids--dark.ids--inera-admin {
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
 
@@ -1380,7 +1404,6 @@
 .ids--dark .ids-heading-m .ids-anchor {
   color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
-  text-underline-offset: 0.125rem;
 }
 .ids--light .ids-heading-m .ids-anchor:visited,
 .ids--dark .ids-heading-m .ids-anchor:visited {
@@ -1392,15 +1415,17 @@
 }
 .ids--light .ids-heading-m .ids-anchor:link,
 .ids--dark .ids-heading-m .ids-anchor:link {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-m .ids-anchor:hover,
 .ids--dark .ids-heading-m .ids-anchor:hover {
   color: var(--ids-color-interactive-text-hover) !important;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-m .ids-anchor:active,
 .ids--dark .ids-heading-m .ids-anchor:active {
   color: var(--ids-color-interactive-text-active) !important;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-m:focus-visible,
 .ids--dark .ids-heading-m:focus-visible {
@@ -1420,7 +1445,6 @@
 .ids--dark .ids-heading-s .ids-anchor {
   color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
-  text-underline-offset: 0.125rem;
 }
 .ids--light .ids-heading-s .ids-anchor:visited,
 .ids--dark .ids-heading-s .ids-anchor:visited {
@@ -1432,15 +1456,17 @@
 }
 .ids--light .ids-heading-s .ids-anchor:link,
 .ids--dark .ids-heading-s .ids-anchor:link {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-s .ids-anchor:hover,
 .ids--dark .ids-heading-s .ids-anchor:hover {
   color: var(--ids-color-interactive-text-hover) !important;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-s .ids-anchor:active,
 .ids--dark .ids-heading-s .ids-anchor:active {
   color: var(--ids-color-interactive-text-active) !important;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-s:focus-visible,
 .ids--dark .ids-heading-s:focus-visible {
@@ -1460,7 +1486,6 @@
 .ids--dark .ids-heading-xs .ids-anchor {
   color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
-  text-underline-offset: 0.125rem;
 }
 .ids--light .ids-heading-xs .ids-anchor:visited,
 .ids--dark .ids-heading-xs .ids-anchor:visited {
@@ -1472,15 +1497,17 @@
 }
 .ids--light .ids-heading-xs .ids-anchor:link,
 .ids--dark .ids-heading-xs .ids-anchor:link {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-xs .ids-anchor:hover,
 .ids--dark .ids-heading-xs .ids-anchor:hover {
   color: var(--ids-color-interactive-text-hover) !important;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-xs .ids-anchor:active,
 .ids--dark .ids-heading-xs .ids-anchor:active {
   color: var(--ids-color-interactive-text-active) !important;
+  text-decoration: none !important;
 }
 .ids--light .ids-heading-xs:focus-visible,
 .ids--dark .ids-heading-xs:focus-visible {
@@ -1500,7 +1527,6 @@
 .ids--dark .ids-preamble .ids-anchor {
   color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
-  text-underline-offset: 0.125rem;
 }
 .ids--light .ids-preamble .ids-anchor:visited,
 .ids--dark .ids-preamble .ids-anchor:visited {
@@ -1513,16 +1539,22 @@
 .ids--light .ids-preamble .ids-anchor:link,
 .ids--dark .ids-preamble .ids-anchor:link {
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-preamble .ids-anchor:hover,
 .ids--dark .ids-preamble .ids-anchor:hover {
   color: var(--ids-color-interactive-text-hover) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-preamble .ids-anchor:active,
 .ids--dark .ids-preamble .ids-anchor:active {
   color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-body,
 .ids--dark .ids-body {
@@ -1538,7 +1570,6 @@
 .ids--dark .ids-body .ids-anchor {
   color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
-  text-underline-offset: 0.125rem;
 }
 .ids--light .ids-body .ids-anchor:visited,
 .ids--dark .ids-body .ids-anchor:visited {
@@ -1551,16 +1582,22 @@
 .ids--light .ids-body .ids-anchor:link,
 .ids--dark .ids-body .ids-anchor:link {
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-body .ids-anchor:hover,
 .ids--dark .ids-body .ids-anchor:hover {
   color: var(--ids-color-interactive-text-hover) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-body .ids-anchor:active,
 .ids--dark .ids-body .ids-anchor:active {
   color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-body.ids-subtle,
 .ids--dark .ids-body.ids-subtle {
@@ -1575,7 +1612,6 @@
 .ids--dark .ids-anchor {
   color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
-  text-underline-offset: 0.125rem;
 }
 .ids--light .ids-anchor:visited,
 .ids--dark .ids-anchor:visited {
@@ -1588,16 +1624,22 @@
 .ids--light .ids-anchor:link,
 .ids--dark .ids-anchor:link {
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-anchor:hover,
 .ids--dark .ids-anchor:hover {
   color: var(--ids-color-interactive-text-hover) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-anchor:active,
 .ids--dark .ids-anchor:active {
   color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-small,
 .ids--dark .ids-small {
@@ -1613,7 +1655,6 @@
 .ids--dark .ids-small .ids-anchor {
   color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
-  text-underline-offset: 0.125rem;
 }
 .ids--light .ids-small .ids-anchor:visited,
 .ids--dark .ids-small .ids-anchor:visited {
@@ -1626,16 +1667,22 @@
 .ids--light .ids-small .ids-anchor:link,
 .ids--dark .ids-small .ids-anchor:link {
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-small .ids-anchor:hover,
 .ids--dark .ids-small .ids-anchor:hover {
   color: var(--ids-color-interactive-text-hover) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-small .ids-anchor:active,
 .ids--dark .ids-small .ids-anchor:active {
   color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-pagelist,
 .ids--dark .ids-pagelist {
@@ -1651,7 +1698,6 @@
 .ids--dark .ids-pagelist .ids-anchor {
   color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
-  text-underline-offset: 0.125rem;
 }
 .ids--light .ids-pagelist .ids-anchor:visited,
 .ids--dark .ids-pagelist .ids-anchor:visited {
@@ -1664,16 +1710,22 @@
 .ids--light .ids-pagelist .ids-anchor:link,
 .ids--dark .ids-pagelist .ids-anchor:link {
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-pagelist .ids-anchor:hover,
 .ids--dark .ids-pagelist .ids-anchor:hover {
   color: var(--ids-color-interactive-text-hover) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light .ids-pagelist .ids-anchor:active,
 .ids--dark .ids-pagelist .ids-anchor:active {
   color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids--light ul.ids-bullet-list,
 .ids--light .ids-bullet-list,
@@ -11523,6 +11575,7 @@ button.ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--terti
   background-color: var(--IDS-BUTTON--TERTIARY__BACKGROUND-COLOR);
   text-decoration: underline;
   text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--tertiary:hover,
 button.ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--tertiary:hover {
@@ -11551,6 +11604,12 @@ button.ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--terti
   background-color: transparent !important;
   pointer-events: none;
 }
+.ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--tertiary [class^=ids-icon-]::before,
+.ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--tertiary [class*=" ids-icon-"]::before,
+button.ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--tertiary [class^=ids-icon-]::before,
+button.ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--tertiary [class*=" ids-icon-"]::before {
+  position: absolute;
+}
 .ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--loading,
 button.ids-button:not(.ids-button--fab):not(.ids-button--icon).ids-button--loading {
   pointer-events: none !important;
@@ -11710,6 +11769,7 @@ button.ids-button.ids-button--icon.ids-button--tertiary {
   background-color: var(--IDS-BUTTON--TERTIARY__BACKGROUND-COLOR);
   text-decoration: underline;
   text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
 }
 .ids-button.ids-button--icon.ids-button--tertiary:hover,
 button.ids-button.ids-button--icon.ids-button--tertiary:hover {
@@ -11738,6 +11798,12 @@ button.ids-button.ids-button--icon.ids-button--tertiary[disabled] {
   background-color: transparent !important;
   pointer-events: none;
 }
+.ids-button.ids-button--icon.ids-button--tertiary [class^=ids-icon-]::before,
+.ids-button.ids-button--icon.ids-button--tertiary [class*=" ids-icon-"]::before,
+button.ids-button.ids-button--icon.ids-button--tertiary [class^=ids-icon-]::before,
+button.ids-button.ids-button--icon.ids-button--tertiary [class*=" ids-icon-"]::before {
+  position: absolute;
+}
 .ids-button.ids-button--icon.ids-button--s,
 button.ids-button.ids-button--icon.ids-button--s {
   width: 1.75rem !important;
@@ -11805,6 +11871,8 @@ button.ids-button.ids-button--fab {
   -moz-user-select: none;
   -ms-user-select: none;
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
+  z-index: 20;
+  position: relative;
 }
 .ids-button.ids-button--fab [class^=ids-icon-],
 button.ids-button.ids-button--fab [class^=ids-icon-] {
@@ -11816,36 +11884,47 @@ button.ids-button.ids-button--fab:hover {
   background-color: var(--IDS-BUTTON--FAB__BACKGROUND-COLOR);
   border: var(--IDS-BUTTON--FAB__HOVER-BORDER);
 }
+.ids-button.ids-button--fab:hover [class^=ids-icon-],
+button.ids-button.ids-button--fab:hover [class^=ids-icon-] {
+  color: var(--IDS-BUTTON--FAB__HOVER-COLOR) !important;
+}
 .ids-button.ids-button--fab:focus-visible,
 button.ids-button.ids-button--fab:focus-visible {
   border-radius: var(--IDS-BORDER-RADIUS-100) !important;
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-button.ids-button--fab:focus-visible [class^=ids-icon-],
+button.ids-button.ids-button--fab:focus-visible [class^=ids-icon-] {
+  color: var(--IDS-BUTTON--FAB__ACTIVE-COLOR) !important;
+}
 
 .ids-link:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-link {
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  text-decoration-thickness: 0.0938rem;
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
   font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
-  text-underline-offset: 0.125rem;
   font-size: 1rem;
   line-height: 1.5rem;
   gap: 0.5rem;
   cursor: pointer;
   display: inline;
-  text-decoration: underline;
   position: relative;
   border-radius: var(--IDS-FOCUS__BORDER-RADIUS);
 }
 .ids-link.ids-link--icon {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 .ids-link:hover {
   text-decoration: underline !important;
+  text-underline-offset: 0.125rem !important;
+  text-decoration-thickness: 0.0938rem !important;
   color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
 }
 .ids-link:focus-visible {
@@ -11862,9 +11941,12 @@ button.ids-button.ids-button--fab:focus-visible {
   margin-right: 0;
   margin-top: 0.25rem;
 }
+.ids-link.ids-link--icon .ids-icon--text-start:before {
+  position: absolute;
+}
 .ids-link.ids-link--small {
   font-size: 0.875rem;
-  gap: 0.25rem !important;
+  gap: 0.5rem !important;
 }
 .ids-link.ids-link--small.ids-link--icon .ids-icon--text-start {
   font-size: 0.875rem;
@@ -11874,7 +11956,7 @@ button.ids-button.ids-button--fab:focus-visible {
   font-size: 0.875rem;
   position: relative;
   bottom: -0.125rem;
-  margin-left: 0.25rem !important;
+  margin-left: 0.375rem !important;
 }
 .ids-link.ids-link--block {
   display: flex;
@@ -11889,6 +11971,8 @@ button.ids-button.ids-button--fab:focus-visible {
 }
 .ids-link.ids-link--underlined.ids-link--icon {
   text-decoration: underline !important;
+  text-underline-offset: 0.125rem !important;
+  text-decoration-thickness: 0.0938rem !important;
 }
 .ids-link.ids-link--no-underline {
   text-decoration: none !important;
@@ -11924,6 +12008,9 @@ button.ids-button.ids-button--fab:focus-visible {
   color: var(--IDS-LINK--FOOTER__HOVER-COLOR);
   text-decoration: underline;
 }
+.ids-link.ids-link--footer:focus-visible {
+  outline-color: var(--IDS-LINK--FOOTER__OUTLINE-COLOR) !important;
+}
 .ids-link.ids-link--active-icon {
   text-decoration: none !important;
 }
@@ -12083,6 +12170,9 @@ button.ids-button.ids-button--fab:focus-visible {
   transform: translateY(-50%);
   color: var(--IDS-ICON--ACTIVE-COLOR);
   font-size: 1.25rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .ids-input:has(.ids-input--invalid) .ids-input__icon, .ids-input:has([aria-invalid=true]) .ids-input__icon {
   color: var(--IDS-ICON--INVALID-COLOR);
@@ -12144,6 +12234,7 @@ button.ids-button.ids-button--fab:focus-visible {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e919";
   font-size: 1.875rem;
   color: var(--IDS-INPUT--SEARCH__ICON-COLOR);
@@ -12173,7 +12264,7 @@ button.ids-button.ids-button--fab:focus-visible {
   padding: var(--IDS-INPUT__PADDING);
   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-MEDIUM);
+  border-radius: var(--IDS-BORDER-RADIUS-MEDIUM) !important;
   font-size: 1rem;
   color: var(--IDS-FORM__COLOR);
   display: block;
@@ -12277,6 +12368,11 @@ button.ids-button.ids-button--fab:focus-visible {
 .ids-input__input[type=color] {
   cursor: pointer;
 }
+@supports (-moz-appearance: none) {
+  .ids-input__input[type=date] + .ids-input__icon, .ids-input__input[type=datetime-local] + .ids-input__icon {
+    display: none;
+  }
+}
 
 /* Input Search cancel icon */
 ids-input input[type=search]::-webkit-search-cancel-button,
@@ -12296,7 +12392,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   padding: var(--IDS-INPUT__PADDING);
   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-MEDIUM);
+  border-radius: var(--IDS-BORDER-RADIUS-MEDIUM) !important;
   font-size: 1rem;
   color: var(--IDS-FORM__COLOR);
   display: block;
@@ -12535,8 +12631,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\e93a";
   font-size: 1rem;
+  content: "\e93a";
   color: var(--IDS-ICON--ACTIVE-COLOR);
   top: 0.1875rem;
   left: 0.1875rem;
@@ -12550,8 +12646,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\e92b";
   font-size: 1rem;
+  content: "\e92b";
   top: 0.125rem;
   left: 0.125rem;
   color: var(--IDS-ICON--ACTIVE-COLOR);
@@ -12647,6 +12743,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
 }
 .ids-check-button .ids-check-button__input[type=checkbox] {
   border-radius: var(--IDS-CHECK-BUTTON__BORDER-RADIUS);
@@ -12669,8 +12766,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\e93a";
   font-size: 1rem;
+  content: "\e93a";
   top: 50%;
   transform: translateY(-50%);
   left: 0.75rem;
@@ -12949,10 +13046,10 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-radio-button {
   position: relative;
   display: inline-block;
-  padding: 0.75rem 1rem;
+  padding: var(--IDS-RADIO-BUTTON__PADDING);
   justify-content: center;
   align-items: flex-start;
-  border-radius: 1.875rem;
+  border-radius: var(--IDS-RADIO-BUTTON__BORDER-RADIUS);
   border: var(--IDS-RADIO-BUTTON__BORDER-THICKNESS) solid var(--IDS-RADIO-BUTTON__BORDER-COLOR);
   background-color: var(--IDS-RADIO-BUTTON__BACKGROUND-COLOR);
   cursor: pointer;
@@ -12970,7 +13067,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   font-weight: 400;
   margin: 0;
   width: 100%;
-  padding-left: 1.875rem;
+  padding-left: 1.625rem;
+  user-select: none;
 }
 .ids-radio-button .ids-radio-button__label::before {
   font: icon;
@@ -12979,14 +13077,15 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-size: 1.25rem;
+  font-size: 1rem;
+  font-size: 1rem;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
 }
 .ids-radio-button .ids-radio-button__input[type=radio],
 .ids-radio-button .ids-radio-button__input {
-  border-radius: 1.875rem;
+  border-radius: var(--IDS-RADIO-BUTTON__BORDER-RADIUS);
   cursor: pointer;
   margin: 0;
   position: absolute;
@@ -13004,6 +13103,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e93a";
   font-size: 1.25rem;
   left: 0;
@@ -13021,7 +13121,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-radio-button .ids-radio-button__input[type=radio]:disabled:checked + .ids-radio-button_label::before,
 .ids-radio-button .ids-radio-button__input:disabled:checked + .ids-radio-button_label::before {
   cursor: default;
-  color: var(--IDS-RADIO-BUTTON--DISABLED-COLOR);
+  color: var(--IDS-RADIO-BUTTON--DISABLED__COLOR);
 }
 .ids-radio-button .ids-radio-button__input[type=radio]:disabled + .ids-radio-button__label,
 .ids-radio-button .ids-radio-button__input:disabled + .ids-radio-button__label {
@@ -13046,6 +13146,9 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   border-color: var(--IDS-RADIO-BUTTON--ACTIVE__BORDER-COLOR) !important;
   background-color: var(--IDS-RADIO-BUTTON--ACTIVE__BACKGROUND-COLOR) !important;
 }
+.ids-radio-button:has(.ids-radio-button__input:active) .ids-radio-button__label, .ids-radio-button:has(.ids-radio-button__input:checked:active) .ids-radio-button__label, .ids-radio-button:has(.ids-radio-button__input:active:not(:disabled)) .ids-radio-button__label {
+  color: var(--IDS-RADIO-BUTTON--ACTIVE__COLOR) !important;
+}
 .ids-radio-button:hover:has(.ids-radio-button__input:not(:disabled)), .ids-radio-button:hover:has(.ids-radio-button__input:checked:not(:disabled)) {
   background-color: var(--IDS-RADIO-BUTTON--HOVER__BACKGROUND-COLOR);
   border: var(--IDS-RADIO-BUTTON__BORDER-THICKNESS) solid var(--IDS-RADIO-BUTTON--HOVER__BORDER-COLOR);
@@ -13136,6 +13239,7 @@ input[type=range]::-webkit-slider-thumb {
   width: 1.5rem;
   outline: 0.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS-100);
+  border: 0;
   background-color: var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);
   cursor: pointer;
   position: relative;
@@ -13156,6 +13260,7 @@ input[type=range]::-moz-range-thumb {
   width: 1.5rem;
   outline: 0.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS-100);
+  border: 0;
   background-color: var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);
   cursor: pointer;
   position: relative;
@@ -13175,6 +13280,7 @@ input[type=range]::-ms-thumb {
   width: 1.5rem;
   outline: 0.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS-100);
+  border: 0;
   background-color: var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);
   cursor: pointer;
   position: relative;
@@ -13225,7 +13331,7 @@ input[type=range]:disabled::-ms-thumb {
   padding: var(--IDS-INPUT__PADDING);
   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-MEDIUM);
+  border-radius: var(--IDS-BORDER-RADIUS-MEDIUM) !important;
   font-size: 1rem;
   color: var(--IDS-FORM__COLOR);
   display: block;
@@ -13364,6 +13470,7 @@ input[type=range]:disabled::-ms-thumb {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e936";
   color: var(--IDS-ICON--ACTIVE-COLOR);
   top: 50%;
@@ -13371,6 +13478,7 @@ input[type=range]:disabled::-ms-thumb {
   right: var(--IDS-INPUT__ICON-RIGHT);
   z-index: 2;
   pointer-events: none;
+  font-size: 1rem;
 }
 .ids-select__wrapper:has(select:disabled)::after, .ids-select__wrapper:has(select[aria-disabled=true])::after {
   color: var(--IDS-FORM--DISABLED__COLOR) !important;
@@ -13384,7 +13492,7 @@ input[type=range]:disabled::-ms-thumb {
   padding: var(--IDS-INPUT__PADDING);
   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-MEDIUM);
+  border-radius: var(--IDS-BORDER-RADIUS-MEDIUM) !important;
   font-size: 1rem;
   color: var(--IDS-FORM__COLOR);
   display: block;
@@ -13526,6 +13634,7 @@ input[type=range]:disabled::-ms-thumb {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e936";
   color: var(--IDS-ICON--ACTIVE-COLOR);
   top: 50%;
@@ -13533,6 +13642,7 @@ input[type=range]:disabled::-ms-thumb {
   right: var(--IDS-INPUT__ICON-RIGHT);
   z-index: 2;
   pointer-events: none;
+  font-size: 1rem;
 }
 .ids-select-multiple__select-wrapper:has(.ids-input--invalid)::after, .ids-select-multiple__select-wrapper:has(input[aria-invalid=true])::after {
   color: var(--IDS-FORM--INVALID__COLOR);
@@ -13740,6 +13850,7 @@ input[type=range]:disabled::-ms-thumb {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e913";
   font-size: 1.25rem;
   line-height: 1.5rem;
@@ -13762,6 +13873,7 @@ input[type=range]:disabled::-ms-thumb {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e922";
   font-size: 1.25rem;
   color: var(--IDS-ICON--ACTIVE-COLOR);
@@ -13793,7 +13905,7 @@ input.ids-time__input {
   padding: var(--IDS-INPUT__PADDING);
   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-MEDIUM);
+  border-radius: var(--IDS-BORDER-RADIUS-MEDIUM) !important;
   font-size: 1rem;
   color: var(--IDS-FORM__COLOR);
   display: block;
@@ -13933,6 +14045,7 @@ input:focus-visible + .ids-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e934";
   display: inline-block;
   font-size: 0.75rem;
@@ -13971,6 +14084,7 @@ input:focus-visible + .ids-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e93a";
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -14042,7 +14156,7 @@ input:focus-visible + .ids-toggle input:before {
 }
 .ids-darkmode-toggle label {
   flex-shrink: 100;
-  color: var(--IDS-DARKMODE-TOGGLE-LABEL__COLOR);
+  color: var(--IDS-ICON-TOGGLE-LABEL__COLOR);
 }
 .ids-darkmode-toggle .ids-label-wrapper {
   bottom: -0.125rem;
@@ -14066,6 +14180,7 @@ input:focus-visible + .ids-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e6fd";
   position: absolute;
   cursor: pointer;
@@ -14086,6 +14201,7 @@ 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;
+  outline-color: var(--IDS-ICON-TOGGLE__OUTLINE-COLOR) !important;
 }
 .ids-darkmode-toggle input[type=checkbox]:after,
 .ids-darkmode-toggle input:after {
@@ -14095,6 +14211,7 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e6fc";
   display: inline-block;
   font-size: 0.75rem;
@@ -14110,6 +14227,11 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   -webkit-transition: 0.3s;
   transition: all 0.3s;
 }
+.ids-darkmode-toggle input[type=checkbox]:focus-visible,
+.ids-darkmode-toggle input:focus-visible {
+  outline-color: var(--IDS-ICON-TOGGLE__OUTLINE-COLOR) !important;
+  border-radius: 6.25rem;
+}
 .ids-darkmode-toggle input[type=checkbox]:hover:before,
 .ids-darkmode-toggle input:hover:before {
   background-color: var(--IDS-ICON-TOGGLE__HOVER-BACKGROUND-COLOR);
@@ -14139,6 +14261,7 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e6fd";
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -14206,7 +14329,7 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   padding: var(--IDS-INPUT__PADDING);
   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-MEDIUM);
+  border-radius: var(--IDS-BORDER-RADIUS-MEDIUM) !important;
   font-size: 1rem;
   color: var(--IDS-FORM__COLOR);
   display: block;
@@ -14286,49 +14409,19 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   border: var(--IDS-FORM--INVALID__BORDER);
   box-shadow: var(--IDS-FORM--INVALID-BOX-SHADOW);
 }
-.ids-datepicker .ids-datepicker__trigger {
-  cursor: pointer;
-  border: 0.125rem solid transparent;
-  background-color: var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);
-  color: var(--IDS-DATEPICKER__BUTTON-COLOR);
-  font-family: var(--IDS-FONT-FAMILY-BASE);
-}
-.ids-datepicker .ids-datepicker__trigger:hover {
-  color: var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR) !important;
-  background-color: var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);
-  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR);
-}
-.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 {
-  color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR) !important;
-  background-color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);
-  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);
-}
-.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[disabled], .ids-datepicker .ids-datepicker__trigger[aria-disabled=true] {
-  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR) !important;
-  background-color: var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR) !important;
-  border-color: transparent;
-  pointer-events: none;
-  font-weight: normal;
-}
-.ids-datepicker .ids-datepicker__trigger:disabled:before, .ids-datepicker .ids-datepicker__trigger[disabled]:before, .ids-datepicker .ids-datepicker__trigger[aria-disabled=true]:before {
-  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR) !important;
+.ids-datepicker.ids-datepicker--invalid .ids-datepicker__trigger:before {
+  color: var(--IDS-DATEPICKER__TRIGGER-BUTTON-INVALID-COLOR);
 }
 .ids-datepicker .ids-datepicker__trigger {
   cursor: pointer;
   position: absolute;
-  right: 0;
-  top: 0;
-  height: var(--IDS-INPUT__HEIGHT);
-  width: 3.25rem;
+  right: 0.75rem;
+  top: 0.25rem;
+  height: calc(var(--IDS-INPUT__HEIGHT) - 0.5rem);
+  width: calc(var(--IDS-INPUT__HEIGHT) - 0.5rem);
   background-color: var(--IDS-DATEPICKER__TRIGGER-BUTTON-BACKGROUND-COLOR);
-  border-top-right-radius: var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);
-  border-bottom-right-radius: var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);
+  border: 0;
+  border-radius: 100%;
 }
 .ids-datepicker .ids-datepicker__trigger:before {
   font: icon;
@@ -14337,6 +14430,7 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e944";
   font-size: 1.25rem;
   color: var(--IDS-DATEPICKER__TRIGGER-BUTTON-COLOR);
@@ -14344,12 +14438,28 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ids-datepicker .ids-datepicker__trigger:disabled {
-  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-DISABLED-BORDER-COLOR);
+.ids-datepicker .ids-datepicker__trigger:hover {
+  color: var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);
+}
+.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 {
+  color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);
+}
+.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:before {
   color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR);
 }
+.ids-datepicker .ids-datepicker__trigger:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+  border-radius: 100%;
+}
 .ids-datepicker .ids-datepicker__dialog {
   position: absolute;
   z-index: 200;
@@ -14410,8 +14520,8 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\e934";
   font-size: 1rem;
+  content: "\e934";
   color: var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);
   left: 50%;
   top: 50%;
@@ -14476,8 +14586,8 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\e936";
   font-size: 1rem;
+  content: "\e936";
   color: var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);
   right: 0.125rem;
   top: 50%;
@@ -14574,8 +14684,8 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\e937";
   font-size: 1rem;
+  content: "\e937";
   color: var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);
   left: 50%;
   top: 50%;
@@ -14588,8 +14698,8 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\e938";
   font-size: 1rem;
+  content: "\e938";
   color: var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);
   left: 50%;
   top: 50%;
@@ -14750,6 +14860,7 @@ input:focus-visible + .ids-darkmode-toggle input:before {
 }
 
 .ids--inera .ids-show-inera-all,
+.ids--inera-general .ids-show-inera-all,
 .ids--inera-admin .ids-show-inera-all {
   display: block !important;
 }
@@ -14761,6 +14872,13 @@ input:focus-visible + .ids-darkmode-toggle input:before {
   display: none !important;
 }
 
+.ids--inera-general .ids-show-inera-general {
+  display: block !important;
+}
+.ids--inera-general .ids-hide-inera-general {
+  display: none !important;
+}
+
 .ids--inera-admin .ids-show-inera-admin {
   display: block !important;
 }