@politiet/sheriff-web-components 2.6.0 → 2.7.0

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

@@ -6,6 +6,9 @@ export const styles = css `
 		--_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-text-default, var(--sds-color-neutral-text-default)));
+		--_sds-text-text-decoration: var(--sds-text-text-decoration, inherit);
+		--_sds-text-text-decoration-thickness: var(--sds-text-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));
+		--_sds-text-text-underline-offset: var(--sds-text-text-underline-offset, var(--sds-typography-link-text-underline-offset));
 
 		display: block;
 		box-sizing: border-box;
@@ -17,6 +20,10 @@ export const styles = css `
 		font-weight: var(--_sds-text-font-weight);
 		line-height: var(--_sds-text-line-height);
 		color: var(--_sds-text-color);
+		display: inherit;
+		text-decoration: var(--_sds-text-text-decoration);
+		text-decoration-thickness: var(--_sds-text-text-decoration-thickness);
+		text-underline-offset: var(--_sds-text-text-underline-offset);
 		margin: 0;
 		padding: 0;
 		max-width: var(--sds-typography-max-line-width);
@@ -45,36 +52,60 @@ export const styles = css `
 		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-mobile-line-height));
 	}
 
+	:host([strong][tall]) {
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-mobile-line-height));
+	}
+
 	/* Extra small variants */
 	:host([size='xs']) {
-		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-mobile-font-size));
-		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-mobile-font-weight));
-		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-mobile-line-height));
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-mobile-line-height));
 	}
 
 	:host([size='xs'][strong]) {
-		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-mobile-font-weight));
-		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-mobile-font-size));
-		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-mobile-line-height));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-mobile-font-weight));
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-mobile-font-size));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-mobile-line-height));
+	}
+
+	:host([size='xs'][tall]) {
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-mobile-line-height));
+	}
+
+	:host([size='xs'][strong][tall]) {
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-mobile-line-height));
 	}
 
 	/* Small variants */
 	:host([size='sm']) {
-		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-mobile-font-size));
-		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-mobile-font-weight));
-		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-mobile-line-height));
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-mobile-line-height));
 	}
 
 	:host([size='sm'][strong]) {
-		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-mobile-font-size));
-		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-mobile-font-weight));
-		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-mobile-line-height));
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-mobile-line-height));
 	}
 
 	:host([size='sm'][tall]) {
-		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-mobile-font-size));
-		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-mobile-font-weight));
-		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-mobile-line-height));
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-mobile-line-height));
+	}
+
+	:host([size='sm'][strong][tall]) {
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-mobile-line-height));
 	}
 
 	/* Large variants */
@@ -104,9 +135,27 @@ export const styles = css `
 
 	/* Extra large variant */
 	:host([size='xl']) {
-		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-mobile-font-size));
-		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-mobile-font-weight));
-		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-mobile-line-height));
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-mobile-line-height));
+	}
+
+	:host([size='xl'][strong]) {
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-mobile-line-height));
+	}
+
+	:host([size='xl'][tall]) {
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-mobile-line-height));
+	}
+
+	:host([size='xl'][strong][tall]) {
+		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-mobile-font-size));
+		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-mobile-font-weight));
+		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-mobile-line-height));
 	}
 
 	/* Tablet */
@@ -130,36 +179,60 @@ export const styles = css `
 			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-tablet-line-height));
 		}
 
+		:host([strong][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-tablet-line-height));
+		}
+
 		/* Extra small variants */
 		:host([size='xs']) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-tablet-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-tablet-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-tablet-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tablet-line-height));
 		}
 
 		:host([size='xs'][strong]) {
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-tablet-font-weight));
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-tablet-font-size));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-tablet-line-height));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tablet-font-weight));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tablet-font-size));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tablet-line-height));
+		}
+
+		:host([size='xs'][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-tablet-line-height));
+		}
+
+		:host([size='xs'][strong][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-tablet-line-height));
 		}
 
 		/* Small variants */
 		:host([size='sm']) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tablet-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tablet-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tablet-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tablet-line-height));
 		}
 
 		:host([size='sm'][strong]) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-tablet-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-tablet-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-tablet-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tablet-line-height));
 		}
 
 		:host([size='sm'][tall]) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-tablet-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-tablet-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-tablet-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-tablet-line-height));
+		}
+
+		:host([size='sm'][strong][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-tablet-line-height));
 		}
 
 		/* Large variants */
@@ -189,15 +262,39 @@ export const styles = css `
 
 		/* Extra large variant */
 		:host([size='xl']) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-tablet-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-tablet-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-tablet-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tablet-line-height));
+		}
+
+		:host([size='xl'][strong]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tablet-line-height));
+		}
+
+		:host([size='xl'][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-tablet-line-height));
+		}
+
+		:host([size='xl'][strong][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-tablet-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-tablet-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-tablet-line-height));
 		}
 	}
 
 	/* Desktop */
 	@media (min-width: 1024px) {
 		/* Medium variants */
+		:host {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-desktop-line-height));
+		}
+
 		:host([strong]) {
 			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-desktop-font-size));
 			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));
@@ -210,36 +307,60 @@ export const styles = css `
 			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-desktop-line-height));
 		}
 
+		:host([strong][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-desktop-line-height));
+		}
+
 		/* Extra small variants */
 		:host([size='xs']) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-desktop-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-desktop-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-desktop-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-desktop-line-height));
 		}
 
 		:host([size='xs'][strong]) {
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-desktop-font-weight));
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-desktop-font-size));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-desktop-line-height));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-desktop-font-weight));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-desktop-font-size));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-desktop-line-height));
+		}
+
+		:host([size='xs'][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-desktop-line-height));
+		}
+
+		:host([size='xs'][strong][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-desktop-line-height));
 		}
 
 		/* Small variants */
 		:host([size='sm']) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-desktop-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-desktop-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-desktop-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-desktop-line-height));
 		}
 
 		:host([size='sm'][strong]) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-desktop-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-desktop-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-desktop-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-desktop-line-height));
 		}
 
 		:host([size='sm'][tall]) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-desktop-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-desktop-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-desktop-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-desktop-line-height));
+		}
+
+		:host([size='sm'][strong][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-desktop-line-height));
 		}
 
 		/* Large variants */
@@ -269,9 +390,27 @@ export const styles = css `
 
 		/* Extra large variant */
 		:host([size='xl']) {
-			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-desktop-font-size));
-			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-desktop-font-weight));
-			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-desktop-line-height));
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-desktop-line-height));
+		}
+
+		:host([size='xl'][strong]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-desktop-line-height));
+		}
+
+		:host([size='xl'][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-desktop-line-height));
+		}
+
+		:host([size='xl'][strong][tall]) {
+			--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-desktop-font-size));
+			--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-desktop-font-weight));
+			--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-desktop-line-height));
 		}
 	}
 `;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRxB,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-text-default, var(--sds-color-neutral-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:host([data-palette]) {\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ZxB,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-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-text-text-decoration: var(--sds-text-text-decoration, inherit);\n\t\t--_sds-text-text-decoration-thickness: var(--sds-text-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));\n\t\t--_sds-text-text-underline-offset: var(--sds-text-text-underline-offset, var(--sds-typography-link-text-underline-offset));\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\tdisplay: inherit;\n\t\ttext-decoration: var(--_sds-text-text-decoration);\n\t\ttext-decoration-thickness: var(--_sds-text-text-decoration-thickness);\n\t\ttext-underline-offset: var(--_sds-text-text-underline-offset);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\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:host([strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-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-detail-xs-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-xs-strong-mobile-font-weight));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-mobile-line-height));\n\t}\n\n\t:host([size='xs'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-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-detail-sm-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-sm-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-sm-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-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-leadtext-xl-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-mobile-line-height));\n\t}\n\n\t:host([size='xl'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-mobile-line-height));\n\t}\n\n\t:host([size='xl'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-mobile-line-height));\n\t}\n\n\t:host([size='xl'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-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:host([strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-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-detail-xs-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-xs-strong-tablet-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-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-detail-sm-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-sm-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-sm-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-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-leadtext-xl-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-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 {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-desktop-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-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:host([strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-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-detail-xs-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-xs-strong-desktop-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-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-detail-sm-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-sm-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-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-detail-sm-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-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-leadtext-xl-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}

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

@@ -1,38 +1,33 @@
 import { LitElement } from 'lit';
+import type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';
 import '../sds-alert/sds-alert';
 import '../sds-icon/sds-icon';
 import { SDS_SIZES } from '../types';
 type InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
-export interface SDSTextAreaProps {
-    value?: string;
-    name?: string;
+export interface SDSTextAreaProps extends SDSFormControlAttributes {
+    autocomplete?: HTMLTextAreaElement['autocomplete'];
+    cols?: number;
+    counter?: number;
+    'error-message'?: string;
+    'help-text'?: string;
     label?: string;
+    maxlength?: number;
+    minlength?: number;
     placeholder?: string;
-    'help-text'?: string;
-    'error-message'?: string;
-    disabled?: boolean;
-    readonly?: boolean;
-    autocomplete?: HTMLTextAreaElement['autocomplete'];
     required?: boolean;
     rows?: number;
-    cols?: number;
-    wrap?: 'hard' | 'soft';
-    minlength?: number;
-    maxlength?: number;
-    counter?: number;
     size?: InputSize;
+    value?: string;
+    wrap?: 'hard' | 'soft';
 }
-declare const SDSTextArea_base: import("../mixins/types").Constructable<import("../mixins/sds-delegate-interaction-mixin").DelegateInteractionMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
+declare const SDSTextArea_base: import("../mixins/types").Constructable<import("../mixins/sds-delegate-interaction-mixin").DelegateInteractionMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-form-control-mixin").SDSFormControlMixinInterface> & typeof LitElement;
 export declare class SDSTextArea extends SDSTextArea_base {
     static styles: import("lit").CSSResult[];
     value?: string;
-    name?: SDSTextAreaProps['name'];
     label?: SDSTextAreaProps['label'];
     placeholder?: SDSTextAreaProps['placeholder'];
     helpText?: SDSTextAreaProps['help-text'];
     errorMessage?: SDSTextAreaProps['error-message'];
-    disabled: SDSTextAreaProps['disabled'];
-    readOnly: SDSTextAreaProps['readonly'];
     autocomplete?: SDSTextAreaProps['autocomplete'];
     required: SDSTextAreaProps['required'];
     rows?: SDSTextAreaProps['rows'];
@@ -43,11 +38,7 @@ export declare class SDSTextArea extends SDSTextArea_base {
     counter?: SDSTextAreaProps['counter'];
     size: SDSTextAreaProps['size'];
     control: HTMLTextAreaElement;
-    static formAssociated: boolean;
-    readonly internals: ElementInternals;
-    static shadowRootOptions: ShadowRootInit;
     private _defaultValue;
-    constructor();
     connectedCallback(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     private updateValidity;

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

@@ -10,14 +10,12 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-textarea.styles';
-import { SDSDelegateInteractionMixin, SDSEventDispatcherMixin } from '../mixins';
+import { SDSDelegateInteractionMixin, SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';
 import '../sds-alert/sds-alert';
 import '../sds-icon/sds-icon';
-let SDSTextArea = class SDSTextArea extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(LitElement)) {
+let SDSTextArea = class SDSTextArea extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {
     constructor() {
-        super();
-        this.disabled = false;
-        this.readOnly = false;
+        super(...arguments);
         this.required = false;
         this.size = 'md';
         this._defaultValue = null;
@@ -46,7 +44,6 @@ let SDSTextArea = class SDSTextArea extends SDSDelegateInteractionMixin(SDSEvent
             this.updateValidity();
             this.dispatchSheriffEvent('blur');
         };
-        this.internals = this.attachInternals();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -134,16 +131,18 @@ let SDSTextArea = class SDSTextArea extends SDSDelegateInteractionMixin(SDSEvent
         this.updateValidity();
     }
     render() {
+        const isInvalid = Boolean(this.errorMessage || this.hasTypedTooManyCharacters());
         const textareaClasses = {
             'sds-textarea': true,
-            'sds-textarea--error': Boolean(this.errorMessage || this.hasTypedTooManyCharacters()),
+            'sds-textarea--error': isInvalid,
         };
+        const describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;
         return html `
 			<div class="${classMap(textareaClasses)}">
 				${this.label || this.helpText
             ? html `<div>
 							${this.label ? html `<label for="sds-textarea" class="sds-textarea__label">${this.label}</label>` : nothing}
-							${this.helpText ? html `<p class="sds-textarea__help-text">${this.helpText}</p>` : nothing}
+							${this.helpText ? html `<p id="help-text" class="sds-textarea__help-text">${this.helpText}</p>` : nothing}
 						</div>`
             : nothing}
 				<div class="sds-textarea__input-container">
@@ -162,6 +161,8 @@ let SDSTextArea = class SDSTextArea extends SDSDelegateInteractionMixin(SDSEvent
 						wrap="${ifDefined(this.wrap)}"
 						minlength="${ifDefined(this.minlength)}"
 						maxlength="${ifDefined(this.maxlength)}"
+						aria-describedby="${ifDefined(describedBy)}"
+						aria-invalid="${isInvalid ? 'true' : 'false'}"
 						@input="${this._handleInputChange}"
 						@change="${this._handleInputChange}"
 						@select="${this._handleSelect}"
@@ -169,24 +170,16 @@ let SDSTextArea = class SDSTextArea extends SDSDelegateInteractionMixin(SDSEvent
 						@blur="${this._handleBlur}"
 					></textarea>
 				</div>
-				${this.errorMessage ? html `<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing} ${this.renderCharacterCounter()}
+				${this.errorMessage ? html `<sds-alert id="error-message" variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing} ${this.renderCharacterCounter()}
 			</div>
 		`;
     }
 };
 // Styling
 SDSTextArea.styles = [styles];
-SDSTextArea.formAssociated = true;
-SDSTextArea.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
 __decorate([
     property({ type: String })
 ], SDSTextArea.prototype, "value", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextArea.prototype, "name", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SDSTextArea.prototype, "label", void 0);
@@ -199,12 +192,6 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'error-message', reflect: true })
 ], SDSTextArea.prototype, "errorMessage", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SDSTextArea.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'readonly', reflect: true })
-], SDSTextArea.prototype, "readOnly", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SDSTextArea.prototype, "autocomplete", void 0);