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

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

@@ -1,64 +1,129 @@
 import { css } from 'lit';
 export const styles = css `
+	:host {
+		--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-md));
+		--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));
+
+		--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));
+		--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
+
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-border-subtle));
+		--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));
+		--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));
+
+		--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));
+		--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));
+		--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));
+		--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));
+
+		--_sds-chip-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));
+
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-surface-tinted));
+		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-text-default));
+
+		display: inline-block;
+		box-sizing: border-box;
+	}
+
+	:host(:disabled) {
+		opacity: var(--_sds-chip-disabled-opacity);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	:host(:hover) {
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-secondary-surface-hover));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-secondary-action-default));
+		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-secondary-action-contrast-default));
+	}
+
+	:host(:active) {
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-secondary-surface-active));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-secondary-action-default));
+	}
+
+	:host([checked]) {
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-default));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-default));
+		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
+	}
+
+	:host([checked]:hover) {
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-hover));
+		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
+	}
+
+	:host([checked]:active) {
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-active));
+	}
+
+	:host([size='sm']) {
+		--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
+		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-sm));
+		--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));
+	}
+
+	:host([size='lg']) {
+		--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
+		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-lg));
+		--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));
+	}
+
 	.sds-chip {
 		align-items: center;
 		display: inline-flex;
-		gap: var(--sds-spacing-3);
+		height: var(--_sds-chip-height);
+		gap: var(--_sds-chip-gap);
 		justify-content: center;
-		padding: 6px var(--sds-spacing-4);
+		padding-inline: var(--_sds-chip-padding-inline);
 
-		background-color: var(--sds-color-semantic-surface-action-inverted);
-		border: 2px solid var(--sds-color-semantic-border-action);
-		border-radius: 2rem;
+		background-color: var(--_sds-chip-background-color);
+		border: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);
+		border-radius: var(--_sds-chip-border-radius);
 
-		font-family: var(--sds-typography-font-family);
-		font-size: 1rem;
-		font-weight: 400;
-		line-height: 1.25;
+		font-family: var(--_sds-chip-font-family);
+		font-size: var(--_sds-chip-font-size);
+		font-weight: var(--_sds-chip-font-weight);
+		line-height: var(--_sds-chip-line-height);
 		text-align: center;
+		color: var(--_sds-chip-text-color);
+		box-sizing: border-box;
 
 		user-select: text;
 		cursor: pointer;
 
-		&:has(:checked) {
-			background-color: var(--sds-color-semantic-surface-action-default);
-			border-color: var(--sds-color-semantic-surface-action-default);
-			color: var(--sds-color-semantic-text-on-action);
-		}
-
-		&:has(input[type='checkbox'][disabled], input[type='checkbox']:checked[disabled]) {
-			background-color: var(--sds-color-semantic-surface-disabled);
-			border: 2px solid var(--sds-color-semantic-surface-disabled);
-			color: var(--sds-color-semantic-text-disabled);
-			cursor: not-allowed;
-		}
-
-		&:not(:has([readonly])):hover {
-			background-color: var(--sds-color-semantic-surface-action-hover);
-			border-color: var(--sds-color-semantic-surface-action-hover);
-			color: var(--sds-color-semantic-text-on-action);
-		}
-
-		&:not(:has([readonly])):active {
-			background-color: var(--sds-color-semantic-surface-action-active);
-			border: 2px solid var(--sds-color-semantic-surface-action-active);
-		}
-
 		&:focus-within,
 		&:focus {
-			outline: 2px solid var(--sds-color-semantic-border-focus);
-			outline-offset: 2px;
+			box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);
+			outline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);
+			outline-offset: var(--_sds-chip-focus-outline-offset);
 		}
 
 		&:has([readonly]) {
 			cursor: default;
 		}
 
-		&.sds-chip--small {
-			font-size: 0.875rem;
-			line-height: 1.125rem;
-			padding: var(--sds-spacing-1) var(--sds-spacing-3);
-			gap: var(--sds-spacing-2);
+		&.sds-chip--removable {
+			--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-default));
+			--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
+			--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-default));
+
+			&:hover {
+				--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-hover));
+				--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
+				--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-hover));
+			}
+
+			&:active {
+				--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-active));
+				--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
+				--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-active));
+			}
 		}
 
 		& input[type='checkbox'] {

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

@@ -1 +1 @@
-{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3);\n\t\tjustify-content: center;\n\t\tpadding: 6px var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: 2rem;\n\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tline-height: 1.25;\n\t\ttext-align: center;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:has(:checked) {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-default);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:has(input[type='checkbox'][disabled], input[type='checkbox']:checked[disabled]) {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t&:not(:has([readonly])):hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:not(:has([readonly])):active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--small {\n\t\t\tfont-size: 0.875rem;\n\t\t\tline-height: 1.125rem;\n\t\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t\t\tgap: var(--sds-spacing-2);\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));\n\n\t\t--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-border-subtle));\n\t\t--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));\n\t\t--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-chip-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-surface-tinted));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-text-default));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host(:disabled) {\n\t\topacity: var(--_sds-chip-disabled-opacity);\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-secondary-surface-hover));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-secondary-action-default));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-secondary-action-contrast-default));\n\t}\n\n\t:host(:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-secondary-surface-active));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-secondary-action-default));\n\t}\n\n\t:host([checked]) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-default));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));\n\t}\n\n\t:host([checked]:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-hover));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));\n\t}\n\n\t:host([checked]:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-active));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));\n\t}\n\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\theight: var(--_sds-chip-height);\n\t\tgap: var(--_sds-chip-gap);\n\t\tjustify-content: center;\n\t\tpadding-inline: var(--_sds-chip-padding-inline);\n\n\t\tbackground-color: var(--_sds-chip-background-color);\n\t\tborder: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);\n\t\tborder-radius: var(--_sds-chip-border-radius);\n\n\t\tfont-family: var(--_sds-chip-font-family);\n\t\tfont-size: var(--_sds-chip-font-size);\n\t\tfont-weight: var(--_sds-chip-font-weight);\n\t\tline-height: var(--_sds-chip-line-height);\n\t\ttext-align: center;\n\t\tcolor: var(--_sds-chip-text-color);\n\t\tbox-sizing: border-box;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);\n\t\t\toutline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-chip-focus-outline-offset);\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--removable {\n\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-default));\n\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));\n\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-default));\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-hover));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-hover));\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-active));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-active));\n\t\t\t}\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}

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

@@ -5,10 +5,10 @@ export const styles = css `
 	}
 
 	.sds-detail {
-		font-family: var(--sds-typography-font-family);
+		font-family: var(--sds-typography-body-md-font-family);
 		font-size: 0.75rem;
 		line-height: 1.333;
-		color: var(--sds-color-semantic-text-default);
+		color: var(--sds-color-primary-text-default);
 		margin: 0;
 		max-width: var(--sds-typography-max-line-width);
 		padding: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-detail.styles.js","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-detail {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 0.75rem;\n\t\tline-height: 1.333;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-detail--text {\n\t\tfont-weight: 400;\n\t}\n\n\t.sds-detail--label {\n\t\tfont-weight: 500;\n\t}\n`;\n"]}
+{"version":3,"file":"sds-detail.styles.js","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-detail {\n\t\tfont-family: var(--sds-typography-body-md-font-family);\n\t\tfont-size: 0.75rem;\n\t\tline-height: 1.333;\n\t\tcolor: var(--sds-color-primary-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-detail--text {\n\t\tfont-weight: 400;\n\t}\n\n\t.sds-detail--label {\n\t\tfont-weight: 500;\n\t}\n`;\n"]}

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

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
+import { SDS_SIZES } from '../types';
 type Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-type DisplaySize = 'xl' | 'l' | 'm' | 's' | 'xs';
+type DisplaySize = 'l' | 'm' | 's' | SDS_SIZES;
 export interface SDSHeadingProps {
     level?: Level;
     as?: DisplaySize;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-heading.d.ts","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,KAAK,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAED,qBACa,UAAW,SAAQ,UAAU;IAEzC,OAAgB,MAAM,4BAAY;IAGN,KAAK,EAAE,KAAK,CAAQ;IACpB,EAAE,CAAC,EAAE,WAAW,CAAC;IAEpC,MAAM;CA6Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"sds-heading.d.ts","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAED,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAY;IAES,KAAK,EAAE,KAAK,CAAQ;IACpB,EAAE,CAAC,EAAE,WAAW,CAAC;IAEnD,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/sds-heading/sds-heading.js

@@ -12,44 +12,41 @@ import { styles } from './sds-heading.styles';
 let SDSHeading = class SDSHeading extends LitElement {
     constructor() {
         super(...arguments);
-        // Reactive Props
         this.level = 'h1';
     }
     render() {
         const headingClasses = {
             'sds-heading': true,
             'sds-heading--xl': this.as === 'xl',
-            'sds-heading--l': this.as === 'l',
-            'sds-heading--m': this.as === 'm',
-            'sds-heading--s': this.as === 's',
+            'sds-heading--lg': this.as === 'l' || this.as === 'lg',
+            'sds-heading--md': this.as === 'm' || this.as === 'md',
+            'sds-heading--sm': this.as === 's' || this.as === 'sm',
             'sds-heading--xs': this.as === 'xs',
         };
-        const classes = classMap(headingClasses);
         switch (this.level.toLowerCase()) {
             case 'h1':
-                return html `<h1 class=${classes}><slot></slot></h1>`;
+                return html `<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;
             case 'h2':
-                return html `<h2 class=${classes}><slot></slot></h2>`;
+                return html `<h2 class=${classMap(headingClasses)}><slot></slot></h2>`;
             case 'h3':
-                return html `<h3 class=${classes}><slot></slot></h3>`;
+                return html `<h3 class=${classMap(headingClasses)}><slot></slot></h3>`;
             case 'h4':
-                return html `<h4 class=${classes}><slot></slot></h4>`;
+                return html `<h4 class=${classMap(headingClasses)}><slot></slot></h4>`;
             case 'h5':
-                return html `<h5 class=${classes}><slot></slot></h5>`;
+                return html `<h5 class=${classMap(headingClasses)}><slot></slot></h5>`;
             case 'h6':
-                return html `<h6 class=${classes}><slot></slot></h6>`;
+                return html `<h6 class=${classMap(headingClasses)}><slot></slot></h6>`;
             default:
-                return html `<h1 class=${classes}><slot></slot></h1>`;
+                return html `<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;
         }
     }
 };
-// Styling
 SDSHeading.styles = [styles];
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SDSHeading.prototype, "level", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SDSHeading.prototype, "as", void 0);
 SDSHeading = __decorate([
     guardedCustomElement('sds-heading')

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

@@ -1 +1 @@
-{"version":3,"file":"sds-heading.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAWvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,iBAAiB;QACW,UAAK,GAAU,IAAI,CAAC;IAgCjD,CAAC;IA7BS,MAAM;QACd,MAAM,cAAc,GAAG;YACtB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI;YACnC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI;SACnC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;QAEzC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;YAClC,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD;gBACC,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;QACvD,CAAC;IACF,CAAC;;AAnCD,UAAU;AACM,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAkB;AANjC,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAqCtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-heading.styles';\n\ntype Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\ntype DisplaySize = 'xl' | 'l' | 'm' | 's' | 'xs';\n\nexport interface SDSHeadingProps {\n\tlevel?: Level;\n\tas?: DisplaySize;\n}\n\n@guardedCustomElement('sds-heading')\nexport class SDSHeading extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String }) level: Level = 'h1';\n\t@property({ type: String }) as?: DisplaySize;\n\n\toverride render() {\n\t\tconst headingClasses = {\n\t\t\t'sds-heading': true,\n\t\t\t'sds-heading--xl': this.as === 'xl',\n\t\t\t'sds-heading--l': this.as === 'l',\n\t\t\t'sds-heading--m': this.as === 'm',\n\t\t\t'sds-heading--s': this.as === 's',\n\t\t\t'sds-heading--xs': this.as === 'xs',\n\t\t};\n\n\t\tconst classes = classMap(headingClasses);\n\n\t\tswitch (this.level.toLowerCase()) {\n\t\t\tcase 'h1':\n\t\t\t\treturn html`<h1 class=${classes}><slot></slot></h1>`;\n\t\t\tcase 'h2':\n\t\t\t\treturn html`<h2 class=${classes}><slot></slot></h2>`;\n\t\t\tcase 'h3':\n\t\t\t\treturn html`<h3 class=${classes}><slot></slot></h3>`;\n\t\t\tcase 'h4':\n\t\t\t\treturn html`<h4 class=${classes}><slot></slot></h4>`;\n\t\t\tcase 'h5':\n\t\t\t\treturn html`<h5 class=${classes}><slot></slot></h5>`;\n\t\t\tcase 'h6':\n\t\t\t\treturn html`<h6 class=${classes}><slot></slot></h6>`;\n\t\t\tdefault:\n\t\t\t\treturn html`<h1 class=${classes}><slot></slot></h1>`;\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-heading': SDSHeading;\n\t}\n}\n"]}
+{"version":3,"file":"sds-heading.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAYvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAGqC,UAAK,GAAU,IAAI,CAAC;IA8BhE,CAAC;IA3BS,MAAM;QACd,MAAM,cAAc,GAAG;YACtB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI;YACnC,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI;YACtD,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI;YACtD,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI;YACtD,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI;SACnC,CAAC;QAEF,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;YAClC,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE;gBACC,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;QACxE,CAAC;IACF,CAAC;;AA/Be,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAqB;AACpB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAkB;AAJhD,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAiCtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-heading.styles';\nimport { SDS_SIZES } from '../types';\n\ntype Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\ntype DisplaySize = 'l' | 'm' | 's' | SDS_SIZES;\n\nexport interface SDSHeadingProps {\n\tlevel?: Level;\n\tas?: DisplaySize;\n}\n\n@guardedCustomElement('sds-heading')\nexport class SDSHeading extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) level: Level = 'h1';\n\t@property({ type: String, reflect: true }) as?: DisplaySize;\n\n\toverride render() {\n\t\tconst headingClasses = {\n\t\t\t'sds-heading': true,\n\t\t\t'sds-heading--xl': this.as === 'xl',\n\t\t\t'sds-heading--lg': this.as === 'l' || this.as === 'lg',\n\t\t\t'sds-heading--md': this.as === 'm' || this.as === 'md',\n\t\t\t'sds-heading--sm': this.as === 's' || this.as === 'sm',\n\t\t\t'sds-heading--xs': this.as === 'xs',\n\t\t};\n\n\t\tswitch (this.level.toLowerCase()) {\n\t\t\tcase 'h1':\n\t\t\t\treturn html`<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;\n\t\t\tcase 'h2':\n\t\t\t\treturn html`<h2 class=${classMap(headingClasses)}><slot></slot></h2>`;\n\t\t\tcase 'h3':\n\t\t\t\treturn html`<h3 class=${classMap(headingClasses)}><slot></slot></h3>`;\n\t\t\tcase 'h4':\n\t\t\t\treturn html`<h4 class=${classMap(headingClasses)}><slot></slot></h4>`;\n\t\t\tcase 'h5':\n\t\t\t\treturn html`<h5 class=${classMap(headingClasses)}><slot></slot></h5>`;\n\t\t\tcase 'h6':\n\t\t\t\treturn html`<h6 class=${classMap(headingClasses)}><slot></slot></h6>`;\n\t\t\tdefault:\n\t\t\t\treturn html`<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-heading': SDSHeading;\n\t}\n}\n"]}

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

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

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

@@ -1,7 +1,17 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		--_heading-text-align: left;
+		--_sds-heading-font-family: var(--sds-heading-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-heading-text-color: var(--sds-heading-text-color, var(--sds-color-neutral-text-default));
+		--_sds-heading-max-line-width: var(--sds-heading-max-line-width, var(--sds-typography-max-line-width));
+		--_sds-heading-margin: var(--sds-heading-margin, 0);
+		--_sds-heading-padding: var(--sds-heading-padding, 0);
+		--_sds-heading-text-align: var(--sds-heading-text-align, left);
+
+		--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));
+		--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-bold));
+		--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));
+
 		display: inline-block;
 	}
 
@@ -12,93 +22,130 @@ export const styles = css `
 	h5,
 	h6,
 	.sds-heading {
-		font-family: var(--sds-typography-font-family);
-		color: var(--sds-color-semantic-text-default);
+		color: var(--_sds-heading-text-color);
 		display: inline-block;
-		margin: 0;
-		max-width: var(--sds-typography-max-line-width);
-		padding: 0;
-		text-align: var(--_heading-text-align);
+		font-family: var(--_sds-heading-font-family);
+		font-size: var(--_sds-heading-font-size);
+		font-weight: var(--_sds-heading-font-weight);
+		line-height: var(--_sds-heading-line-height);
+		margin: var(--_sds-heading-margin);
+		max-width: var(--_sds-heading-max-line-width);
+		padding: var(--_sds-heading-padding);
+		text-align: var(--_sds-heading-text-align);
 	}
 
 	h1,
 	.sds-heading--xl {
-		font-size: 2rem;
-		font-weight: 700;
-		line-height: 1.24;
+		--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));
+		--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));
 	}
 
 	@media (min-width: 640px) {
 		h1,
 		.sds-heading--xl {
-			font-size: 2.5rem;
-			font-weight: 700;
-			line-height: 1.4;
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-tablet-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-tablet-line-height));
+		}
+	}
+
+	@media (min-width: 1024px) {
+		h1,
+		.sds-heading--xl {
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-desktop-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-desktop-line-height));
 		}
 	}
 
 	h2,
-	.sds-heading--l {
-		font-size: 1.5rem;
-		font-weight: 500;
-		line-height: 1.333;
+	.sds-heading--lg {
+		--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-mobile-font-size));
+		--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-mobile-line-height));
 	}
 
 	@media (min-width: 640px) {
 		h2,
-		.sds-heading--l {
-			font-size: 2rem;
-			font-weight: 700;
-			line-height: 1.24;
+		.sds-heading--lg {
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-tablet-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-tablet-line-height));
+		}
+	}
+
+	@media (min-width: 1024px) {
+		h2,
+		.sds-heading--lg {
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-desktop-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-desktop-line-height));
 		}
 	}
 
 	h3,
-	.sds-heading--m {
-		font-size: 1.25rem;
-		font-weight: 500;
-		line-height: 1.4;
+	.sds-heading--md {
+		--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));
+		--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));
 	}
 
 	@media (min-width: 640px) {
 		h3,
-		.sds-heading--m {
-			font-size: 1.5rem;
-			font-weight: 500;
-			line-height: 1.333;
+		.sds-heading--md {
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));
+		}
+	}
+
+	@media (min-width: 1024px) {
+		h3,
+		.sds-heading--md {
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));
 		}
 	}
 
 	h4,
-	.sds-heading--s {
-		font-size: 1.125rem;
-		font-weight: 500;
-		line-height: 1.333;
+	.sds-heading--sm {
+		--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-mobile-font-size));
+		--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-semibold));
+		--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-mobile-line-height));
 	}
 
 	@media (min-width: 640px) {
 		h4,
-		.sds-heading--s {
-			font-size: 1.25rem;
-			font-weight: 500;
-			line-height: 1.4;
+		.sds-heading--sm {
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-tablet-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-tablet-line-height));
+		}
+	}
+
+	@media (min-width: 1024px) {
+		h4,
+		.sds-heading--sm {
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-desktop-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-desktop-line-height));
 		}
 	}
 
 	h5,
 	h6,
 	.sds-heading--xs {
-		font-size: 1.063rem;
-		line-height: 1.3529;
+		--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-mobile-font-size));
+		--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-semibold));
+		--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-mobile-line-height));
 	}
 
 	@media (min-width: 640px) {
 		h5,
 		h6,
 		.sds-heading--xs {
-			font-size: 1.125rem;
-			font-weight: 500;
-			line-height: 1.333;
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-tablet-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-tablet-line-height));
+		}
+	}
+
+	@media (min-width: 1024px) {
+		h5,
+		h6,
+		.sds-heading--xs {
+			--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-desktop-font-size));
+			--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-desktop-line-height));
 		}
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-heading.styles.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_heading-text-align: left;\n\t\tdisplay: inline-block;\n\t}\n\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\t.sds-heading {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline-block;\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t\ttext-align: var(--_heading-text-align);\n\t}\n\n\th1,\n\t.sds-heading--xl {\n\t\tfont-size: 2rem;\n\t\tfont-weight: 700;\n\t\tline-height: 1.24;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th1,\n\t\t.sds-heading--xl {\n\t\t\tfont-size: 2.5rem;\n\t\t\tfont-weight: 700;\n\t\t\tline-height: 1.4;\n\t\t}\n\t}\n\n\th2,\n\t.sds-heading--l {\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.333;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th2,\n\t\t.sds-heading--l {\n\t\t\tfont-size: 2rem;\n\t\t\tfont-weight: 700;\n\t\t\tline-height: 1.24;\n\t\t}\n\t}\n\n\th3,\n\t.sds-heading--m {\n\t\tfont-size: 1.25rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.4;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th3,\n\t\t.sds-heading--m {\n\t\t\tfont-size: 1.5rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.333;\n\t\t}\n\t}\n\n\th4,\n\t.sds-heading--s {\n\t\tfont-size: 1.125rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.333;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th4,\n\t\t.sds-heading--s {\n\t\t\tfont-size: 1.25rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.4;\n\t\t}\n\t}\n\n\th5,\n\th6,\n\t.sds-heading--xs {\n\t\tfont-size: 1.063rem;\n\t\tline-height: 1.3529;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th5,\n\t\th6,\n\t\t.sds-heading--xs {\n\t\t\tfont-size: 1.125rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.333;\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-heading.styles.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-heading-font-family: var(--sds-heading-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-heading-text-color: var(--sds-heading-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-heading-max-line-width: var(--sds-heading-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-heading-margin: var(--sds-heading-margin, 0);\n\t\t--_sds-heading-padding: var(--sds-heading-padding, 0);\n\t\t--_sds-heading-text-align: var(--sds-heading-text-align, left);\n\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-bold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));\n\n\t\tdisplay: inline-block;\n\t}\n\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\t.sds-heading {\n\t\tcolor: var(--_sds-heading-text-color);\n\t\tdisplay: inline-block;\n\t\tfont-family: var(--_sds-heading-font-family);\n\t\tfont-size: var(--_sds-heading-font-size);\n\t\tfont-weight: var(--_sds-heading-font-weight);\n\t\tline-height: var(--_sds-heading-line-height);\n\t\tmargin: var(--_sds-heading-margin);\n\t\tmax-width: var(--_sds-heading-max-line-width);\n\t\tpadding: var(--_sds-heading-padding);\n\t\ttext-align: var(--_sds-heading-text-align);\n\t}\n\n\th1,\n\t.sds-heading--xl {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th1,\n\t\t.sds-heading--xl {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th1,\n\t\t.sds-heading--xl {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-desktop-line-height));\n\t\t}\n\t}\n\n\th2,\n\t.sds-heading--lg {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th2,\n\t\t.sds-heading--lg {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th2,\n\t\t.sds-heading--lg {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-desktop-line-height));\n\t\t}\n\t}\n\n\th3,\n\t.sds-heading--md {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th3,\n\t\t.sds-heading--md {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th3,\n\t\t.sds-heading--md {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t}\n\t}\n\n\th4,\n\t.sds-heading--sm {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-semibold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th4,\n\t\t.sds-heading--sm {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th4,\n\t\t.sds-heading--sm {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-desktop-line-height));\n\t\t}\n\t}\n\n\th5,\n\th6,\n\t.sds-heading--xs {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-semibold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th5,\n\t\th6,\n\t\t.sds-heading--xs {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th5,\n\t\th6,\n\t\t.sds-heading--xs {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}