@inera/ids-design 7.1.1 → 7.1.3

package/components/tag/tag-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-tag{background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:.063rem solid var(--IDS-TAG__BORDER-COLOR);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);display:inline-block;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;height:max-content;line-height:1rem!important;padding:var(--IDS-TAG__PADDING)}.ids-tag .ids-tag__content{display:flex;flex-direction:row;gap:.5rem;justify-content:space-between}.ids-tag.ids-tag--clickable{border-color:var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);color:var(--IDS-TAG--INTERACTIVE__COLOR);cursor:pointer;font-weight:var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT)}.ids-tag.ids-tag--clickable:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--clickable:hover{color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable ::slotted(button){background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn{background:none;border:none;border-radius:100%;color:inherit;cursor:pointer;font:inherit;height:.875rem;margin:-.25rem -.25rem -.5rem 0;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:.875rem}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON__COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-tag .ids-tag__close-btn:active,.ids-tag .ids-tag__close-btn:focus,.ids-tag .ids-tag__close-btn:hover{border-radius:100%}.ids-tag .ids-tag__close-btn:active:before,.ids-tag .ids-tag__close-btn:focus:before,.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}";
+var css_248z = ".ids-tag{background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:.063rem solid var(--IDS-TAG__BORDER-COLOR);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);display:inline-block;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;height:max-content;line-height:1rem!important;padding:var(--IDS-TAG__PADDING)}.ids-tag .ids-tag__content{display:flex;flex-direction:row;gap:.5rem;justify-content:space-between}.ids-tag.ids-tag--clickable{border-color:var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);color:var(--IDS-TAG--INTERACTIVE__COLOR);cursor:pointer;font-weight:var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT)}.ids-tag.ids-tag--clickable:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--clickable:hover{color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable ::slotted(button){background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn{background:none;border:none;color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn{border-radius:100%;height:.875rem;margin:-.25rem -.25rem -.5rem 0;position:relative;width:.875rem}.ids-tag .ids-tag__close-btn:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON__COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-tag .ids-tag__close-btn:active,.ids-tag .ids-tag__close-btn:focus,.ids-tag .ids-tag__close-btn:hover{border-radius:100%}.ids-tag .ids-tag__close-btn:active:before,.ids-tag .ids-tag__close-btn:focus:before,.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}";
 
 var tagLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tag/tag.css

@@ -77,16 +77,18 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
+}
+.ids-tag .ids-tag__close-btn:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-tag .ids-tag__close-btn {
   border-radius: 100%;
   margin: -0.25rem -0.25rem -0.5rem 0;
   position: relative;
   width: 0.875rem;
   height: 0.875rem;
 }
-.ids-tag .ids-tag__close-btn:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids-tag .ids-tag__close-btn:before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;

package/package.json

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

package/themes/1177/1177.css

@@ -3344,6 +3344,10 @@ body.ids {
 /*******
 * A11Y
 ********/
+.ids-link:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-link {
   font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
@@ -3357,10 +3361,6 @@ body.ids {
   text-decoration: underline;
   position: relative;
 }
-.ids-link:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids-link:has(.ids-icon), .ids-link.ids-link--old-icon {
   text-decoration: none;
   display: inline-flex;
@@ -3643,6 +3643,8 @@ body.ids {
 .ids button.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:focus,
 .ids-button:focus,
@@ -3706,6 +3708,8 @@ body.ids {
 .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--secondary:focus,
 .ids-button.ids-button--secondary:focus,
@@ -3757,6 +3761,8 @@ body.ids {
   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;
 }
 .ids .ids-button.ids-button--tertiary:focus,
 .ids-button.ids-button--tertiary:focus,
@@ -3840,6 +3846,8 @@ body.ids {
 .ids button.ids-button.ids-button--icon.ids-button--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--icon:focus,
 .ids-button.ids-button--icon:focus,
@@ -4427,10 +4435,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  width: 100% !important;
-  height: var(--IDS-INPUT__HEIGHT);
-  line-height: 1.5rem;
-  font-size: 1rem;
 }
 .ids-input:disabled, .ids-input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4461,6 +4465,12 @@ input:focus + .ids-checkbox input::before {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-input {
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
+}
 .ids-input.ids-input--search, .ids-input[type=search] {
   margin-top: 0;
   margin-bottom: 0;
@@ -4502,15 +4512,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  height: var(--IDS-INPUT__HEIGHT);
-  cursor: pointer;
-  display: inline-block !important;
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--IDS-INPUT__BORDER);
-  width: 100% !important;
 }
 .ids-select:disabled, .ids-select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4537,6 +4538,17 @@ input:focus + .ids-checkbox input::before {
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select {
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
+  display: inline-block !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--IDS-INPUT__BORDER);
+  width: 100% !important;
+}
 .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -4613,8 +4625,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  padding: var(--IDS-TEXTAREA__PADDING);
-  box-sizing: border-box;
 }
 .ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
 .ids-textarea .ids-textarea__textarea:disabled,
@@ -4675,6 +4685,11 @@ input:focus + .ids-checkbox input::before {
 .ids-textarea .ids-textarea__textarea::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+.ids-textarea textarea,
+.ids-textarea .ids-textarea__textarea {
+  padding: var(--IDS-TEXTAREA__PADDING);
+  box-sizing: border-box;
+}
 .ids-textarea textarea:focus,
 .ids-textarea .ids-textarea__textarea:focus {
   box-shadow: var(--IDS-INPUT__BOX-SHADOW);
@@ -4754,16 +4769,6 @@ input.ids-time__input {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--IDS-INPUT__HEIGHT);
-  padding: var(--IDS-INPUT__PADDING);
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
 input.ids-time__input:disabled, input.ids-time__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4790,6 +4795,18 @@ input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input
 input.ids-time__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+input.ids-time__input {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
+}
 input.ids-time__input::-webkit-calendar-picker-indicator {
   opacity: 0;
   appearance: none;

package/themes/1177-pro/1177-pro.css

@@ -3344,6 +3344,10 @@ body.ids {
 /*******
 * A11Y
 ********/
+.ids-link:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-link {
   font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
@@ -3357,10 +3361,6 @@ body.ids {
   text-decoration: underline;
   position: relative;
 }
-.ids-link:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids-link:has(.ids-icon), .ids-link.ids-link--old-icon {
   text-decoration: none;
   display: inline-flex;
@@ -3643,6 +3643,8 @@ body.ids {
 .ids button.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:focus,
 .ids-button:focus,
@@ -3706,6 +3708,8 @@ body.ids {
 .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--secondary:focus,
 .ids-button.ids-button--secondary:focus,
@@ -3757,6 +3761,8 @@ body.ids {
   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;
 }
 .ids .ids-button.ids-button--tertiary:focus,
 .ids-button.ids-button--tertiary:focus,
@@ -3840,6 +3846,8 @@ body.ids {
 .ids button.ids-button.ids-button--icon.ids-button--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--icon:focus,
 .ids-button.ids-button--icon:focus,
@@ -4427,10 +4435,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  width: 100% !important;
-  height: var(--IDS-INPUT__HEIGHT);
-  line-height: 1.5rem;
-  font-size: 1rem;
 }
 .ids-input:disabled, .ids-input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4461,6 +4465,12 @@ input:focus + .ids-checkbox input::before {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-input {
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
+}
 .ids-input.ids-input--search, .ids-input[type=search] {
   margin-top: 0;
   margin-bottom: 0;
@@ -4502,15 +4512,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  height: var(--IDS-INPUT__HEIGHT);
-  cursor: pointer;
-  display: inline-block !important;
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--IDS-INPUT__BORDER);
-  width: 100% !important;
 }
 .ids-select:disabled, .ids-select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4537,6 +4538,17 @@ input:focus + .ids-checkbox input::before {
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select {
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
+  display: inline-block !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--IDS-INPUT__BORDER);
+  width: 100% !important;
+}
 .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -4613,8 +4625,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  padding: var(--IDS-TEXTAREA__PADDING);
-  box-sizing: border-box;
 }
 .ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
 .ids-textarea .ids-textarea__textarea:disabled,
@@ -4675,6 +4685,11 @@ input:focus + .ids-checkbox input::before {
 .ids-textarea .ids-textarea__textarea::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+.ids-textarea textarea,
+.ids-textarea .ids-textarea__textarea {
+  padding: var(--IDS-TEXTAREA__PADDING);
+  box-sizing: border-box;
+}
 .ids-textarea textarea:focus,
 .ids-textarea .ids-textarea__textarea:focus {
   box-shadow: var(--IDS-INPUT__BOX-SHADOW);
@@ -4754,16 +4769,6 @@ input.ids-time__input {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--IDS-INPUT__HEIGHT);
-  padding: var(--IDS-INPUT__PADDING);
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
 input.ids-time__input:disabled, input.ids-time__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4790,6 +4795,18 @@ input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input
 input.ids-time__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+input.ids-time__input {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
+}
 input.ids-time__input::-webkit-calendar-picker-indicator {
   opacity: 0;
   appearance: none;

package/themes/inera/inera.css

@@ -3371,6 +3371,10 @@ body.ids {
 /*******
 * A11Y
 ********/
+.ids-link:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-link {
   font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
@@ -3384,10 +3388,6 @@ body.ids {
   text-decoration: underline;
   position: relative;
 }
-.ids-link:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids-link:has(.ids-icon), .ids-link.ids-link--old-icon {
   text-decoration: none;
   display: inline-flex;
@@ -3670,6 +3670,8 @@ body.ids {
 .ids button.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:focus,
 .ids-button:focus,
@@ -3733,6 +3735,8 @@ body.ids {
 .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--secondary:focus,
 .ids-button.ids-button--secondary:focus,
@@ -3784,6 +3788,8 @@ body.ids {
   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;
 }
 .ids .ids-button.ids-button--tertiary:focus,
 .ids-button.ids-button--tertiary:focus,
@@ -3867,6 +3873,8 @@ body.ids {
 .ids button.ids-button.ids-button--icon.ids-button--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--icon:focus,
 .ids-button.ids-button--icon:focus,
@@ -4454,10 +4462,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  width: 100% !important;
-  height: var(--IDS-INPUT__HEIGHT);
-  line-height: 1.5rem;
-  font-size: 1rem;
 }
 .ids-input:disabled, .ids-input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4488,6 +4492,12 @@ input:focus + .ids-checkbox input::before {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-input {
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
+}
 .ids-input.ids-input--search, .ids-input[type=search] {
   margin-top: 0;
   margin-bottom: 0;
@@ -4529,15 +4539,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  height: var(--IDS-INPUT__HEIGHT);
-  cursor: pointer;
-  display: inline-block !important;
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--IDS-INPUT__BORDER);
-  width: 100% !important;
 }
 .ids-select:disabled, .ids-select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4564,6 +4565,17 @@ input:focus + .ids-checkbox input::before {
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select {
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
+  display: inline-block !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--IDS-INPUT__BORDER);
+  width: 100% !important;
+}
 .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -4640,8 +4652,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  padding: var(--IDS-TEXTAREA__PADDING);
-  box-sizing: border-box;
 }
 .ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
 .ids-textarea .ids-textarea__textarea:disabled,
@@ -4702,6 +4712,11 @@ input:focus + .ids-checkbox input::before {
 .ids-textarea .ids-textarea__textarea::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+.ids-textarea textarea,
+.ids-textarea .ids-textarea__textarea {
+  padding: var(--IDS-TEXTAREA__PADDING);
+  box-sizing: border-box;
+}
 .ids-textarea textarea:focus,
 .ids-textarea .ids-textarea__textarea:focus {
   box-shadow: var(--IDS-INPUT__BOX-SHADOW);
@@ -4781,16 +4796,6 @@ input.ids-time__input {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--IDS-INPUT__HEIGHT);
-  padding: var(--IDS-INPUT__PADDING);
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
 input.ids-time__input:disabled, input.ids-time__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4817,6 +4822,18 @@ input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input
 input.ids-time__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+input.ids-time__input {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
+}
 input.ids-time__input::-webkit-calendar-picker-indicator {
   opacity: 0;
   appearance: none;