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

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

@@ -1,13 +1,13 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-neutral-surface-tinted));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-neutral-text-default));
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
 
 		--_sds-tag-font-family: var(--sds-tag-font-family, var(--sds-typography-font-family-roboto));
 		--_sds-tag-font-weight: var(--sds-tag-font-weight, var(--sds-typography-font-weight-regular));
-		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-md));
-		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-md));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-md));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-md));
 
 		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-md));
 		--_sds-tag-gap: var(--sds-tag-gap, var(--sds-spacing--zero));
@@ -39,52 +39,26 @@ export const styles = css `
 		user-select: text;
 	}
 
-	:host([color='primary']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-primary-surface-tinted));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-primary-text-default));
+	:host([data-palette]) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-surface-tinted));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-text-default));
 	}
 
-	:host([color='info']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-info-surface-tinted));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-info-text-default));
-	}
-
-	:host([color='success']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-success-surface-tinted));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-success-text-default));
-	}
-
-	:host([color='attention']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-attention-surface-hover));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-attention-text-default));
-	}
-
-	:host([color='warning']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-warning-surface-hover));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-warning-text-default));
-	}
-
-	:host([color='danger']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-surface-hover));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-text-default));
-	}
-
-	:host([color='danger-critical']) {
+	:host([data-palette='danger-action']) {
 		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-action-default));
 		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-action-contrast-default));
 	}
 
 	:host([size='sm']) {
 		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-sm));
-		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-sm));
-		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-sm));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-sm));
 	}
 
 	:host([size='lg']) {
-		color: red;
 		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-lg));
-		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-lg));
-		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-lg));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 `;
 //# sourceMappingURL=sds-tag.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-tag.styles.js","sourceRoot":"","sources":["../../src/sds-tag/sds-tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-tag-font-family: var(--sds-tag-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-tag-font-weight: var(--sds-tag-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-md));\n\n\t\t--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-md));\n\t\t--_sds-tag-gap: var(--sds-tag-gap, var(--sds-spacing--zero));\n\t\t--_sds-tag-padding-inline: var(--sds-tag-padding-inline, var(--sds-spacing-3xs));\n\t\t--_sds-tag-border-radius: var(--sds-tag-border-radius, var(--sds-radius-xs));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-tag {\n\t\theight: var(--_sds-tag-height);\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: var(--_sds-tag-gap);\n\t\tpadding-inline: var(--_sds-tag-padding-inline);\n\n\t\tcolor: var(--_sds-tag-text-color);\n\t\tbackground-color: var(--_sds-tag-background-color);\n\t\tborder-radius: var(--_sds-tag-border-radius);\n\n\t\tfont-family: var(--_sds-tag-font-family);\n\t\tfont-size: var(--_sds-tag-font-size);\n\t\tfont-weight: var(--_sds-tag-font-weight);\n\t\tline-height: var(--_sds-tag-line-height);\n\t\ttext-align: center;\n\n\t\tuser-select: text;\n\t}\n\n\t:host([color='primary']) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-primary-surface-tinted));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-primary-text-default));\n\t}\n\n\t:host([color='info']) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-info-surface-tinted));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-info-text-default));\n\t}\n\n\t:host([color='success']) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-success-surface-tinted));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-success-text-default));\n\t}\n\n\t:host([color='attention']) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-attention-surface-hover));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-attention-text-default));\n\t}\n\n\t:host([color='warning']) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-warning-surface-hover));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-warning-text-default));\n\t}\n\n\t:host([color='danger']) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-surface-hover));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t:host([color='danger-critical']) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-action-default));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-action-contrast-default));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-sm));\n\t\t--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\tcolor: red;\n\t\t--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-lg));\n\t\t--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-lg));\n\t}\n`;\n"]}
+{"version":3,"file":"sds-tag.styles.js","sourceRoot":"","sources":["../../src/sds-tag/sds-tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-tag-font-family: var(--sds-tag-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-tag-font-weight: var(--sds-tag-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-md));\n\t\t--_sds-tag-gap: var(--sds-tag-gap, var(--sds-spacing--zero));\n\t\t--_sds-tag-padding-inline: var(--sds-tag-padding-inline, var(--sds-spacing-3xs));\n\t\t--_sds-tag-border-radius: var(--sds-tag-border-radius, var(--sds-radius-xs));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-tag {\n\t\theight: var(--_sds-tag-height);\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: var(--_sds-tag-gap);\n\t\tpadding-inline: var(--_sds-tag-padding-inline);\n\n\t\tcolor: var(--_sds-tag-text-color);\n\t\tbackground-color: var(--_sds-tag-background-color);\n\t\tborder-radius: var(--_sds-tag-border-radius);\n\n\t\tfont-family: var(--_sds-tag-font-family);\n\t\tfont-size: var(--_sds-tag-font-size);\n\t\tfont-weight: var(--_sds-tag-font-weight);\n\t\tline-height: var(--_sds-tag-line-height);\n\t\ttext-align: center;\n\n\t\tuser-select: text;\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-surface-tinted));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-text-default));\n\t}\n\n\t:host([data-palette='danger-action']) {\n\t\t--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-action-default));\n\t\t--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-action-contrast-default));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-sm));\n\t\t--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-lg));\n\t\t--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}

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

@@ -5,7 +5,7 @@ export const styles = css `
 		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));
 		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));
 		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));
-		--_sds-text-color: var(--sds-text-color, var(--sds-color-primary-text-default));
+		--_sds-text-color: var(--sds-text-color, var(--sds-color-accent-text-default));
 
 		display: block;
 		box-sizing: border-box;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-text.styles.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+QxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-text-font-family: var(--sds-text-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-primary-text-default));\n\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\tp {\n\t\tfont-family: var(--_sds-text-font-family);\n\t\tfont-size: var(--_sds-text-font-size);\n\t\tfont-weight: var(--_sds-text-font-weight);\n\t\tline-height: var(--_sds-text-line-height);\n\t\tcolor: var(--_sds-text-color);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t}\n\n\t/* Mobile */\n\t:host {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t}\n\n\t:host([strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-mobile-line-height));\n\t}\n\n\t:host([tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-mobile-line-height));\n\t}\n\n\t/* Extra small variants */\n\t:host([size='xs']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong]) {\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-mobile-font-weight));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-mobile-line-height));\n\t}\n\n\t/* Small variants */\n\t:host([size='sm']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-mobile-line-height));\n\t}\n\n\t:host([size='sm'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-mobile-line-height));\n\t}\n\n\t/* Large variants */\n\t:host([size='lg']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-mobile-line-height));\n\t}\n\n\t:host([size='lg'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-mobile-line-height));\n\t}\n\n\t:host([size='lg'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-mobile-line-height));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-mobile-font-weight));\n\t}\n\n\t:host([size='lg'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-mobile-line-height));\n\t}\n\n\t/* Extra large variant */\n\t:host([size='xl']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-mobile-line-height));\n\t}\n\n\t/* Tablet */\n\t@media (min-width: 640px) {\n\t\t/* Medium variants */\n\t\t:host {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t}\n\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-tablet-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-tablet-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-tablet-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-tablet-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-tablet-line-height));\n\t\t}\n\t}\n\n\t/* Desktop */\n\t@media (min-width: 1024px) {\n\t\t/* Medium variants */\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-desktop-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-desktop-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-desktop-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-desktop-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-text.styles.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+QxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-text-font-family: var(--sds-text-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-accent-text-default));\n\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\tp {\n\t\tfont-family: var(--_sds-text-font-family);\n\t\tfont-size: var(--_sds-text-font-size);\n\t\tfont-weight: var(--_sds-text-font-weight);\n\t\tline-height: var(--_sds-text-line-height);\n\t\tcolor: var(--_sds-text-color);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t}\n\n\t/* Mobile */\n\t:host {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t}\n\n\t:host([strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-mobile-line-height));\n\t}\n\n\t:host([tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-mobile-line-height));\n\t}\n\n\t/* Extra small variants */\n\t:host([size='xs']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong]) {\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-mobile-font-weight));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-mobile-line-height));\n\t}\n\n\t/* Small variants */\n\t:host([size='sm']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-mobile-line-height));\n\t}\n\n\t:host([size='sm'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-mobile-line-height));\n\t}\n\n\t/* Large variants */\n\t:host([size='lg']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-mobile-line-height));\n\t}\n\n\t:host([size='lg'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-mobile-line-height));\n\t}\n\n\t:host([size='lg'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-mobile-line-height));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-mobile-font-weight));\n\t}\n\n\t:host([size='lg'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-mobile-line-height));\n\t}\n\n\t/* Extra large variant */\n\t:host([size='xl']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-mobile-line-height));\n\t}\n\n\t/* Tablet */\n\t@media (min-width: 640px) {\n\t\t/* Medium variants */\n\t\t:host {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t}\n\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-tablet-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-tablet-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-tablet-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-tablet-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-tablet-line-height));\n\t\t}\n\t}\n\n\t/* Desktop */\n\t@media (min-width: 1024px) {\n\t\t/* Medium variants */\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-desktop-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-desktop-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-desktop-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-desktop-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}

package/dist/sds-textarea/sds-textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-textarea.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sds-textarea.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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"}

package/dist/sds-textarea/sds-textarea.js

@@ -72,7 +72,9 @@ let SDSTextArea = class SDSTextArea extends LitElement {
             return nothing;
         const currentLength = this.value?.length || 0;
         if (this.hasTypedTooManyCharacters()) {
-            return html `<p class="sds-textarea__character-counter">Du har ${currentLength - this.counter} tegn for mye</p>`;
+            return html `<sds-alert variant="secondary" data-palette="danger"
+				><p class="sds-textarea__character-counter" slot="message">Du har ${currentLength - this.counter} tegn for mye</p></sds-alert
+			>`;
         }
         return html `<p class="sds-textarea__character-counter">Du har ${this.counter - currentLength} tegn igjen</p>`;
     }
@@ -168,7 +170,7 @@ let SDSTextArea = class SDSTextArea extends LitElement {
 						@blur="${this._handleBlur}"
 					></textarea>
 				</div>
-				${this.renderCharacterCounter()} ${this.errorMessage ? html `<sds-alert variant="secondary" color="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
+				${this.errorMessage ? html `<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing} ${this.renderCharacterCounter()}
 			</div>
 		`;
     }

package/dist/sds-textarea/sds-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-textarea.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textarea.styles';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\nimport { SDS_SIZES } from '../types';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nexport interface SDSTextAreaProps {\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: HTMLTextAreaElement['autocomplete'];\n\trequired?: boolean;\n\trows?: number;\n\tcols?: number;\n\twrap?: 'hard' | 'soft' | 'off';\n\tminlength?: number;\n\tmaxlength?: number;\n\tcounter?: number;\n\tsize?: InputSize;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textarea')\nexport class SDSTextArea extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: HTMLTextAreaElement['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: Number, reflect: true }) rows?: number;\n\t@property({ type: Number, reflect: true }) cols?: number;\n\t@property({ type: String, reflect: true }) wrap?: 'hard' | 'soft';\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\t@property({ type: Number, reflect: true }) counter?: number;\n\t@property({ type: String, reflect: true }) size: InputSize = 'md';\n\n\t@query('#sds-textarea') control!: HTMLTextAreaElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate hasTypedTooManyCharacters() {\n\t\tif (!this.counter) {\n\t\t\treturn false;\n\t\t}\n\t\tconst currentLength = this.value?.length || 0;\n\t\treturn currentLength > this.counter;\n\t}\n\n\tprivate renderCharacterCounter() {\n\t\tif (this.counter === undefined) return nothing;\n\n\t\tconst currentLength = this.value?.length || 0;\n\t\tif (this.hasTypedTooManyCharacters()) {\n\t\t\treturn html`<p class=\"sds-textarea__character-counter\">Du har ${currentLength - this.counter} tegn for mye</p>`;\n\t\t}\n\n\t\treturn html`<p class=\"sds-textarea__character-counter\">Du har ${this.counter - currentLength} tegn igjen</p>`;\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLTextAreaElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\ttype(): string {\n\t\treturn 'textarea';\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textareaClasses = {\n\t\t\t'sds-textarea': true,\n\t\t\t'sds-textarea--error': Boolean(this.errorMessage || this.hasTypedTooManyCharacters()),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textareaClasses)}\">\n\t\t\t\t${this.label || this.helpText\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t${this.label ? html`<label for=\"sds-textarea\" class=\"sds-textarea__label\">${this.label}</label>` : nothing}\n\t\t\t\t\t\t\t${this.helpText ? html`<p class=\"sds-textarea__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing}\n\t\t\t\t<div class=\"sds-textarea__input-container\">\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tclass=\"sds-textarea__input\"\n\t\t\t\t\t\tid=\"sds-textarea\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\t.autocomplete=\"${this.autocomplete}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\trows=\"${ifDefined(this.rows)}\"\n\t\t\t\t\t\tcols=\"${ifDefined(this.cols)}\"\n\t\t\t\t\t\twrap=\"${ifDefined(this.wrap)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t></textarea>\n\t\t\t\t</div>\n\t\t\t\t${this.renderCharacterCounter()} ${this.errorMessage ? html`<sds-alert variant=\"secondary\" color=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textarea': SDSTextArea;\n\t}\n}\n"]}
+{"version":3,"file":"sds-textarea.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textarea.styles';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\nimport { SDS_SIZES } from '../types';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nexport interface SDSTextAreaProps {\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: HTMLTextAreaElement['autocomplete'];\n\trequired?: boolean;\n\trows?: number;\n\tcols?: number;\n\twrap?: 'hard' | 'soft' | 'off';\n\tminlength?: number;\n\tmaxlength?: number;\n\tcounter?: number;\n\tsize?: InputSize;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textarea')\nexport class SDSTextArea extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: HTMLTextAreaElement['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: Number, reflect: true }) rows?: number;\n\t@property({ type: Number, reflect: true }) cols?: number;\n\t@property({ type: String, reflect: true }) wrap?: 'hard' | 'soft';\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\t@property({ type: Number, reflect: true }) counter?: number;\n\t@property({ type: String, reflect: true }) size: InputSize = 'md';\n\n\t@query('#sds-textarea') control!: HTMLTextAreaElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate hasTypedTooManyCharacters() {\n\t\tif (!this.counter) {\n\t\t\treturn false;\n\t\t}\n\t\tconst currentLength = this.value?.length || 0;\n\t\treturn currentLength > this.counter;\n\t}\n\n\tprivate renderCharacterCounter() {\n\t\tif (this.counter === undefined) return nothing;\n\n\t\tconst currentLength = this.value?.length || 0;\n\t\tif (this.hasTypedTooManyCharacters()) {\n\t\t\treturn html`<sds-alert variant=\"secondary\" data-palette=\"danger\"\n\t\t\t\t><p class=\"sds-textarea__character-counter\" slot=\"message\">Du har ${currentLength - this.counter} tegn for mye</p></sds-alert\n\t\t\t>`;\n\t\t}\n\n\t\treturn html`<p class=\"sds-textarea__character-counter\">Du har ${this.counter - currentLength} tegn igjen</p>`;\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLTextAreaElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\ttype(): string {\n\t\treturn 'textarea';\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textareaClasses = {\n\t\t\t'sds-textarea': true,\n\t\t\t'sds-textarea--error': Boolean(this.errorMessage || this.hasTypedTooManyCharacters()),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textareaClasses)}\">\n\t\t\t\t${this.label || this.helpText\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t${this.label ? html`<label for=\"sds-textarea\" class=\"sds-textarea__label\">${this.label}</label>` : nothing}\n\t\t\t\t\t\t\t${this.helpText ? html`<p class=\"sds-textarea__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing}\n\t\t\t\t<div class=\"sds-textarea__input-container\">\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tclass=\"sds-textarea__input\"\n\t\t\t\t\t\tid=\"sds-textarea\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\t.autocomplete=\"${this.autocomplete}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\trows=\"${ifDefined(this.rows)}\"\n\t\t\t\t\t\tcols=\"${ifDefined(this.cols)}\"\n\t\t\t\t\t\twrap=\"${ifDefined(this.wrap)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t></textarea>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing} ${this.renderCharacterCounter()}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textarea': SDSTextArea;\n\t}\n}\n"]}

package/dist/sds-textarea/sds-textarea.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-textarea.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkLlB,CAAC"}
+{"version":3,"file":"sds-textarea.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwLlB,CAAC"}

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

@@ -74,7 +74,7 @@ export const styles = css `
 			resize: vertical;
 
 			&:hover {
-				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-accent-action-hover));
+				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-hover));
 			}
 
 			&:focus-visible {
@@ -84,7 +84,8 @@ export const styles = css `
 			}
 
 			&:active {
-				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-accent-action-active));
+				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-active));
+				--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-main-text-default));
 			}
 		}
 
@@ -133,11 +134,16 @@ export const styles = css `
 			& .sds-textarea__input:active {
 				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-active));
 			}
+
+			& :is(sds-alert) {
+				--sds-alert-padding: 0px;
+			}
 		}
 	}
 
 	:host([readonly]) {
 		--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));
+		--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-subtle));
 		.sds-textarea__input {
 			resize: none;
 		}

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

@@ -1 +1 @@
-{"version":3,"file":"sds-textarea.styles.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-background-default));\n\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-textarea-border-width: var(--sds-textarea-border-width, var(--sds-border-sm));\n\t\t--_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textarea-font-family: var(--sds-textarea-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-font-weight: var(--sds-textarea-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-md));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-md));\n\n\t\t--_sds-textarea-gap: var(--sds-textarea-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textarea-padding-block: var(--sds-textarea-padding-block, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-padding-inline: var(--sds-textarea-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-focus-color: var(--sds-textarea-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textarea-focus-inner-color: var(--sds-textarea-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textarea-focus-spacing: var(--sds-textarea-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textarea {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textarea-gap);\n\t\tfont-family: var(--_sds-textarea-font-family);\n\n\t\t.sds-textarea__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-textarea__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textarea-text-color);\n\t\t\tpadding: var(--_sds-textarea-padding-block) var(--_sds-textarea-padding-inline);\n\t\t\tline-height: var(--_sds-textarea-line-height);\n\t\t\tfont-size: var(--_sds-textarea-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-font-weight);\n\t\t\tfont-family: var(--_sds-textarea-font-family);\n\t\t\tjustify-content: flex-end;\n\t\t\tborder-radius: var(--_sds-textarea-border-radius);\n\t\t\tborder: var(--_sds-textarea-border-width) solid var(--_sds-textarea-border-color);\n\t\t\tbackground: var(--_sds-textarea-background-color);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\twidth: 100%;\n\t\t\tmin-height: var(--_sds-textarea-min-height);\n\t\t\tresize: vertical;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-accent-action-hover));\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-textarea-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textarea-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-accent-action-active));\n\t\t\t}\n\t\t}\n\n\t\t.sds-textarea__label {\n\t\t\tcolor: var(--_sds-textarea-label-text-color);\n\t\t\tdisplay: block;\n\t\t\tfont-size: var(--_sds-textarea-label-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-label-font-weight);\n\t\t\tline-height: var(--_sds-textarea-label-line-height);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textarea__help-text {\n\t\t\tcolor: var(--_sds-textarea-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textarea-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textarea-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t*:has(.sds-textarea__label) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--_sds-textarea-label-gap);\n\t\t}\n\n\t\t.sds-textarea__character-counter {\n\t\t\tcolor: var(--_sds-textarea-counter-text-color);\n\t\t\tfont-size: var(--_sds-textarea-counter-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-counter-font-weight);\n\t\t\tline-height: var(--_sds-textarea-counter-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t&.sds-textarea--error {\n\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-border-default));\n\t\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-alert-danger-text-subtle));\n\n\t\t\t& .sds-textarea__input:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-alert-danger-text-default));\n\t\t\t}\n\n\t\t\t& .sds-textarea__input:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t.sds-textarea__input {\n\t\t\tresize: none;\n\t\t}\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textarea-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-sm));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-sm));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-sm));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-lg));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-lg));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-lg));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
+{"version":3,"file":"sds-textarea.styles.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-background-default));\n\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-textarea-border-width: var(--sds-textarea-border-width, var(--sds-border-sm));\n\t\t--_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textarea-font-family: var(--sds-textarea-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-font-weight: var(--sds-textarea-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-md));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-md));\n\n\t\t--_sds-textarea-gap: var(--sds-textarea-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textarea-padding-block: var(--sds-textarea-padding-block, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-padding-inline: var(--sds-textarea-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-focus-color: var(--sds-textarea-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textarea-focus-inner-color: var(--sds-textarea-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textarea-focus-spacing: var(--sds-textarea-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textarea {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textarea-gap);\n\t\tfont-family: var(--_sds-textarea-font-family);\n\n\t\t.sds-textarea__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-textarea__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textarea-text-color);\n\t\t\tpadding: var(--_sds-textarea-padding-block) var(--_sds-textarea-padding-inline);\n\t\t\tline-height: var(--_sds-textarea-line-height);\n\t\t\tfont-size: var(--_sds-textarea-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-font-weight);\n\t\t\tfont-family: var(--_sds-textarea-font-family);\n\t\t\tjustify-content: flex-end;\n\t\t\tborder-radius: var(--_sds-textarea-border-radius);\n\t\t\tborder: var(--_sds-textarea-border-width) solid var(--_sds-textarea-border-color);\n\t\t\tbackground: var(--_sds-textarea-background-color);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\twidth: 100%;\n\t\t\tmin-height: var(--_sds-textarea-min-height);\n\t\t\tresize: vertical;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-hover));\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-textarea-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textarea-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-active));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-main-text-default));\n\t\t\t}\n\t\t}\n\n\t\t.sds-textarea__label {\n\t\t\tcolor: var(--_sds-textarea-label-text-color);\n\t\t\tdisplay: block;\n\t\t\tfont-size: var(--_sds-textarea-label-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-label-font-weight);\n\t\t\tline-height: var(--_sds-textarea-label-line-height);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textarea__help-text {\n\t\t\tcolor: var(--_sds-textarea-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textarea-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textarea-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t*:has(.sds-textarea__label) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--_sds-textarea-label-gap);\n\t\t}\n\n\t\t.sds-textarea__character-counter {\n\t\t\tcolor: var(--_sds-textarea-counter-text-color);\n\t\t\tfont-size: var(--_sds-textarea-counter-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-counter-font-weight);\n\t\t\tline-height: var(--_sds-textarea-counter-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t&.sds-textarea--error {\n\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-border-default));\n\t\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-alert-danger-text-subtle));\n\n\t\t\t& .sds-textarea__input:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-alert-danger-text-default));\n\t\t\t}\n\n\t\t\t& .sds-textarea__input:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t& :is(sds-alert) {\n\t\t\t\t--sds-alert-padding: 0px;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-subtle));\n\t\t.sds-textarea__input {\n\t\t\tresize: none;\n\t\t}\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textarea-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-sm));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-sm));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-sm));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-lg));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-lg));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-lg));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}

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

@@ -140,7 +140,7 @@ let SDSTextField = class SDSTextField extends LitElement {
 						?disabled="${this.disabled}"
 						?readonly="${this.readOnly}"
 						placeholder="${ifDefined(this.placeholder)}"
-						value="${ifDefined(this.value)}"
+						.value="${this.value ?? ''}"
 						name="${ifDefined(this.name)}"
 						autocomplete="${ifDefined(this.autocomplete)}"
 						?required="${this.required}"
@@ -155,7 +155,7 @@ let SDSTextField = class SDSTextField extends LitElement {
 					/>
 					<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
 				</div>
-				${this.errorMessage ? html `<sds-alert variant="secondary" color="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
+				${this.errorMessage ? html `<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
 			</div>
 		`;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\nimport { SDS_SIZES } from '../types';\n\ntype InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tsize?: InputSize;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: InputType = 'text';\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: AutocompleteTypes;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\t@property({ type: String, reflect: true }) size: InputSize = 'md';\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLInputElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" color=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}
+{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\nimport { SDS_SIZES } from '../types';\n\ntype InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tsize?: InputSize;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: InputType = 'text';\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: AutocompleteTypes;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\t@property({ type: String, reflect: true }) size: InputSize = 'md';\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLInputElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}

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

@@ -9,7 +9,7 @@ export const styles = css `
 		--_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-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-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));
@@ -21,12 +21,12 @@ export const styles = css `
 		--_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-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-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-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-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));
 
@@ -134,11 +134,11 @@ export const styles = css `
 
 	: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-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-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-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-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-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-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)));
@@ -146,11 +146,11 @@ export const styles = css `
 
 	: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-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-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-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-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-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-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));
 	}

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
+{"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-content-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-content-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-content-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-content-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-content-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-content-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-content-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-content-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-content-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"]}