@inera/ids-design 6.0.2 → 6.1.0

package/global/global.css

@@ -2373,11 +2373,20 @@
   font-size: 0.875rem;
 }
 .ids-link.ids-link--small.ids-link--start-icon {
-  padding-left: 1.25rem;
+  padding-left: 1.125rem;
+}
+.ids-link.ids-link--small.ids-link--start-icon:before {
+  font-size: 0.875rem;
 }
 .ids-link.ids-link--small.ids-link--end-icon {
   padding-right: 1.125rem;
 }
+.ids-link.ids-link--small.ids-link--end-icon:before {
+  font-size: 0.875rem;
+}
+.ids-link.ids-link--large {
+  text-decoration: none !important;
+}
 .ids-link.ids-link--large.ids-link--start-icon, .ids-link.ids-link--large.ids-link--end-icon {
   padding-left: 1.75rem;
 }
@@ -2385,6 +2394,9 @@
   font-size: 1.25rem;
   top: 0.0625rem !important;
 }
+.ids-link.ids-link--large:hover {
+  text-decoration: none !important;
+}
 .ids-link.ids-link--block {
   display: flex;
   flex-grow: 1;
@@ -2422,6 +2434,12 @@
 .ids-link.ids-link--underlined:has(.ids-icon), .ids-link.ids-link--underlined.ids-link--start-icon, .ids-link.ids-link--underlined.ids-link--end-icon {
   text-decoration: underline !important;
 }
+.ids-link.ids-link--no-underline {
+  text-decoration: none !important;
+}
+.ids-link.ids-link--no-underline:has(.ids-icon), .ids-link.ids-link--no-underline.ids-link--start-icon, .ids-link.ids-link--no-underline.ids-link--end-icon {
+  text-decoration: none !important;
+}
 .ids-link.ids-link--active-icon {
   text-decoration: none !important;
 }
@@ -2606,10 +2624,16 @@
   -moz-user-select: none;
   -ms-user-select: none;
 }
-.ids .ids-button:hover, .ids .ids-button.ids-button--active,
+.ids .ids-button:hover,
 .ids-button:hover,
+.ids button.ids-button:hover {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
+}
+.ids .ids-button:active, .ids .ids-button.ids-button--active,
+.ids-button:active,
 .ids-button.ids-button--active,
-.ids button.ids-button:hover,
+.ids button.ids-button:active,
 .ids button.ids-button.ids-button--active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
@@ -2620,14 +2644,6 @@
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids .ids-button:active,
-.ids-button:active,
-.ids button.ids-button:active {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids .ids-button.ids-button--s,
 .ids-button.ids-button--s,
 .ids button.ids-button.ids-button--s {
@@ -2674,14 +2690,12 @@
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
   border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary.ids-button--active,
-.ids-button.ids-button--secondary:hover,
+.ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:active,
 .ids-button.ids-button--secondary.ids-button--active,
-.ids button.ids-button.ids-button--secondary:hover,
-.ids button.ids-button.ids-button--secondary.ids-button--active {
+.ids-button.ids-button--secondary:active,
+.ids button.ids-button.ids-button--secondary.ids-button--active,
+.ids button.ids-button.ids-button--secondary:active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
 }
@@ -2691,14 +2705,6 @@
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids .ids-button.ids-button--secondary:active,
-.ids-button.ids-button--secondary:active,
-.ids button.ids-button.ids-button--secondary:active {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-COLOR-NEUTRAL-100);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids .ids-button.ids-button--tertiary,
 .ids-button.ids-button--tertiary,
 .ids button.ids-button.ids-button--tertiary {
@@ -2722,29 +2728,27 @@
   line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
   padding: var(--IDS-BUTTON--L__PADDING);
 }
-.ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary.ids-button--active,
+.ids .ids-button.ids-button--tertiary:hover,
 .ids-button.ids-button--tertiary:hover,
-.ids-button.ids-button--tertiary.ids-button--active,
-.ids button.ids-button.ids-button--tertiary:hover,
-.ids button.ids-button.ids-button--tertiary.ids-button--active {
+.ids button.ids-button.ids-button--tertiary:hover {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
 }
-.ids .ids-button.ids-button--tertiary:focus,
-.ids-button.ids-button--tertiary:focus,
-.ids button.ids-button.ids-button--tertiary:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids .ids-button.ids-button--tertiary:active,
+.ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary.ids-button--active,
 .ids-button.ids-button--tertiary:active,
-.ids button.ids-button.ids-button--tertiary:active {
+.ids-button.ids-button--tertiary.ids-button--active,
+.ids button.ids-button.ids-button--tertiary:active,
+.ids button.ids-button.ids-button--tertiary.ids-button--active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+}
+.ids .ids-button.ids-button--tertiary:focus,
+.ids-button.ids-button--tertiary:focus,
+.ids button.ids-button.ids-button--tertiary:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
@@ -2812,10 +2816,16 @@
 .ids button.ids-button.ids-button--icon.ids-button--secondary {
   background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
 }
-.ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon.ids-button--active,
+.ids .ids-button.ids-button--icon:hover,
 .ids-button.ids-button--icon:hover,
+.ids button.ids-button.ids-button--icon:hover {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon.ids-button--active,
+.ids-button.ids-button--icon:active,
 .ids-button.ids-button--icon.ids-button--active,
-.ids button.ids-button.ids-button--icon:hover,
+.ids button.ids-button.ids-button--icon:active,
 .ids button.ids-button.ids-button--icon.ids-button--active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
@@ -2826,14 +2836,6 @@
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids .ids-button.ids-button--icon:active,
-.ids-button.ids-button--icon:active,
-.ids button.ids-button.ids-button--icon:active {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-COLOR-NEUTRAL-100);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids .ids-button.ids-button--submit,
 .ids-button.ids-button--submit,
 .ids button.ids-button.ids-button--submit {
@@ -2912,16 +2914,6 @@
   align-items: flex-start;
   gap: 0.5rem;
   margin-bottom: 0.25rem;
-  margin-right: 0.25rem;
-}
-.ids-radio .ids-label-tooltip-wrapper {
-  margin-bottom: -0.25rem;
-}
-.ids-radio .ids-label-tooltip-wrapper label {
-  display: inline;
-  top: -0.188rem;
-  position: relative;
-  margin-right: 0.25rem;
 }
 .ids-radio input,
 .ids-radio input[type=radio] {
@@ -3026,16 +3018,6 @@
   align-items: flex-start;
   gap: 0.5rem;
   margin-bottom: 0.25rem;
-  margin-right: 0.25rem;
-}
-.ids-checkbox .ids-label-tooltip-wrapper {
-  margin-bottom: -0.25rem;
-}
-.ids-checkbox .ids-label-tooltip-wrapper label {
-  display: inline;
-  top: -0.188rem;
-  position: relative;
-  margin-right: 0.25rem;
 }
 .ids-checkbox input[type=checkbox],
 .ids-checkbox input {
@@ -3109,8 +3091,9 @@ input:focus + .ids-checkbox input::before {
 .ids-checkbox input.ids-input--invalid:checked::after {
   color: var(--IDS-ICON--INVALID-COLOR);
 }
-.ids-checkbox input[type=checkbox].ids-input--invalid::before,
-.ids-checkbox input.ids-input--invalid::before {
+.ids-checkbox input[type=checkbox].ids-input--invalid::before, .ids-checkbox input[type=checkbox][aria-invalid=true]::before,
+.ids-checkbox input.ids-input--invalid::before,
+.ids-checkbox input[aria-invalid=true]::before {
   border: var(--IDS-FORM--INVALID__BORDER);
   box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3119,8 +3102,9 @@ input:focus + .ids-checkbox input::before {
 .ids-checkbox.ids-checkbox--light input::before {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before,
-.ids-checkbox.ids-checkbox--light input.ids-input--invalid::before {
+.ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before, .ids-checkbox.ids-checkbox--light input[type=checkbox][aria-invalid=true]::before,
+.ids-checkbox.ids-checkbox--light input.ids-input--invalid::before,
+.ids-checkbox.ids-checkbox--light input[aria-invalid=true]::before {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 .ids-checkbox.ids-checkbox--block {
@@ -3461,7 +3445,7 @@ input.ids-range:disabled::-ms-thumb {
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-.ids-select.ids-input--invalid {
+.ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: var(--IDS-FORM--INVALID__BORDER);
   box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
@@ -3469,7 +3453,7 @@ input.ids-range:disabled::-ms-thumb {
 .ids-select.ids-input--light {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-select.ids-input--light.ids-input--invalid {
+.ids-select.ids-input--light.ids-input--invalid, .ids-select.ids-input--light[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: var(--IDS-FORM--INVALID__BORDER);
   box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
@@ -3515,7 +3499,7 @@ input.ids-range:disabled::-ms-thumb {
   transform: translateY(-50%);
   right: var(--IDS-INPUT__ICON-RIGHT);
 }
-.ids-select-wrapper:has(.ids-input--invalid)::after {
+.ids-select-wrapper:has(.ids-input--invalid)::after, .ids-select-wrapper:has([aria-invalid=true])::after {
   color: var(--IDS-ICON--INVALID-COLOR);
 }
 .ids-select-wrapper:has(select:disabled)::after, .ids-select-wrapper:has([aria-disabled=true])::after {
@@ -3701,16 +3685,6 @@ input.ids-time__input:disabled {
   align-items: flex-start;
   gap: 0.5rem;
   margin-bottom: 0.25rem;
-  margin-right: 0;
-}
-.ids-toggle .ids-label-tooltip-wrapper {
-  margin-bottom: -0.25rem;
-}
-.ids-toggle .ids-label-tooltip-wrapper label {
-  display: inline;
-  top: -0.188rem;
-  position: relative;
-  margin-right: 0;
 }
 .ids-toggle label {
   position: relative;
@@ -3734,6 +3708,7 @@ input.ids-time__input:disabled {
   border: 0.063rem solid transparent;
   border-radius: 6.25rem;
   appearance: none;
+  flex-shrink: 0;
 }
 .ids-toggle input[type=checkbox]:before,
 .ids-toggle input:before {
@@ -4270,6 +4245,342 @@ input:focus + .ids-toggle input:before {
   position: absolute;
 }
 
+.ids-icon-download-small:before {
+  content: "\e99a";
+}
+
+.ids-icon-copy-link:before {
+  content: "\e99b";
+}
+
+.ids-icon-activity:before {
+  content: "\e948";
+}
+
+.ids-icon-alarm:before {
+  content: "\e949";
+}
+
+.ids-icon-archive:before {
+  content: "\e94a";
+}
+
+.ids-icon-bookmark:before {
+  content: "\e94b";
+}
+
+.ids-icon-call-ongoing:before {
+  content: "\e94c";
+}
+
+.ids-icon-call:before {
+  content: "\e94d";
+}
+
+.ids-icon-camera-off:before {
+  content: "\e94e";
+}
+
+.ids-icon-camera-on:before {
+  content: "\e94f";
+}
+
+.ids-icon-camera-switch:before {
+  content: "\e950";
+}
+
+.ids-icon-chart-bar:before {
+  content: "\e951";
+}
+
+.ids-icon-chart-line:before {
+  content: "\e952";
+}
+
+.ids-icon-chat:before {
+  content: "\e953";
+}
+
+.ids-icon-clipboard-with-cross:before {
+  content: "\e954";
+}
+
+.ids-icon-clipboard-with-text:before {
+  content: "\e955";
+}
+
+.ids-icon-clipboard:before {
+  content: "\e956";
+}
+
+.ids-icon-copy-file:before {
+  content: "\e957";
+}
+
+.ids-icon-denied-small:before {
+  content: "\e958";
+}
+
+.ids-icon-denied:before {
+  content: "\e959";
+}
+
+.ids-icon-desktop:before {
+  content: "\e95a";
+}
+
+.ids-icon-doctors-bag:before {
+  content: "\e95b";
+}
+
+.ids-icon-document:before {
+  content: "\e95c";
+}
+
+.ids-icon-download:before {
+  content: "\e95d";
+}
+
+.ids-icon-e-mail-sent:before {
+  content: "\e95e";
+}
+
+.ids-icon-e-mail-unread:before {
+  content: "\e95f";
+}
+
+.ids-icon-e-mail:before {
+  content: "\e960";
+}
+
+.ids-icon-edit:before {
+  content: "\e961";
+}
+
+.ids-icon-error-filled:before {
+  content: "\e962";
+}
+
+.ids-icon-error:before {
+  content: "\e963";
+}
+
+.ids-icon-file-csv:before {
+  content: "\e964";
+}
+
+.ids-icon-file-excel:before {
+  content: "\e965";
+}
+
+.ids-icon-file-image:before {
+  content: "\e966";
+}
+
+.ids-icon-file-other:before {
+  content: "\e967";
+}
+
+.ids-icon-file-pdf:before {
+  content: "\e968";
+}
+
+.ids-icon-file-ppt:before {
+  content: "\e969";
+}
+
+.ids-icon-file-word:before {
+  content: "\e96a";
+}
+
+.ids-icon-find-care:before {
+  content: "\e96b";
+}
+
+.ids-icon-flag:before {
+  content: "\e96c";
+}
+
+.ids-icon-folder:before {
+  content: "\e96d";
+}
+
+.ids-icon-form-numbered-reoccurring:before {
+  content: "\e96e";
+}
+
+.ids-icon-form-numbered:before {
+  content: "\e96f";
+}
+
+.ids-icon-functions:before {
+  content: "\e970";
+}
+
+.ids-icon-headphones:before {
+  content: "\e971";
+}
+
+.ids-icon-hourglass-end:before {
+  content: "\e972";
+}
+
+.ids-icon-hourglass-start:before {
+  content: "\e973";
+}
+
+.ids-icon-hourglass:before {
+  content: "\e974";
+}
+
+.ids-icon-house:before {
+  content: "\e975";
+}
+
+.ids-icon-id-card-locked:before {
+  content: "\e976";
+}
+
+.ids-icon-id-card:before {
+  content: "\e977";
+}
+
+.ids-icon-image:before {
+  content: "\e978";
+}
+
+.ids-icon-inactivity:before {
+  content: "\e979";
+}
+
+.ids-icon-lightbulb:before {
+  content: "\e97a";
+}
+
+.ids-icon-list:before {
+  content: "\e97b";
+}
+
+.ids-icon-listen:before {
+  content: "\e97c";
+}
+
+.ids-icon-locked:before {
+  content: "\e97d";
+}
+
+.ids-icon-log-locked:before {
+  content: "\e97e";
+}
+
+.ids-icon-log:before {
+  content: "\e97f";
+}
+
+.ids-icon-mobile:before {
+  content: "\e980";
+}
+
+.ids-icon-moment-start:before {
+  content: "\e981";
+}
+
+.ids-icon-moment-stop:before {
+  content: "\e982";
+}
+
+.ids-icon-office-building:before {
+  content: "\e983";
+}
+
+.ids-icon-organization:before {
+  content: "\e984";
+}
+
+.ids-icon-prescription:before {
+  content: "\e985";
+}
+
+.ids-icon-print:before {
+  content: "\e986";
+}
+
+.ids-icon-settings:before {
+  content: "\e987";
+}
+
+.ids-icon-shield-locked-filled:before {
+  content: "\e988";
+}
+
+.ids-icon-shield-locked-outlined:before {
+  content: "\e989";
+}
+
+.ids-icon-social-facebook:before {
+  content: "\e98a";
+}
+
+.ids-icon-social-linkedin:before {
+  content: "\e98b";
+}
+
+.ids-icon-social-x:before {
+  content: "\e98c";
+}
+
+.ids-icon-switch-person:before {
+  content: "\e98d";
+}
+
+.ids-icon-toggle-card-view:before {
+  content: "\e98e";
+}
+
+.ids-icon-toggle-list-view:before {
+  content: "\e98f";
+}
+
+.ids-icon-trash-can:before {
+  content: "\e990";
+}
+
+.ids-icon-tube-analysis:before {
+  content: "\e991";
+}
+
+.ids-icon-tube-empty:before {
+  content: "\e992";
+}
+
+.ids-icon-tube-filled:before {
+  content: "\e993";
+}
+
+.ids-icon-unlocked:before {
+  content: "\e994";
+}
+
+.ids-icon-video-off:before {
+  content: "\e995";
+}
+
+.ids-icon-video-on:before {
+  content: "\e996";
+}
+
+.ids-icon-video-switch:before {
+  content: "\e997";
+}
+
+.ids-icon-visibility-off:before {
+  content: "\e998";
+}
+
+.ids-icon-visibility:before {
+  content: "\e999";
+}
+
 .ids-icon-arrow-link:before {
   content: "\e947";
 }