npm - @inera/ids-design - Versions diffs - 5.4.0 → 5.5.0 - Mend

@inera/ids-design 5.4.0 → 5.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (486) hide show

package/{dist/global → global}/global.css RENAMED Viewed

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @media (max-width: 1023px) {
   .ids-desktop {
     display: none !important;
@@ -2767,6 +2768,7 @@
   width: 1.25rem;
   height: 1.25rem;
   color: var(--IDS-COLOR-ACCENT-40);
+  box-sizing: border-box;
   border: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   border-radius: 50%;
@@ -2805,9 +2807,11 @@
   cursor: pointer;
   width: 1.125rem;
   height: 1.125rem;
+  box-sizing: border-box;
   border-radius: 50%;
-  top: 0;
-  left: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
 }
@@ -2827,8 +2831,6 @@
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-  top: 0;
-  left: 0;
 }
 .ids-radio input:disabled:checked::after,
 .ids-radio input[type=radio]:disabled:checked::after {
@@ -2838,15 +2840,14 @@
 .ids-radio input[aria-invalid=true]:not(:checked),
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked) {
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
-  box-shadow: inset 0 0 0 0.0625rem var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
 .ids-radio input[aria-invalid=true]:not(:checked)::after,
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked)::after {
-  border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
+  width: 1rem;
+  height: 1rem;
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  top: 0;
-  left: 0;
+  border: 0.125rem solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR) !important;
 }
 .ids-radio.ids-radio--compact {
   margin: 0 !important;
@@ -2911,10 +2912,35 @@ input:focus + .ids-checkbox input::before {
   background-size: 1em 1em;
   background-repeat: no-repeat;
 }
+.ids-checkbox input[type=checkbox]:indeterminate::after,
+.ids-checkbox input:indeterminate::after {
+  content: "";
+  display: inline-block;
+  background-image: var(--IDS-CHECKBOX__INDETERMINATE-BACKGROUND-IMAGE);
+  min-height: 1.25rem;
+  min-width: 1.25rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background-position: center center;
+  background-size: 1em 1em;
+  background-repeat: no-repeat;
+  /*  content: "—";
+   font-size: 1rem;
+   line-height: 1rem;
+   font-weight: 700;
+   color: var(--IDS-CHECKBOX__INDETERMINATE-COLOR);
+   display: inline-block;
+   position: absolute;
+   top: 0.0313rem;
+   left: 0.125rem;
+   cursor: pointer; */
+}
 .ids-checkbox input[type=checkbox]:disabled::before,
 .ids-checkbox input:disabled::before {
   cursor: default;
-  border: var(--IDS-FORM--DISABLED__BORDER);
+  border: var(--IDS-FORM--DISABLED__BORDER) !important;
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
 }
 .ids-checkbox input[type=checkbox]:disabled:after,
@@ -2959,6 +2985,105 @@ input:focus + .ids-checkbox input::before {
   margin-bottom: -0.125rem !important;
 }
+.ids-check-button {
+  position: relative;
+  display: inline-flex;
+  padding: 0.25rem 0.75rem;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: var(--IDS-CHECK-BUTTON__BORDER-RADIUS);
+  border: 0.0625rem solid var(--IDS-CHECK-BUTTON__BORDER-COLOR);
+  background-color: var(--IDS-CHECK-BUTTON__BACKGROUND-COLOR);
+  cursor: pointer;
+}
+.ids-check-button .ids-check-button__label {
+  cursor: pointer;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  text-align: center;
+  color: var(--IDS-CHECK-BUTTON__COLOR);
+  font-size: var(--IDS-CHECK-BUTTON__FONT-SIZE);
+  line-height: 1.25rem;
+  font-weight: 400;
+  margin: 0;
+}
+.ids-check-button .ids-check-button__input[type=checkbox],
+.ids-check-button .ids-check-button__input {
+  border-radius: var(--IDS-CHECK-BUTTON__BORDER-RADIUS);
+  cursor: pointer;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  appearance: none;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:checked + .ids-check-button__label {
+  padding-left: 1.75rem;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
+.ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
+  content: "";
+  display: inline-block;
+  background-image: var(--IDS-CHECK-BUTTON--CHECKED__BACKGROUND-IMAGE);
+  min-height: 1.25rem;
+  min-width: 1.25rem;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.75rem;
+  cursor: pointer;
+  background-position: center center;
+  background-size: 0.875rem 0.875rem;
+  background-repeat: no-repeat;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled,
+.ids-check-button .ids-check-button__input:disabled {
+  cursor: default;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled::before,
+.ids-check-button .ids-check-button__input:disabled::before {
+  cursor: default;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled:checked + .ids-check-button__label::before,
+.ids-check-button .ids-check-button__input:disabled:checked + .ids-check-button__label::before {
+  cursor: default;
+  background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:focus + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:focus + .ids-check-button__label {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:disabled + .ids-check-button__label {
+  cursor: default;
+  font-style: normal;
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:disabled) {
+  cursor: default;
+  border-color: var(--IDS-CHECK-BUTTON--DISABLED__BORDER-COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:checked:not(:disabled)) {
+  background-color: var(--IDS-CHECK-BUTTON--CHECKED__BACKGROUND-COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
+  color: var(--IDS-CHECK-BUTTON--CHECKED__COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:focus) {
+  background-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)), .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) {
+  background-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+  border-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label::before, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label::before {
+  background-image: var(--IDS-CHECK-BUTTON--FOCUS__BACKGROUND-IMAGE);
+}
 .ids-input-wrapper {
   position: relative;
   display: flex;
@@ -3489,7 +3614,7 @@ input:focus + .ids-toggle input:before {
   background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
   background-image: var(--IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE);
 }
-@media (max-width: 300px) {
+@media (max-width: 18.75rem) {
   .ids-toggle {
     flex-wrap: wrap;
   }

package/package.json CHANGED Viewed

@@ -1,26 +1,9 @@
-{
-  "name": "@inera/ids-design",
-  "version": "5.4.0",
-  "description": "",
-  "main": "index.js",
-  "type": "module",
-  "scripts": {
-    "build": "rimraf dist && npm run build-tailwind && rollup -c",
-    "build-tailwind": "npx tailwindcss -i ./tailwind/util-tailwind.scss -o ./src/global/util/util.scss",
-    "pack": "rimraf dist && rollup -c && cd dist && npm pack"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "lit": "^3.2.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^2.79.1",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-generate-package-json": "^3.2.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.77.8",
-    "tailwindcss": "^3.4.10",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4"
-  }
-}
+{
+  "type": "module",
+  "name": "@inera/ids-design",
+  "version": "5.5.0",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/{dist/themes → themes}/1177/1177.css RENAMED Viewed

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @media (max-width: 1023px) {
   .ids-desktop {
     display: none !important;
@@ -2828,6 +2829,7 @@ body.ids {
   width: 1.25rem;
   height: 1.25rem;
   color: var(--IDS-COLOR-ACCENT-40);
+  box-sizing: border-box;
   border: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   border-radius: 50%;
@@ -2866,9 +2868,11 @@ body.ids {
   cursor: pointer;
   width: 1.125rem;
   height: 1.125rem;
+  box-sizing: border-box;
   border-radius: 50%;
-  top: 0;
-  left: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
 }
@@ -2888,8 +2892,6 @@ body.ids {
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-  top: 0;
-  left: 0;
 }
 .ids-radio input:disabled:checked::after,
 .ids-radio input[type=radio]:disabled:checked::after {
@@ -2899,15 +2901,14 @@ body.ids {
 .ids-radio input[aria-invalid=true]:not(:checked),
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked) {
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
-  box-shadow: inset 0 0 0 0.0625rem var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
 .ids-radio input[aria-invalid=true]:not(:checked)::after,
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked)::after {
-  border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
+  width: 1rem;
+  height: 1rem;
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  top: 0;
-  left: 0;
+  border: 0.125rem solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR) !important;
 }
 .ids-radio.ids-radio--compact {
   margin: 0 !important;
@@ -2972,10 +2973,35 @@ input:focus + .ids-checkbox input::before {
   background-size: 1em 1em;
   background-repeat: no-repeat;
 }
+.ids-checkbox input[type=checkbox]:indeterminate::after,
+.ids-checkbox input:indeterminate::after {
+  content: "";
+  display: inline-block;
+  background-image: var(--IDS-CHECKBOX__INDETERMINATE-BACKGROUND-IMAGE);
+  min-height: 1.25rem;
+  min-width: 1.25rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background-position: center center;
+  background-size: 1em 1em;
+  background-repeat: no-repeat;
+  /*  content: "—";
+   font-size: 1rem;
+   line-height: 1rem;
+   font-weight: 700;
+   color: var(--IDS-CHECKBOX__INDETERMINATE-COLOR);
+   display: inline-block;
+   position: absolute;
+   top: 0.0313rem;
+   left: 0.125rem;
+   cursor: pointer; */
+}
 .ids-checkbox input[type=checkbox]:disabled::before,
 .ids-checkbox input:disabled::before {
   cursor: default;
-  border: var(--IDS-FORM--DISABLED__BORDER);
+  border: var(--IDS-FORM--DISABLED__BORDER) !important;
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
 }
 .ids-checkbox input[type=checkbox]:disabled:after,
@@ -3020,6 +3046,105 @@ input:focus + .ids-checkbox input::before {
   margin-bottom: -0.125rem !important;
 }
+.ids-check-button {
+  position: relative;
+  display: inline-flex;
+  padding: 0.25rem 0.75rem;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: var(--IDS-CHECK-BUTTON__BORDER-RADIUS);
+  border: 0.0625rem solid var(--IDS-CHECK-BUTTON__BORDER-COLOR);
+  background-color: var(--IDS-CHECK-BUTTON__BACKGROUND-COLOR);
+  cursor: pointer;
+}
+.ids-check-button .ids-check-button__label {
+  cursor: pointer;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  text-align: center;
+  color: var(--IDS-CHECK-BUTTON__COLOR);
+  font-size: var(--IDS-CHECK-BUTTON__FONT-SIZE);
+  line-height: 1.25rem;
+  font-weight: 400;
+  margin: 0;
+}
+.ids-check-button .ids-check-button__input[type=checkbox],
+.ids-check-button .ids-check-button__input {
+  border-radius: var(--IDS-CHECK-BUTTON__BORDER-RADIUS);
+  cursor: pointer;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  appearance: none;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:checked + .ids-check-button__label {
+  padding-left: 1.75rem;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
+.ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
+  content: "";
+  display: inline-block;
+  background-image: var(--IDS-CHECK-BUTTON--CHECKED__BACKGROUND-IMAGE);
+  min-height: 1.25rem;
+  min-width: 1.25rem;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.75rem;
+  cursor: pointer;
+  background-position: center center;
+  background-size: 0.875rem 0.875rem;
+  background-repeat: no-repeat;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled,
+.ids-check-button .ids-check-button__input:disabled {
+  cursor: default;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled::before,
+.ids-check-button .ids-check-button__input:disabled::before {
+  cursor: default;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled:checked + .ids-check-button__label::before,
+.ids-check-button .ids-check-button__input:disabled:checked + .ids-check-button__label::before {
+  cursor: default;
+  background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:focus + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:focus + .ids-check-button__label {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled + .ids-check-button__label,
+.ids-check-button .ids-check-button__input:disabled + .ids-check-button__label {
+  cursor: default;
+  font-style: normal;
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:disabled) {
+  cursor: default;
+  border-color: var(--IDS-CHECK-BUTTON--DISABLED__BORDER-COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:checked:not(:disabled)) {
+  background-color: var(--IDS-CHECK-BUTTON--CHECKED__BACKGROUND-COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
+  color: var(--IDS-CHECK-BUTTON--CHECKED__COLOR);
+}
+.ids-check-button:has(.ids-check-button__input:focus) {
+  background-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)), .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) {
+  background-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+  border-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label::before, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label::before {
+  background-image: var(--IDS-CHECK-BUTTON--FOCUS__BACKGROUND-IMAGE);
+}
 .ids-input-wrapper {
   position: relative;
   display: flex;
@@ -3550,7 +3675,7 @@ input:focus + .ids-toggle input:before {
   background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
   background-image: var(--IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE);
 }
-@media (max-width: 300px) {
+@media (max-width: 18.75rem) {
   .ids-toggle {
     flex-wrap: wrap;
   }
@@ -4139,13 +4264,24 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-ERROR-MESSAGE__BORDER: 0.063rem solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
   --IDS-ERROR-MESSAGE__PADDING: 0.813rem 1.25rem;
   --IDS-ERROR-MESSAGE__ICON-BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="100%" height="100%" style="" viewBox="0 0 40 40" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.5134 12.7567C22.5134 12.7889 22.5129 12.821 22.5118 12.8529C22.5129 12.8828 22.5134 12.913 22.5134 12.9436C22.5134 13.1581 22.4809 13.4575 22.4158 13.8419L20.3119 24.2492C20.2585 24.5129 20.0268 24.7025 19.7577 24.7025C19.4877 24.7025 19.2554 24.5117 19.2031 24.2468L17.1463 13.8419C17.0857 13.5476 17.0439 13.2999 17.021 13.0987C17.007 12.976 17 12.8707 17 12.7827L17 12.7713L17 12.7567C17 11.2342 18.2342 10 19.7567 10C21.2792 10 22.5134 11.2342 22.5134 12.7567ZM21.0564 29.572C20.6977 29.9324 20.2644 30.1126 19.7567 30.1126C19.2489 30.1126 18.8157 29.9324 18.457 29.572C18.0982 29.2117 17.9189 28.7765 17.9189 28.2664C17.9189 27.7675 18.0982 27.3378 18.457 26.9775C18.8157 26.6171 19.2489 26.4369 19.7567 26.4369C20.2644 26.4369 20.6977 26.6171 21.0564 26.9775C21.4151 27.3378 21.5945 27.7675 21.5945 28.2664C21.5945 28.7765 21.4151 29.2117 21.0564 29.572Z" fill="%236a0032"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M39.2886 18.5C39.8245 19.4282 39.8245 20.5718 39.2886 21.5L30.9433 35.9545C30.4074 36.8827 29.417 37.4545 28.3452 37.4545H11.6546C10.5828 37.4545 9.59245 36.8827 9.05655 35.9545L0.711251 21.5C0.175351 20.5718 0.175351 19.4282 0.711251 18.5L9.05655 4.04553C9.59245 3.11733 10.5828 2.54553 11.6546 2.54553L28.3452 2.54553C29.417 2.54553 30.4074 3.11733 30.9433 4.04553L39.2886 18.5ZM37.5565 20.5C37.7352 20.1906 37.7352 19.8094 37.5565 19.5L29.2112 5.04553C29.0326 4.73613 28.7025 4.54553 28.3452 4.54553L11.6546 4.54553C11.2974 4.54553 10.9672 4.73613 10.7886 5.04553L2.4433 19.5C2.26467 19.8094 2.26467 20.1906 2.4433 20.5L10.7886 34.9545C10.9672 35.2639 11.2974 35.4545 11.6546 35.4545H28.3452C28.7025 35.4545 29.0326 35.2639 29.2112 34.9545L37.5565 20.5Z" fill="%23c12143"></path></svg>');
+  /* Check button*/
+  --IDS-CHECK-BUTTON__BORDER-RADIUS: 1.875rem;
+  --IDS-CHECK-BUTTON__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-CHECK-BUTTON__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-CHECK-BUTTON__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CHECK-BUTTON__FONT-SIZE: 0.875rem;
+  --IDS-CHECK-BUTTON--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-CHECK-BUTTON--CHECKED__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-CHECK-BUTTON--DISABLED__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-CHECK-BUTTON--CHECKED__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="%23FFFFFF"></path></svg>');
+  --IDS-CHECK-BUTTON--FOCUS__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="%23FFFFFF"></path></svg>');
   /* Checkbox */
   --IDS-CHECKBOX__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
   --IDS-CHECKBOX__BORDER-RADIUS: 0.25rem;
   --IDS-CHECKBOX__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
-  --IDS-CHECKBOX__CHECK-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="%23396291"></path></svg>');
-  --IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23c12143' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
-  --IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23808285' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
+  --IDS-CHECKBOX__INDETERMINATE-BACKGROUND-IMAGE: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 19.5C0 18.1193 1.14799 17 2.5641 17H37.4359C38.852 17 40 18.1193 40 19.5C40 20.8807 38.852 22 37.4359 22H2.5641C1.14799 22 0 20.8807 0 19.5Z' fill='%233b4266'/%3E%3C/svg%3E");
+  --IDS-CHECKBOX__CHECK-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="%233b4266"></path></svg>');
   --IDS-CHECKBOX--INVALID__CHECK-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="%23c12143"></path></svg>');
   --IDS-CHECKBOX--DISABLED__CHECK-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="%23808285"></path></svg>');
   /* Input */
@@ -4175,10 +4311,10 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
   /* Select */
   --IDS-SELECT__LINE-HEIGHT: 2.875rem;
-  --IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23396291"></path></g></svg>');
-  --IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="rgb(59,66,102)"></path></g></svg>');
-  --IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23c12143"></path></g></svg>');
-  --IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23808285"></path></g></svg>');
+  --IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.5rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23396291"></path></g></svg>');
+  --IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.5rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="rgb(59,66,102)"></path></g></svg>');
+  --IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.5rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23c12143"></path></g></svg>');
+  --IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.5rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23808285"></path></g></svg>');
   /* Select multiple */
   --IDS-SELECT-MULTIPLE__DROPDOWN-BORDER-RADIUS: 0.625rem;
   /* Textarea */
@@ -4351,6 +4487,8 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-CAROUSEL-ICON__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
   /* Data Table */
   --IDS-DATA-TABLE__BORDER-RADIUS: 0.625rem 0.625rem 0.313rem 0.313rem;
+  --IDS-DATA-TABLE__BORDER-TOP-RADIUS: 0.625rem;
+  --IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS: 0.313rem;
   --IDS-DATA-TABLE__HEAD-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
   --IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR: var(--IDS-COLOR-ACCENT-95);
   --IDS-DATA-TABLE__CELL-BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
@@ -4458,8 +4596,6 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-ICON__COLOR-PRESET-4-2: var(--IDS-COLOR-NEUTRAL-100);
   /* Link */
   --IDS-LINK__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
-  --IDS-LINK__COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-LINK__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
   --IDS-LINK--COLORPRESET-1__COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-LINK--COLORPRESET-1__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
   --IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
@@ -4472,6 +4608,8 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-LINK--COLORPRESET-3__HOVER-COLOR: black;
   --IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR: black;
   --IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-LINK--BOX__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-LINK--BOX__BOX-SHADOW: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
   /* List */
   --IDS-LIST__HEADING-COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-LIST__BORDER: var(--IDS-COLOR-NEUTRAL-90);