@inera/ids-design 8.1.0 → 8.2.0

package/global/global.css

@@ -121,6 +121,7 @@
   box-sizing: border-box;
   width: 1em;
   height: 1em;
+  flex-shrink: 0;
 }
 [class^=ids-icon-]:before,
 [class*=" ids-icon-"]:before {
@@ -4478,6 +4479,7 @@ button.ids-button:not(.ids-button--fab) {
   justify-content: center;
   align-items: center;
   width: fit-content;
+  vertical-align: bottom;
   flex-shrink: 0;
   text-transform: uppercase;
   user-select: none;
@@ -4514,7 +4516,7 @@ button.ids-button:not(.ids-button--fab):focus-visible {
 button.ids-button:not(.ids-button--fab).ids-button--disabled,
 button.ids-button:not(.ids-button--fab)[disabled] {
   color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR);
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR) !important;
   background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
   pointer-events: none;
 }
@@ -4580,7 +4582,7 @@ button.ids-button:not(.ids-button--fab).ids-button--secondary:focus-visible {
 button.ids-button:not(.ids-button--fab).ids-button--secondary.ids-button--disabled,
 button.ids-button:not(.ids-button--fab).ids-button--secondary[disabled] {
   color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR);
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR) !important;
   background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
   pointer-events: none;
 }
@@ -4617,8 +4619,8 @@ button.ids-button:not(.ids-button--fab).ids-button--tertiary:focus-visible {
 button.ids-button:not(.ids-button--fab).ids-button--tertiary.ids-button--disabled,
 button.ids-button:not(.ids-button--fab).ids-button--tertiary[disabled] {
   color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid transparent;
-  background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid transparent !important;
+  background-color: transparent !important;
   pointer-events: none;
 }
 .ids-button:not(.ids-button--fab).ids-button--icon,
@@ -4660,7 +4662,7 @@ button.ids-button:not(.ids-button--fab).ids-button--icon:focus-visible {
 button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--disabled,
 button.ids-button:not(.ids-button--fab).ids-button--icon[disabled] {
   color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR);
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR) !important;
   background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
   pointer-events: none;
 }
@@ -4687,7 +4689,7 @@ button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary:fo
 button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary.ids-button--disabled,
 button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary[disabled] {
   color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid transparent;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid transparent !important;
   background-color: transparent !important;
   pointer-events: none;
 }
@@ -5057,12 +5059,6 @@ button.ids-button:not(.ids-button--fab).ids-button--submit.ids-button--s {
   top: -0.1875rem;
 }
 
-input::placeholder,
-textarea::placeholder,
-select::placeholder {
-  color: var(--IDS-FORM-PLACEHOLDER__COLOR);
-}
-
 .ids-input {
   position: relative;
   display: flex;
@@ -5150,9 +5146,12 @@ select::placeholder {
   border: var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS);
   font-size: 1rem;
-  color: var(--IDS-INPUT__COLOR);
+  color: var(--IDS-FORM__COLOR);
   display: block;
 }
+.ids-input__input::placeholder {
+  color: var(--IDS-FORM__COLOR);
+}
 .ids-input__input:hover {
   background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
 }
@@ -5164,13 +5163,16 @@ select::placeholder {
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
 }
-.ids-input__input:disabled, .ids-input__input[readonly] {
+.ids-input__input:disabled, .ids-input__input[readonly], .ids-input__input[readonly]:focus-visible, .ids-input__input[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+.ids-input__input:disabled::placeholder, .ids-input__input[readonly]::placeholder, .ids-input__input[readonly]:focus-visible::placeholder, .ids-input__input[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 .ids-input__input.ids-input--invalid, .ids-input__input[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -5188,14 +5190,17 @@ select::placeholder {
 .ids-input__input.ids-input--light:focus-visible, .ids-input__input.ids-input--light:focus-visible:hover {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
-.ids-input__input.ids-input--light:disabled, .ids-input__input.ids-input--light[readonly] {
+.ids-input__input.ids-input--light:disabled, .ids-input__input.ids-input--light[readonly], .ids-input__input.ids-input--light[readonly]:focus-visible, .ids-input__input.ids-input--light[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
-.ids-input__input.ids-input--light.ids-input--invalid {
+.ids-input__input.ids-input--light:disabled::placeholder, .ids-input__input.ids-input--light[readonly]::placeholder, .ids-input__input.ids-input--light[readonly]:focus-visible::placeholder, .ids-input__input.ids-input--light[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-input__input.ids-input--light.ids-input--invalid, .ids-input__input.ids-input--light[aria-invalid=true] {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 .ids-input__input:focus-visible {
@@ -5257,9 +5262,13 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   border: var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS);
   font-size: 1rem;
-  color: var(--IDS-INPUT__COLOR);
+  color: var(--IDS-FORM__COLOR);
   display: block;
 }
+.ids-textarea textarea::placeholder,
+.ids-textarea .ids-textarea__textarea::placeholder {
+  color: var(--IDS-FORM__COLOR);
+}
 .ids-textarea textarea:hover,
 .ids-textarea .ids-textarea__textarea:hover {
   background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
@@ -5275,15 +5284,24 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
 }
-.ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
+.ids-textarea textarea:disabled, .ids-textarea textarea[readonly], .ids-textarea textarea[readonly]:focus-visible, .ids-textarea textarea[readonly]:focus-visible:hover,
 .ids-textarea .ids-textarea__textarea:disabled,
-.ids-textarea .ids-textarea__textarea[readonly] {
+.ids-textarea .ids-textarea__textarea[readonly],
+.ids-textarea .ids-textarea__textarea[readonly]:focus-visible,
+.ids-textarea .ids-textarea__textarea[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+.ids-textarea textarea:disabled::placeholder, .ids-textarea textarea[readonly]::placeholder, .ids-textarea textarea[readonly]:focus-visible::placeholder, .ids-textarea textarea[readonly]:focus-visible:hover::placeholder,
+.ids-textarea .ids-textarea__textarea:disabled::placeholder,
+.ids-textarea .ids-textarea__textarea[readonly]::placeholder,
+.ids-textarea .ids-textarea__textarea[readonly]:focus-visible::placeholder,
+.ids-textarea .ids-textarea__textarea[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 .ids-textarea textarea.ids-input--invalid, .ids-textarea textarea[aria-invalid=true],
 .ids-textarea .ids-textarea__textarea.ids-input--invalid,
 .ids-textarea .ids-textarea__textarea[aria-invalid=true] {
@@ -5308,17 +5326,27 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-textarea .ids-textarea__textarea.ids-input--light:focus-visible:hover {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
-.ids-textarea textarea.ids-input--light:disabled, .ids-textarea textarea.ids-input--light[readonly],
+.ids-textarea textarea.ids-input--light:disabled, .ids-textarea textarea.ids-input--light[readonly], .ids-textarea textarea.ids-input--light[readonly]:focus-visible, .ids-textarea textarea.ids-input--light[readonly]:focus-visible:hover,
 .ids-textarea .ids-textarea__textarea.ids-input--light:disabled,
-.ids-textarea .ids-textarea__textarea.ids-input--light[readonly] {
+.ids-textarea .ids-textarea__textarea.ids-input--light[readonly],
+.ids-textarea .ids-textarea__textarea.ids-input--light[readonly]:focus-visible,
+.ids-textarea .ids-textarea__textarea.ids-input--light[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
-.ids-textarea textarea.ids-input--light.ids-input--invalid,
-.ids-textarea .ids-textarea__textarea.ids-input--light.ids-input--invalid {
+.ids-textarea textarea.ids-input--light:disabled::placeholder, .ids-textarea textarea.ids-input--light[readonly]::placeholder, .ids-textarea textarea.ids-input--light[readonly]:focus-visible::placeholder, .ids-textarea textarea.ids-input--light[readonly]:focus-visible:hover::placeholder,
+.ids-textarea .ids-textarea__textarea.ids-input--light:disabled::placeholder,
+.ids-textarea .ids-textarea__textarea.ids-input--light[readonly]::placeholder,
+.ids-textarea .ids-textarea__textarea.ids-input--light[readonly]:focus-visible::placeholder,
+.ids-textarea .ids-textarea__textarea.ids-input--light[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-textarea textarea.ids-input--light.ids-input--invalid, .ids-textarea textarea.ids-input--light[aria-invalid=true],
+.ids-textarea .ids-textarea__textarea.ids-input--light.ids-input--invalid,
+.ids-textarea .ids-textarea__textarea.ids-input--light[aria-invalid=true] {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 .ids-textarea textarea::-webkit-scrollbar,
@@ -5682,15 +5710,13 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-radio input[type=radio]:active:after {
   background-color: var(--IDS-RADIO__ACTIVE-BACKGROUND-COLOR);
 }
-.ids-radio input:checked:after, .ids-radio input[checked]:after,
-.ids-radio input[type=radio]:checked:after,
-.ids-radio input[type=radio][checked]:after {
+.ids-radio input:checked:after,
+.ids-radio input[type=radio]:checked:after {
   border-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
 }
-.ids-radio input:checked:hover:after, .ids-radio input[checked]:hover:after,
-.ids-radio input[type=radio]:checked:hover:after,
-.ids-radio input[type=radio][checked]:hover:after {
+.ids-radio input:checked:hover:after,
+.ids-radio input[type=radio]:checked:hover:after {
   border-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__HOVER-BACKGROUND-COLOR);
 }
@@ -5823,7 +5849,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   letter-spacing: 0;
   color: var(--IDS-FORM-LABEL__COLOR);
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.5rem;
   margin-bottom: 0.625rem;
 }
@@ -5915,6 +5941,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   pointer-events: none;
   font-style: normal;
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  color: var(--IDS-FORM--DISABLED__COLOR);
 }
 .ids-radio-button:has(.ids-radio-button__input:disabled) {
   pointer-events: none;
@@ -5982,8 +6009,18 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   display: block;
 }
 .ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick {
+  font-style: normal;
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-family: var(--ids-font-family-body-text);
+  font-size: var(--ids-font-size-body-text);
+  line-height: var(--ids-line-height-body-text);
+  font-weight: var(--ids-font-weight-body-text);
+  letter-spacing: 0;
   font-style: italic;
 }
+.ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick:before {
+  background-color: var(--IDS-FORM--DISABLED__COLOR);
+}
 
 .ids-range__input,
 input[type=range] {
@@ -6068,7 +6105,7 @@ input[type=range]::-ms-thumb:active {
 .ids-range__input:disabled,
 input[type=range]:disabled {
   cursor: default;
-  border: 0.0625rem dashed var(--IDS-RANGE--DISABLED__BORDER-COLOR);
+  border: 0.0625rem solid var(--IDS-RANGE--DISABLED__BORDER-COLOR);
   background-color: transparent;
   background-image: linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));
 }
@@ -6098,9 +6135,12 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS);
   font-size: 1rem;
-  color: var(--IDS-INPUT__COLOR);
+  color: var(--IDS-FORM__COLOR);
   display: block;
 }
+.ids-select__select::placeholder {
+  color: var(--IDS-FORM__COLOR);
+}
 .ids-select__select:hover {
   background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
 }
@@ -6112,13 +6152,16 @@ input[type=range]:disabled::-ms-thumb {
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
 }
-.ids-select__select:disabled, .ids-select__select[readonly] {
+.ids-select__select:disabled, .ids-select__select[readonly], .ids-select__select[readonly]:focus-visible, .ids-select__select[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+.ids-select__select:disabled::placeholder, .ids-select__select[readonly]::placeholder, .ids-select__select[readonly]:focus-visible::placeholder, .ids-select__select[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 .ids-select__select.ids-input--invalid, .ids-select__select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -6136,14 +6179,17 @@ input[type=range]:disabled::-ms-thumb {
 .ids-select__select.ids-input--light:focus-visible, .ids-select__select.ids-input--light:focus-visible:hover {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
-.ids-select__select.ids-input--light:disabled, .ids-select__select.ids-input--light[readonly] {
+.ids-select__select.ids-input--light:disabled, .ids-select__select.ids-input--light[readonly], .ids-select__select.ids-input--light[readonly]:focus-visible, .ids-select__select.ids-input--light[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
-.ids-select__select.ids-input--light.ids-input--invalid {
+.ids-select__select.ids-input--light:disabled::placeholder, .ids-select__select.ids-input--light[readonly]::placeholder, .ids-select__select.ids-input--light[readonly]:focus-visible::placeholder, .ids-select__select.ids-input--light[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-select__select.ids-input--light.ids-input--invalid, .ids-select__select.ids-input--light[aria-invalid=true] {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 .ids-select__select:focus-visible {
@@ -6162,6 +6208,9 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);
   width: 100% !important;
 }
+.ids-select__select::placeholder {
+  color: var(--IDS-FORM__COLOR);
+}
 .ids-select__select.ids-input--invalid, .ids-select__select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -6180,9 +6229,15 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+.ids-select__select[aria-disabled=true]::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 .ids-select__select:disabled {
   cursor: default;
 }
+.ids-select__select:disabled::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 .ids-select__select:disabled.ids-input--light {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -6191,6 +6246,9 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+.ids-select__select:disabled.ids-input--light::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 
 .ids-select__wrapper {
   position: relative;
@@ -6209,7 +6267,7 @@ input[type=range]:disabled::-ms-thumb {
   top: 50%;
   transform: translateY(-50%);
   right: var(--IDS-INPUT__ICON-RIGHT);
-  z-index: 20;
+  z-index: 2;
 }
 .ids-select__wrapper:has(select:disabled)::after, .ids-select__wrapper:has(select[aria-disabled=true])::after {
   color: var(--IDS-FORM--DISABLED__COLOR) !important;
@@ -6225,9 +6283,12 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS);
   font-size: 1rem;
-  color: var(--IDS-INPUT__COLOR);
+  color: var(--IDS-FORM__COLOR);
   display: block;
 }
+.ids-select-multiple__select::placeholder {
+  color: var(--IDS-FORM__COLOR);
+}
 .ids-select-multiple__select:hover {
   background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
 }
@@ -6239,13 +6300,16 @@ input[type=range]:disabled::-ms-thumb {
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
 }
-.ids-select-multiple__select:disabled, .ids-select-multiple__select[readonly] {
+.ids-select-multiple__select:disabled, .ids-select-multiple__select[readonly], .ids-select-multiple__select[readonly]:focus-visible, .ids-select-multiple__select[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+.ids-select-multiple__select:disabled::placeholder, .ids-select-multiple__select[readonly]::placeholder, .ids-select-multiple__select[readonly]:focus-visible::placeholder, .ids-select-multiple__select[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 .ids-select-multiple__select.ids-input--invalid, .ids-select-multiple__select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -6263,14 +6327,17 @@ input[type=range]:disabled::-ms-thumb {
 .ids-select-multiple__select.ids-input--light:focus-visible, .ids-select-multiple__select.ids-input--light:focus-visible:hover {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
-.ids-select-multiple__select.ids-input--light:disabled, .ids-select-multiple__select.ids-input--light[readonly] {
+.ids-select-multiple__select.ids-input--light:disabled, .ids-select-multiple__select.ids-input--light[readonly], .ids-select-multiple__select.ids-input--light[readonly]:focus-visible, .ids-select-multiple__select.ids-input--light[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
-.ids-select-multiple__select.ids-input--light.ids-input--invalid {
+.ids-select-multiple__select.ids-input--light:disabled::placeholder, .ids-select-multiple__select.ids-input--light[readonly]::placeholder, .ids-select-multiple__select.ids-input--light[readonly]:focus-visible::placeholder, .ids-select-multiple__select.ids-input--light[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-select-multiple__select.ids-input--light.ids-input--invalid, .ids-select-multiple__select.ids-input--light[aria-invalid=true] {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 .ids-select-multiple__select:focus-visible {
@@ -6289,6 +6356,9 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);
   width: 100% !important;
 }
+.ids-select-multiple__select::placeholder {
+  color: var(--IDS-FORM__COLOR);
+}
 .ids-select-multiple__select.ids-input--invalid, .ids-select-multiple__select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -6307,9 +6377,15 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+.ids-select-multiple__select[aria-disabled=true]::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 .ids-select-multiple__select:disabled {
   cursor: default;
 }
+.ids-select-multiple__select:disabled::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 .ids-select-multiple__select:disabled.ids-input--light {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -6318,6 +6394,9 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+.ids-select-multiple__select:disabled.ids-input--light::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 
 .ids-select-multiple__select-wrapper {
   position: relative;
@@ -6336,7 +6415,7 @@ input[type=range]:disabled::-ms-thumb {
   top: 50%;
   transform: translateY(-50%);
   right: var(--IDS-INPUT__ICON-RIGHT);
-  z-index: 20;
+  z-index: 2;
 }
 .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);
@@ -6355,7 +6434,7 @@ input[type=range]:disabled::-ms-thumb {
   color: var(--IDS-FONT-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS);
   position: absolute;
-  z-index: 10;
+  z-index: 3;
   left: 0;
   right: 0;
   display: none;
@@ -6396,6 +6475,9 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+:host([disabled]) input::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 
 .ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper {
   display: inline-flex;
@@ -6553,6 +6635,7 @@ input[type=range]:disabled::-ms-thumb {
   -moz-osx-font-smoothing: grayscale;
   content: "\e913";
   font-size: 1.25rem;
+  line-height: 1.5rem;
   color: var(--IDS-ERROR-MESSAGE__COLOR);
   left: 0;
   top: 0;
@@ -6601,9 +6684,12 @@ input.ids-time__input {
   border: var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS);
   font-size: 1rem;
-  color: var(--IDS-INPUT__COLOR);
+  color: var(--IDS-FORM__COLOR);
   display: block;
 }
+input.ids-time__input::placeholder {
+  color: var(--IDS-FORM__COLOR);
+}
 input.ids-time__input:hover {
   background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
 }
@@ -6615,13 +6701,16 @@ input.ids-time__input:focus-visible, input.ids-time__input:focus-visible:hover {
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
 }
-input.ids-time__input:disabled, input.ids-time__input[readonly] {
+input.ids-time__input:disabled, input.ids-time__input[readonly], input.ids-time__input[readonly]:focus-visible, input.ids-time__input[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
+input.ids-time__input:disabled::placeholder, input.ids-time__input[readonly]::placeholder, input.ids-time__input[readonly]:focus-visible::placeholder, input.ids-time__input[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
 input.ids-time__input.ids-input--invalid, input.ids-time__input[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -6639,14 +6728,17 @@ input.ids-time__input.ids-input--light:active {
 input.ids-time__input.ids-input--light:focus-visible, input.ids-time__input.ids-input--light:focus-visible:hover {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
-input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input--light[readonly] {
+input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input--light[readonly], input.ids-time__input.ids-input--light[readonly]:focus-visible, input.ids-time__input.ids-input--light[readonly]:focus-visible:hover {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
-input.ids-time__input.ids-input--light.ids-input--invalid {
+input.ids-time__input.ids-input--light:disabled::placeholder, input.ids-time__input.ids-input--light[readonly]::placeholder, input.ids-time__input.ids-input--light[readonly]:focus-visible::placeholder, input.ids-time__input.ids-input--light[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+input.ids-time__input.ids-input--light.ids-input--invalid, input.ids-time__input.ids-input--light[aria-invalid=true] {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 input.ids-time__input {
@@ -6668,7 +6760,7 @@ input.ids-time__input:disabled {
 
 .ids-toggle {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
   margin-bottom: 0.25rem;
@@ -6680,14 +6772,21 @@ input.ids-time__input:disabled {
   align-items: center;
   justify-content: flex-start;
   margin-bottom: 0;
+  bottom: -0.25rem;
 }
 .ids-toggle .ids-label-tooltip-wrapper {
   position: relative;
-  top: 0.375rem;
+  min-height: 1.875rem;
+  align-items: center;
 }
 .ids-toggle .ids-label-tooltip-wrapper label {
-  top: -0.25rem;
-  margin-right: 0.5rem;
+  top: 0;
+}
+.ids-toggle .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--inline {
+  display: inline-flex;
+}
+.ids-toggle .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--inline label {
+  margin-right: 0;
 }
 .ids-toggle input[type=checkbox],
 .ids-toggle input {

package/package.json

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