@politiet/sheriff-web-components 1.3.1 → 2.0.0-beta.1

package/dist/sds-textfield/sds-textfield.styles.js

@@ -1,6 +1,42 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
+		--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-background-default));
+		--_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-neutral-text-default));
+
+		--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-default));
+		--_sds-textfield-border-width: var(--sds-textfield-border-width, var(--sds-border-sm));
+		--_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));
+
+		--_sds-textfield-font-family: var(--sds-textfield-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-md));
+		--_sds-textfield-font-weight: var(--sds-textfield-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-md));
+
+		--_sds-textfield-gap: var(--sds-textfield-gap, var(--sds-spacing-3xs));
+		--_sds-textfield-padding-block: var(--sds-textfield-padding-block, 0);
+		--_sds-textfield-padding-inline: var(--sds-textfield-padding-inline, var(--sds-spacing-xs));
+		--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-md)));
+		--_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));
+
+		--_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-neutral-text-default));
+		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-md));
+		--_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));
+		--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));
+
+		--_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-neutral-text-subtle));
+		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-md));
+		--_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-medium));
+		--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));
+
+		--_sds-textfield-focus-color: var(--sds-textfield-focus-color, var(--sds-color-states-focus-outer));
+		--_sds-textfield-focus-inner-color: var(--sds-textfield-focus-inner-color, var(--sds-color-states-focus-inner));
+		--_sds-textfield-focus-spacing: var(--sds-textfield-focus-spacing, var(--sds-color-states-focus-spacing));
+
+		--_sds-textfield-icon-right: var(--sds-textfield-icon-right, var(--sds-spacing-xs));
+		--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));
+
 		all: unset;
 		display: block;
 		text-align: start;
@@ -9,108 +45,114 @@ export const styles = css `
 	.sds-textfield {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
-		font-family: var(--sds-typography-font-family);
+		gap: var(--_sds-textfield-gap);
+		font-family: var(--_sds-textfield-font-family);
 
 		.sds-textfield__input-container {
-			max-width: var(--sds-typography-max-line-width);
 			position: relative;
 		}
 
 		.sds-textfield__input {
 			box-sizing: border-box;
-			color: var(--sds-color-semantic-text-default);
-			padding: 0.75rem 1rem;
-			line-height: 1.25rem;
-			font-size: 1rem;
-			justify-content: flex-end;
-			border-radius: var(--sds-radius-4);
-			border: 1px solid var(--sds-color-semantic-border-default);
-			background: var(--sds-color-semantic-surface-default);
-			max-width: var(--sds-typography-max-line-width);
+			color: var(--_sds-textfield-text-color);
+			padding: var(--_sds-textfield-padding-block) var(--_sds-textfield-padding-inline);
+			line-height: var(--_sds-textfield-line-height);
+			font-size: var(--_sds-textfield-font-size);
+			font-weight: var(--_sds-textfield-font-weight);
+			font-family: var(--_sds-textfield-font-family);
+			min-height: var(--_sds-textfield-min-height);
+			border-radius: var(--_sds-textfield-border-radius);
+			border: var(--_sds-textfield-border-width) solid var(--_sds-textfield-border-color);
+			background: var(--_sds-textfield-background-color);
 			width: 100%;
 
 			&:hover {
-				border-color: var(--sds-color-semantic-border-strong);
-			}
-
-			&:focus {
-				outline: 2px solid var(--sds-color-semantic-border-focus);
-				outline-offset: 1px;
+				--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-strong));
 			}
 
-			&:active {
-				border-color: var(--sds-color-semantic-border-action);
-				outline: none;
+			&:focus-visible {
+				box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textfield-focus-inner-color);
+				outline: 3px solid var(--_sds-textfield-focus-color);
+				outline-offset: 3px;
 			}
 		}
 
 		.sds-textfield__label {
-			color: var(--sds-color-semantic-text-default);
-			display: block;
-			font-size: 1rem;
-			font-weight: 500;
-			line-height: 1.5rem;
-			max-width: var(--sds-typography-max-line-width);
+			color: var(--_sds-textfield-text-color);
+			font-size: var(--_sds-textfield-label-font-size);
+			font-weight: var(--_sds-textfield-label-font-weight);
+			line-height: var(--_sds-textfield-label-line-height);
 		}
 
-		.sds-textfield__help-text {
-			color: var(--sds-color-semantic-text-subtle);
-			font-size: 1rem;
-			font-weight: 400;
-			line-height: 1.25rem;
-			margin: 0;
-			max-width: var(--sds-typography-max-line-width);
+		.sds-textfield__label:has(sds-icon) {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: var(--_sds-textfield-gap);
 		}
 
-		.sds-textfield__error-message {
+		.sds-textfield__help-text {
+			display: block;
+			color: var(--_sds-textfield-helptext-text-color);
+			font-size: var(--_sds-textfield-helptext-font-size);
+			font-weight: var(--_sds-textfield-helptext-font-weight);
+			line-height: var(--_sds-textfield-helptext-line-height);
 			margin: 0;
-			max-width: var(--sds-typography-max-line-width);
-			align-items: flex-start;
-			color: var(--sds-color-semantic-text-default);
-			display: flex;
-			line-height: 1.5rem;
-			gap: 0.25rem;
 		}
 	}
 
 	.sds-textfield--error {
-		color: var(--sds-color-semantic-text-default);
-		line-height: 1.5rem;
+		--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));
 
-		.sds-textfield__input,
-		.sds-textfield__input:hover {
-			border-color: var(--sds-color-semantic-border-critical);
+		& .sds-textfield__input:hover,
+		& .sds-textfield__input:hover {
+			--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));
 		}
 	}
 
-	.sds-textfield--disabled {
-		pointer-events: none;
-
-		.sds-textfield__label,
-		.sds-textfield__help-text,
-		.sds-textfield__error-message,
-		.sds-textfield__input {
-			color: var(--sds-color-semantic-text-disabled);
-		}
+	:host([readonly]) {
+		--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-surface-tinted));
+	}
 
-		.sds-textfield__input {
-			border: 1px solid var(--sds-color-semantic-border-disabled);
-		}
+	:host([disabled]) {
+		opacity: var(--_sds-textfield-disabled-opacity);
+		pointer-events: none;
 	}
 
 	.sds-textfield--has-icon {
 		.sds-textfield__input {
-			padding-right: 3.5rem;
+			padding-right: var(--_sds-textfield-padding-icon);
 		}
 	}
 
 	::slotted([slot='after']) {
 		position: absolute;
-		top: 50%;
-		right: 1rem;
-		transform: translateY(-50%);
+		top: var(--_sds-textfield-icon-top);
+		right: var(--_sds-textfield-icon-right);
 		pointer-events: none;
 	}
+
+	:host([size='sm']) {
+		--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-sm));
+		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-sm));
+		--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-sm));
+		--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-sm));
+		--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));
+		--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-sm)));
+	}
+
+	:host([size='lg']) {
+		--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-lg));
+		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-lg));
+		--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-lg));
+		--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-lg));
+		--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-2xs));
+	}
 `;
 //# sourceMappingURL=sds-textfield.styles.js.map

package/dist/sds-textfield/sds-textfield.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-textfield.styles.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textfield {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.25rem;\n\t\tfont-family: var(--sds-typography-font-family);\n\n\t\t.sds-textfield__input-container {\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tpadding: 0.75rem 1rem;\n\t\t\tline-height: 1.25rem;\n\t\t\tfont-size: 1rem;\n\t\t\tjustify-content: flex-end;\n\t\t\tborder-radius: var(--sds-radius-4);\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-default);\n\t\t\tbackground: var(--sds-color-semantic-surface-default);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\twidth: 100%;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: var(--sds-color-semantic-border-strong);\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\t\toutline-offset: 1px;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tborder-color: var(--sds-color-semantic-border-action);\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t}\n\n\t\t.sds-textfield__label {\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tdisplay: block;\n\t\t\tfont-size: 1rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.5rem;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textfield__help-text {\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tfont-size: 1rem;\n\t\t\tfont-weight: 400;\n\t\t\tline-height: 1.25rem;\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textfield__error-message {\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\talign-items: flex-start;\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tdisplay: flex;\n\t\t\tline-height: 1.5rem;\n\t\t\tgap: 0.25rem;\n\t\t}\n\t}\n\n\t.sds-textfield--error {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tline-height: 1.5rem;\n\n\t\t.sds-textfield__input,\n\t\t.sds-textfield__input:hover {\n\t\t\tborder-color: var(--sds-color-semantic-border-critical);\n\t\t}\n\t}\n\n\t.sds-textfield--disabled {\n\t\tpointer-events: none;\n\n\t\t.sds-textfield__label,\n\t\t.sds-textfield__help-text,\n\t\t.sds-textfield__error-message,\n\t\t.sds-textfield__input {\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-disabled);\n\t\t}\n\t}\n\n\t.sds-textfield--has-icon {\n\t\t.sds-textfield__input {\n\t\t\tpadding-right: 3.5rem;\n\t\t}\n\t}\n\n\t::slotted([slot='after']) {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tright: 1rem;\n\t\ttransform: translateY(-50%);\n\t\tpointer-events: none;\n\t}\n`;\n"]}
+{"version":3,"file":"sds-textfield.styles.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-background-default));\n\t\t--_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-textfield-border-width: var(--sds-textfield-border-width, var(--sds-border-sm));\n\t\t--_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textfield-font-family: var(--sds-textfield-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textfield-font-weight: var(--sds-textfield-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-md));\n\n\t\t--_sds-textfield-gap: var(--sds-textfield-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-block: var(--sds-textfield-padding-block, 0);\n\t\t--_sds-textfield-padding-inline: var(--sds-textfield-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-md)));\n\t\t--_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-focus-color: var(--sds-textfield-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textfield-focus-inner-color: var(--sds-textfield-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textfield-focus-spacing: var(--sds-textfield-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\t--_sds-textfield-icon-right: var(--sds-textfield-icon-right, var(--sds-spacing-xs));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textfield {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textfield-gap);\n\t\tfont-family: var(--_sds-textfield-font-family);\n\n\t\t.sds-textfield__input-container {\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tpadding: var(--_sds-textfield-padding-block) var(--_sds-textfield-padding-inline);\n\t\t\tline-height: var(--_sds-textfield-line-height);\n\t\t\tfont-size: var(--_sds-textfield-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-font-weight);\n\t\t\tfont-family: var(--_sds-textfield-font-family);\n\t\t\tmin-height: var(--_sds-textfield-min-height);\n\t\t\tborder-radius: var(--_sds-textfield-border-radius);\n\t\t\tborder: var(--_sds-textfield-border-width) solid var(--_sds-textfield-border-color);\n\t\t\tbackground: var(--_sds-textfield-background-color);\n\t\t\twidth: 100%;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-strong));\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textfield-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textfield-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\t\t}\n\n\t\t.sds-textfield__label {\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tfont-size: var(--_sds-textfield-label-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-label-font-weight);\n\t\t\tline-height: var(--_sds-textfield-label-line-height);\n\t\t}\n\n\t\t.sds-textfield__label:has(sds-icon) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: var(--_sds-textfield-gap);\n\t\t}\n\n\t\t.sds-textfield__help-text {\n\t\t\tdisplay: block;\n\t\t\tcolor: var(--_sds-textfield-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textfield-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textfield-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.sds-textfield--error {\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t& .sds-textfield__input:hover,\n\t\t& .sds-textfield__input:hover {\n\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-surface-tinted));\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textfield-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t.sds-textfield--has-icon {\n\t\t.sds-textfield__input {\n\t\t\tpadding-right: var(--_sds-textfield-padding-icon);\n\t\t}\n\t}\n\n\t::slotted([slot='after']) {\n\t\tposition: absolute;\n\t\ttop: var(--_sds-textfield-icon-top);\n\t\tright: var(--_sds-textfield-icon-right);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-sm));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-sm)));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-lg));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-2xs));\n\t}\n`;\n"]}