From 597451aad8c8b71b16f055ab77f3f4a7f4201489 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Fri, 17 Jan 2025 07:15:50 +0100
Subject: [PATCH] Update components

Refs: #7178
---
 packages/components/src/components/a11y.scss  |  2 +
 .../src/components/input-date/style.scss      |  9 +-
 .../src/components/input-email/style.scss     |  4 +-
 .../src/components/input-file/style.scss      |  8 +-
 .../components/src/components/input-line.scss |  3 +-
 .../src/components/input-number/style.scss    |  4 +-
 .../src/components/input-password/shadow.tsx  |  2 +-
 .../src/components/input-password/style.scss  | 11 +--
 .../src/components/input-range/shadow.tsx     |  4 +-
 .../src/components/input-range/style.scss     | 83 +++++++++----------
 .../src/components/input-text/style.scss      |  6 +-
 .../src/components/legacy-input.scss          | 10 ---
 .../src/components/select/style.scss          | 14 +++-
 13 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/packages/components/src/components/a11y.scss b/packages/components/src/components/a11y.scss
index 9e4fb951e7..19b3a7b078 100644
--- a/packages/components/src/components/a11y.scss
+++ b/packages/components/src/components/a11y.scss
@@ -1,3 +1,5 @@
+@import '@shared/mixins';
+
 /*
  * This file contains all rules for accessibility.
  */
diff --git a/packages/components/src/components/input-date/style.scss b/packages/components/src/components/input-date/style.scss
index e88d143012..0afb4a2557 100644
--- a/packages/components/src/components/input-date/style.scss
+++ b/packages/components/src/components/input-date/style.scss
@@ -2,15 +2,10 @@
 @import '../../styles/kol-alert-mixin';
 @import '../../styles/kol-form-field-mixin';
 @import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../input-line';
 
 @include kol-alert;
 @include kol-form-field;
 @include kol-input-container;
-
-@layer kol-component {
-	.kol-input-number {
-		display: block;
-	}
-}
+@include kol-input;
diff --git a/packages/components/src/components/input-email/style.scss b/packages/components/src/components/input-email/style.scss
index 03ac4fd83a..0afb4a2557 100644
--- a/packages/components/src/components/input-email/style.scss
+++ b/packages/components/src/components/input-email/style.scss
@@ -1,9 +1,11 @@
 @import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../../styles/kol-form-field-mixin';
 @import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../input-line';
 
 @include kol-alert;
 @include kol-form-field;
 @include kol-input-container;
+@include kol-input;
diff --git a/packages/components/src/components/input-file/style.scss b/packages/components/src/components/input-file/style.scss
index cd3b1a2e63..99f1181b38 100644
--- a/packages/components/src/components/input-file/style.scss
+++ b/packages/components/src/components/input-file/style.scss
@@ -1,15 +1,17 @@
 @import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../../styles/kol-form-field-mixin';
 @import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../input-line';
 
 @include kol-alert;
 @include kol-form-field;
 @include kol-input-container;
+@include kol-input;
 
 @layer kol-component {
-	:host {
-		font-size: rem(16);
+	.kol-input {
+		padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em;
 	}
 }
diff --git a/packages/components/src/components/input-line.scss b/packages/components/src/components/input-line.scss
index 279499bfe0..cb54f6f0a9 100644
--- a/packages/components/src/components/input-line.scss
+++ b/packages/components/src/components/input-line.scss
@@ -1,8 +1,7 @@
 @import './legacy-input';
 
 @layer kol-component {
-	input:not([type='checkbox'], [type='radio']),
-	select:not([multiple], [size]) {
+	input:not([type='checkbox'], [type='radio']) {
 		height: 2.75em;
 	}
 
diff --git a/packages/components/src/components/input-number/style.scss b/packages/components/src/components/input-number/style.scss
index 03ac4fd83a..0afb4a2557 100644
--- a/packages/components/src/components/input-number/style.scss
+++ b/packages/components/src/components/input-number/style.scss
@@ -1,9 +1,11 @@
 @import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../../styles/kol-form-field-mixin';
 @import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../input-line';
 
 @include kol-alert;
 @include kol-form-field;
 @include kol-input-container;
+@include kol-input;
diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx
index 2b5e2210d8..3ca393186d 100644
--- a/packages/components/src/components/input-password/shadow.tsx
+++ b/packages/components/src/components/input-password/shadow.tsx
@@ -119,7 +119,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 		return (
 			<KolIconButtonFc
 				componentName="button"
-				class="password-toggle-button"
+				class="kol-input-password__password-toggle-button"
 				label={this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password')}
 				variant="ghost"
 				onClick={(): void => {
diff --git a/packages/components/src/components/input-password/style.scss b/packages/components/src/components/input-password/style.scss
index 5688869be6..27fbe51e93 100644
--- a/packages/components/src/components/input-password/style.scss
+++ b/packages/components/src/components/input-password/style.scss
@@ -1,20 +1,17 @@
 @import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../../styles/kol-form-field-mixin';
 @import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../input-line';
 
 @include kol-alert;
 @include kol-form-field;
 @include kol-input-container;
+@include kol-input;
 
 @layer kol-component {
-	.password-toggle-button {
-		position: absolute;
-		transform: translateX(-100%);
-	}
-
-	.kol-tooltip-wc {
+	.kol-input-password {
 		--kol-tooltip-width: #{rem(160)};
 	}
 }
diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx
index c8775bbc94..c2db860b53 100644
--- a/packages/components/src/components/input-range/shadow.tsx
+++ b/packages/components/src/components/input-range/shadow.tsx
@@ -175,8 +175,8 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 			<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>
 				<KolInputContainerFc state={this.state}>
 					<div class="kol-input-range__inputs-wrapper" style={inputsWrapperStyle}>
-						<KolInputStateWrapperFc {...this.getInputRangeProps()} />
-						<KolInputStateWrapperFc {...this.getInputNumberProps()} />
+						<KolInputStateWrapperFc class="kol-input-range__input kol-input-range__input--range" {...this.getInputRangeProps()} />
+						<KolInputStateWrapperFc class="kol-input-range__input kol-input-range__input--number" {...this.getInputNumberProps()} />
 					</div>
 					{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}
 				</KolInputContainerFc>
diff --git a/packages/components/src/components/input-range/style.scss b/packages/components/src/components/input-range/style.scss
index 9c9cb61484..6b62c04de3 100644
--- a/packages/components/src/components/input-range/style.scss
+++ b/packages/components/src/components/input-range/style.scss
@@ -1,12 +1,14 @@
 @import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../../styles/kol-form-field-mixin';
 @import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../input-line';
 
 @include kol-alert;
 @include kol-form-field;
 @include kol-input-container;
+@include kol-input;
 
 @layer kol-component {
 	.kol-input-range {
@@ -15,55 +17,50 @@
 			display: flex;
 			flex-direction: row;
 			flex-grow: 1;
+		}
 
-			.kol-input {
-				&[type='number'] {
-					min-height: var(--a11y-min-size);
-					min-width: var(--a11y-min-size);
-					width: var(--kolibri-input-range--input-number--width);
-				}
+		&__input {
+			&--number {
+				width: var(--kolibri-input-range--input-number--width);
+			}
 
-				&[type='range'] {
-					appearance: none;
-					background-color: #d3d3d3;
-					border: rem(1) solid #000;
-					display: inline-block;
-					flex-grow: 1;
-					height: rem(8);
-					line-height: 1.5;
-					padding: 0;
-					margin: 0;
-					/* Design-Hack - related with flex-grow */
-					width: 0;
+			&--range {
+				appearance: none;
+				background-color: #d3d3d3;
+				border: rem(1) solid #000;
+				display: inline-block;
+				flex-grow: 1;
+				height: rem(8);
+				line-height: 1.5;
+				padding: 0;
+				margin: 0;
+				/* Design-Hack - related with flex-grow */
+				width: 0;
 
-					&::-webkit-slider-thumb {
-						box-sizing: border-box;
-						background-color: #000;
-						height: rem(20);
-						width: rem(20);
-						border-radius: rem(20);
-						cursor: pointer;
-						-webkit-appearance: none;
-					}
+				&::-webkit-slider-thumb {
+					box-sizing: border-box;
+					background-color: #000;
+					height: rem(20);
+					width: rem(20);
+					border-radius: rem(20);
+					cursor: pointer;
+					-webkit-appearance: none;
 
-					&::-moz-range-thumb {
-						box-sizing: border-box;
-						background-color: #000;
-						height: rem(20);
-						width: rem(20);
-						border-radius: rem(20);
-						cursor: pointer;
-						-moz-appearance: none;
+					@media (prefers-contrast: more) or (forced-colors: active) {
+						outline: rem(1) solid currentColor;
 					}
 				}
-			}
-		}
-	}
 
-	/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */
-	@media (prefers-contrast: more) {
-		::-webkit-slider-thumb {
-			outline: rem(1) solid currentColor;
+				&::-moz-range-thumb {
+					box-sizing: border-box;
+					background-color: #000;
+					height: rem(20);
+					width: rem(20);
+					border-radius: rem(20);
+					cursor: pointer;
+					-moz-appearance: none;
+				}
+			}
 		}
 	}
 }
diff --git a/packages/components/src/components/input-text/style.scss b/packages/components/src/components/input-text/style.scss
index 90bb634afc..0afb4a2557 100644
--- a/packages/components/src/components/input-text/style.scss
+++ b/packages/components/src/components/input-text/style.scss
@@ -1,9 +1,11 @@
 @import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../../styles/kol-form-field-mixin';
 @import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../input-line';
 
+@include kol-alert;
 @include kol-form-field;
 @include kol-input-container;
-@include kol-alert;
+@include kol-input;
diff --git a/packages/components/src/components/legacy-input.scss b/packages/components/src/components/legacy-input.scss
index 257c7c8e53..a057324979 100644
--- a/packages/components/src/components/legacy-input.scss
+++ b/packages/components/src/components/legacy-input.scss
@@ -43,14 +43,4 @@
 		font-size: rem(16);
 		width: 100%;
 	}
-
-	/* needed hack for vertical alignment */
-	input[type='file'] {
-		padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em;
-	}
-
-	/* needed hack for vertical alignment */
-	select[multiple] option {
-		padding: calc((var(--a11y-min-size) - rem(16)) / 2) 0.5em;
-	}
 }
diff --git a/packages/components/src/components/select/style.scss b/packages/components/src/components/select/style.scss
index 88b8ad1b9b..2026dd3c7a 100644
--- a/packages/components/src/components/select/style.scss
+++ b/packages/components/src/components/select/style.scss
@@ -1,8 +1,9 @@
 @import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../../styles/kol-form-field-mixin';
 @import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../input-line';
 
 @include kol-alert;
 @include kol-form-field;
@@ -11,9 +12,20 @@
 @layer kol-component {
 	.kol-select {
 		font-size: rem(16);
+		cursor: pointer;
+		width: 100%;
+
+		&:not([multiple], [size]) {
+			height: 2.75em;
+		}
 
 		&__option:checked::before {
 			content: '✓ ';
 		}
+
+		/* needed hack for vertical alignment */
+		&[multiple] option {
+			padding: calc((var(--a11y-min-size) - rem(16)) / 2) 0.5em;
+		}
 	}
 }