@inera/ids-design 6.1.0 → 6.2.0

package/license.md

@@ -1,7 +1,7 @@
-# License
-
-The package @inera/ids-design is solely for the purpose of being used for and on behalf of Inera AB and its subsidiaries.
-
-Individuals or entities that are not affiliated with or employed by Inera AB or its subsidiaries are prohibited from accessing or utilizing this package. Additionally, they may not reproduce, sell, publish any information, content, or materials available through it for any purpose.
-
-By accessing and using this package, you agree to be bound by these terms of use.
+# License
+
+The package @inera/ids-design is solely for the purpose of being used for and on behalf of Inera AB and its subsidiaries.
+
+Individuals or entities that are not affiliated with or employed by Inera AB or its subsidiaries are prohibited from accessing or utilizing this package. Additionally, they may not reproduce, sell, publish any information, content, or materials available through it for any purpose.
+
+By accessing and using this package, you agree to be bound by these terms of use.

package/package.json

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

package/themes/1177/1177-tokens.css

@@ -1,34 +1,34 @@
-:root, :host {
-  --IDS-COLOR-PRIMARY-30: #6a0032;
-  --IDS-COLOR-PRIMARY-35: #a00b36;
-  --IDS-COLOR-PRIMARY-40: #c12143;
-  --IDS-COLOR-PRIMARY-90: #faeef0;
-
-  --IDS-COLOR-ACCENT-30: #3b4266;
-  --IDS-COLOR-ACCENT-40: #396291;
-  --IDS-COLOR-ACCENT-90: #C6D2DF;
-  --IDS-COLOR-ACCENT-95: #f1f1f5;
-
-  --IDS-COLOR-SECONDARY-95: #FAF8F6;
-
-  --IDS-COLOR-SUCCESS-30: #395428;
-  --IDS-COLOR-SUCCESS-40: #419002;
-  --IDS-COLOR-SUCCESS-99: #eef8ee;
-
-  --IDS-COLOR-ATTENTION-40: #ffc100;
-  --IDS-COLOR-ATTENTION-95: #fff8e0;
-
-  --IDS-COLOR-NEUTRAL-20: #353535;
-  --IDS-COLOR-NEUTRAL-40: #636466;
-  --IDS-COLOR-NEUTRAL-50: #808285;
-  --IDS-COLOR-NEUTRAL-90: #dadbdc;
-  --IDS-COLOR-NEUTRAL-99: #f1f2f2;
-  --IDS-COLOR-NEUTRAL-100: #fff;
-
-  --IDS-COLOR-ERROR-40: #c12143;
-  --IDS-COLOR-ERROR-99: #faeef0;
-
-  --IDS-COLOR-BACKGROUND-40: #fff;
-
-  --IDS-COLOR-PRIMARY-30-OPACITY-03: #dfa9b8;
+:root, :host {
+  --IDS-COLOR-PRIMARY-30: #6a0032;
+  --IDS-COLOR-PRIMARY-35: #a00b36;
+  --IDS-COLOR-PRIMARY-40: #c12143;
+  --IDS-COLOR-PRIMARY-90: #faeef0;
+
+  --IDS-COLOR-ACCENT-30: #3b4266;
+  --IDS-COLOR-ACCENT-40: #396291;
+  --IDS-COLOR-ACCENT-90: #C6D2DF;
+  --IDS-COLOR-ACCENT-95: #f1f1f5;
+
+  --IDS-COLOR-SECONDARY-95: #FAF8F6;
+
+  --IDS-COLOR-SUCCESS-30: #395428;
+  --IDS-COLOR-SUCCESS-40: #419002;
+  --IDS-COLOR-SUCCESS-99: #eef8ee;
+
+  --IDS-COLOR-ATTENTION-40: #ffc100;
+  --IDS-COLOR-ATTENTION-95: #fff8e0;
+
+  --IDS-COLOR-NEUTRAL-20: #353535;
+  --IDS-COLOR-NEUTRAL-40: #636466;
+  --IDS-COLOR-NEUTRAL-50: #808285;
+  --IDS-COLOR-NEUTRAL-90: #dadbdc;
+  --IDS-COLOR-NEUTRAL-99: #f1f2f2;
+  --IDS-COLOR-NEUTRAL-100: #fff;
+
+  --IDS-COLOR-ERROR-40: #c12143;
+  --IDS-COLOR-ERROR-99: #faeef0;
+
+  --IDS-COLOR-BACKGROUND-40: #fff;
+
+  --IDS-COLOR-PRIMARY-30-OPACITY-03: #dfa9b8;
 }

package/themes/1177/1177.css

@@ -2712,6 +2712,11 @@ body.ids {
   -moz-user-select: none;
   -ms-user-select: none;
 }
+.ids .ids-button [class*=" ids-icon-"],
+.ids-button [class*=" ids-icon-"],
+.ids button.ids-button [class*=" ids-icon-"] {
+  font-size: 1.125rem;
+}
 .ids .ids-button:hover,
 .ids-button:hover,
 .ids button.ids-button:hover {
@@ -2729,6 +2734,8 @@ body.ids {
 .ids .ids-button:focus,
 .ids-button:focus,
 .ids button.ids-button:focus {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
@@ -2790,6 +2797,9 @@ body.ids {
 .ids .ids-button.ids-button--secondary:focus,
 .ids-button.ids-button--secondary:focus,
 .ids button.ids-button.ids-button--secondary:focus {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
@@ -2803,6 +2813,7 @@ body.ids {
   box-shadow: none;
   font-family: var(--IDS-FONT-FAMILY-HEADING);
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
 }
 .ids .ids-button.ids-button--tertiary.ids-button--s,
 .ids-button.ids-button--tertiary.ids-button--s,
@@ -2837,6 +2848,10 @@ body.ids {
 .ids .ids-button.ids-button--tertiary:focus,
 .ids-button.ids-button--tertiary:focus,
 .ids button.ids-button.ids-button--tertiary:focus {
+  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);
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
@@ -2850,11 +2865,6 @@ body.ids {
   color: var(--IDS-BUTTON--DISABLED__COLOR);
   text-decoration: none;
 }
-.ids .ids-button [class^=ids-icon-],
-.ids-button [class^=ids-icon-],
-.ids button.ids-button [class^=ids-icon-] {
-  font-size: 1.125rem;
-}
 .ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
 .ids-button.ids-button--icon,
 .ids-button.ids-button--fab,
@@ -2862,7 +2872,7 @@ body.ids {
 .ids button.ids-button.ids-button--fab {
   width: 2.75rem;
   height: 2.75rem !important;
-  border-radius: 100%;
+  border-radius: 100% !important;
   font-style: normal;
   font-weight: 400;
   line-height: 0 !important;
@@ -2921,6 +2931,8 @@ body.ids {
 .ids .ids-button.ids-button--icon:focus,
 .ids-button.ids-button--icon:focus,
 .ids button.ids-button.ids-button--icon:focus {
+  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;
 }
@@ -2960,8 +2972,6 @@ body.ids {
 .ids button.ids-button.ids-button--block {
   display: flex;
   width: 100%;
-  align-items: center;
-  justify-content: center;
 }
 @media (max-width: 1024px) {
   .ids .ids-button.ids-button--m-block,
@@ -2969,8 +2979,6 @@ body.ids {
   .ids button.ids-button.ids-button--m-block {
     display: flex;
     width: 100%;
-    align-items: center;
-    justify-content: center;
   }
 }
 @media (max-width: 640px) {
@@ -2979,8 +2987,6 @@ body.ids {
   .ids button.ids-button.ids-button--s-block {
     display: flex;
     width: 100%;
-    align-items: center;
-    justify-content: center;
   }
 }
 .ids .ids-button.ids-button--disabled, .ids .ids-button[disabled],
@@ -3429,63 +3435,6 @@ input:focus + .ids-checkbox input::before {
   font-style: italic;
 }
 
-input.ids-range {
-  appearance: none;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));
-  background-repeat: no-repeat;
-  border: 0.063rem;
-  cursor: pointer;
-  display: block;
-  padding: 0;
-  border-radius: 1rem;
-  margin: 0;
-}
-input.ids-range::-ms-track {
-  width: 100%;
-  cursor: pointer;
-  background: transparent;
-  border-color: transparent;
-  color: transparent;
-}
-input.ids-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 100%;
-  background: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
-  cursor: pointer;
-}
-input.ids-range::-ms-thumb {
-  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
-  height: 1.375rem;
-  width: 1.5rem;
-  border-radius: 100%;
-  cursor: pointer;
-}
-input.ids-range:disabled {
-  cursor: default;
-  appearance: none;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));
-  background-repeat: no-repeat;
-  border: 0.063rem;
-  padding: 0;
-  border-radius: 1rem;
-}
-input.ids-range:disabled::-webkit-slider-thumb {
-  cursor: default;
-  background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
-}
-input.ids-range:disabled::-ms-thumb {
-  cursor: default;
-}
-
 .ids-select {
   appearance: none !important;
   -webkit-appearance: none !important;
@@ -3893,6 +3842,88 @@ input:focus + .ids-toggle input:before {
   }
 }
 
+.ids-range .ids-label {
+  display: inline-block;
+  margin-bottom: 0.75rem !important;
+}
+
+.ids-range__input,
+input[type=range] {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 0.5rem;
+  border: 0.0625rem solid var(--IDS-RANGE__BORDER-COLOR);
+  border-radius: 1rem;
+  background-size: 98% 100%;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(var(--IDS-RANGE__FILL-BACKGROUND-COLOR), var(--IDS-RANGE__FILL-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 {
+  -webkit-appearance: none;
+  height: 1.5rem;
+  width: 1.5rem;
+  outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: 100%;
+  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.ids-range__input::-moz-range-thumb,
+input[type=range]::-moz-range-thumb {
+  -moz-appearance: none;
+  height: 1.5rem;
+  width: 1.5rem;
+  outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: 100%;
+  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.ids-range__input::-ms-thumb,
+input[type=range]::-ms-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+  outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: 100%;
+  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.ids-range__input:disabled,
+input[type=range]:disabled {
+  cursor: default;
+  border: 0.0625rem dashed var(--IDS-RANGE--DISABLED__BORDER-COLOR);
+  background-image: linear-gradient(var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR));
+}
+.ids-range__input:disabled::-moz-range-thumb,
+input[type=range]:disabled::-moz-range-thumb {
+  cursor: default;
+  background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
+}
+.ids-range__input:disabled::-webkit-slider-thumb,
+input[type=range]:disabled::-webkit-slider-thumb {
+  cursor: default;
+  background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
+}
+.ids-range__input:disabled::-ms-thumb,
+input[type=range]:disabled::-ms-thumb {
+  cursor: default;
+  background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
+}
+
 .ids-form-group__fieldset {
   border: none;
   margin: 0;
@@ -4068,7 +4099,7 @@ input:focus + .ids-toggle input:before {
   }
 }
 .ids .ids-heading-m .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4101,7 +4132,7 @@ input:focus + .ids-toggle input:before {
   }
 }
 .ids .ids-heading-s .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4127,7 +4158,7 @@ input:focus + .ids-toggle input:before {
   font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT);
 }
 .ids .ids-heading-xs .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4159,7 +4190,7 @@ input:focus + .ids-toggle input:before {
   }
 }
 .ids .ids-preamble .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4183,7 +4214,7 @@ input:focus + .ids-toggle input:before {
   letter-spacing: 0;
 }
 .ids .ids-body .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4211,7 +4242,7 @@ input:focus + .ids-toggle input:before {
   font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 .ids .ids-small .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4234,6 +4265,21 @@ input:focus + .ids-toggle input:before {
   font-weight: var(--IDS-PAGE-LIST__FONT-WEIGHT);
   letter-spacing: var(--IDS-PAGE-LIST__LETTER-SPACING);
 }
+.ids .ids-pagelist .ids-anchor {
+  color: var(--IDS-ANCHOR__COLOR) !important;
+  text-decoration: none;
+  text-underline-offset: 0.125rem;
+}
+.ids .ids-pagelist .ids-anchor:visited {
+  color: var(--IDS-ANCHOR__COLOR);
+}
+.ids .ids-pagelist .ids-anchor:link {
+  text-decoration: underline;
+}
+.ids .ids-pagelist .ids-anchor:active, .ids .ids-pagelist .ids-anchor:hover {
+  color: var(--IDS-ANCHOR__HOVER-COLOR);
+  text-decoration: underline;
+}
 .ids ul.ids-bullet-list,
 .ids .ids-bullet-list {
   list-style: disc;
@@ -4982,25 +5028,17 @@ input:focus + .ids-toggle input:before {
 [class^=ids-icon-].ids-icon--text-start {
   margin-right: 0.5rem;
   position: relative;
-  bottom: -0.125rem;
+  top: -0.0938rem;
+  vertical-align: middle;
   flex-shrink: 0;
 }
-[class^=ids-icon-].ids-icon--text-start:before {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 [class^=ids-icon-].ids-icon--text-end {
   margin-left: 0.5rem;
   position: relative;
-  bottom: -0.125rem;
+  top: -0.0938rem;
+  vertical-align: middle;
   flex-shrink: 0;
 }
-[class^=ids-icon-].ids-icon--text-end:before {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 [class^=ids-icon-].ids-icon--s {
   width: 1rem;
   height: 1rem;
@@ -5257,12 +5295,13 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
   --IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="rgb(128,130,133)"></path></svg>');
   /* Range */
-  --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
-  --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR);
-  --IDS-RANGE__TICK-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-RANGE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-RANGE__FILL-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-RANGE__TICK-LINE-COLOR: var(--IDS-COLOR-NEUTRAL-50);
-  --IDS-RANGE__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-RANGE--DISABLED__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
   /**********************
   * COMPONENTS
   **********************/