fix: center text for no-label-float attribute in contour style input (#119)

* fix: center text for no label float attribute in contour style input

* fix: grouped decendant selectors under the same declaration([no-label-float])

Author: ionut

src/styles.ts

@@ -110,10 +110,14 @@ export const styles = css`
 		text-transform: var(--cosmoz-input-label-text-transform);
 		font-weight: var(--cosmoz-input-label-font-weight);
 	}
-	.wrap:has(#input:not(:placeholder-shown)) slot[name='suffix']::slotted(*),
-	.wrap:has(#input:not(:placeholder-shown)) slot[name='prefix']::slotted(*) {
-		transform: translateY(var(--label-translate-y));
+
+	.wrap:has(#input:not(:placeholder-shown)) {
+		slot[name='suffix']::slotted(*),
+		slot[name='prefix']::slotted(*) {
+			transform: translateY(var(--label-translate-y));
+		}
 	}
+
 	:host([always-float-label]) label,
 	#input:not(:placeholder-shown) + label {
 		transform: translateY(
@@ -128,9 +132,11 @@ export const styles = css`
 		transform: translateY(var(--label-translate-y));
 	}
 
-	:host([always-float-label]) slot[name='suffix']::slotted(*),
-	:host([always-float-label]) slot[name='prefix']::slotted(*) {
-		transform: translateY(var(--label-translate-y));
+	:host([always-float-label]) {
+		slot[name='suffix']::slotted(*),
+		slot[name='prefix']::slotted(*) {
+			transform: translateY(var(--label-translate-y));
+		}
 	}
 
 	:host(:not(always-float-label):focus-within) #input::placeholder,
@@ -139,12 +145,29 @@ export const styles = css`
 		opacity: 1;
 	}
 
+	:host([no-label-float]) {
+		.float,
+		label {
+			display: none;
+		}
+
+		#input:not(:placeholder-shown) {
+			transform: translateY(0%);
+		}
+
+		.wrap:has(#input:not(:placeholder-shown)) slot[name='suffix']::slotted(*),
+		.wrap:has(#input:not(:placeholder-shown)) slot[name='prefix']::slotted(*) {
+			transform: translateY(0%);
+		}
+	}
+
 	.line {
 		padding-top: 1px;
 		border-bottom: 1px solid var(--line-color);
 		position: relative;
 		display: var(--cosmoz-input-line-display, block);
 	}
+
 	.line::before {
 		content: '';
 		position: absolute;
@@ -175,11 +198,6 @@ export const styles = css`
 		opacity: var(--disabled-line-opacity);
 	}
 
-	:host([no-label-float]) .float,
-	:host([no-label-float]) label {
-		display: none;
-	}
-
 	.error {
 		font-size: 12px;
 		line-height: 20px;

stories/cosmoz-input.stories.js

@@ -54,13 +54,13 @@ export const contour = () => html`
 	<style>
 		cosmoz-input {
 			--cosmoz-input-color: #aeacac;
-			--cosmoz-input-border-radius: 4px;
-			--cosmoz-input-wrap-padding: 12px;
+			--cosmoz-input-border-radius: 8px;
+			--cosmoz-input-wrap-padding: 12px 16px;
+			--cosmoz-input-padding: 14px 0px;
 			--cosmoz-input-line-display: none;
 			--cosmoz-input-contour-size: 1px;
-			--cosmoz-input-label-translate-y: 10px;
+			--cosmoz-input-label-translate-y: 8px;
 			--cosmoz-input-float-display: none;
-			--cosmoz-input-padding: 10px 8px;
 		}
 		span {
 			margin: 0 4px;
@@ -78,7 +78,16 @@ export const contour = () => html`
 	<cosmoz-input always-float-label .label=${'This label always floats'}
 		><span slot="prefix">${'Example:'}</span></cosmoz-input
 	>
-
+	<cosmoz-input
+		no-label-float
+		.label=${'This label never floats'}
+	></cosmoz-input>
+	<cosmoz-input no-label-float .label=${'This label never floats with prefix'}
+		><span slot="prefix">${'Example:'}</span></cosmoz-input
+	>
+	<cosmoz-input no-label-float .label=${'This label never floats with sufix'}
+		><span slot="suffix">${'suffix'}</span></cosmoz-input
+	>
 	<cosmoz-input
 		invalid
 		.label=${'This input is invalid!'}

stories/cosmoz-textarea.stories.js

@@ -43,6 +43,11 @@ const basic = () => html`
 			.label=${'Write your comment here'}
 			.value=${loremIpsum}
 		></cosmoz-textarea>
+		<cosmoz-textarea
+			no-label-float
+			placeholder=${'Write your comment here'}
+			.value=${loremIpsum}
+		></cosmoz-textarea>
 		<cosmoz-textarea
 			invalid
 			.errorMessage=${'Something is rotten in the state of Denmark'}