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

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

@@ -1,57 +1,82 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		display: inline-flex;
-		contain: layout style;
+		--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-default));
+		--_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-neutral-text-default));
+
+		--_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);
+
+		--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-default));
+		--_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));
+		--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));
+
+		--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));
+		--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-md));
+
+		--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));
+		--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));
+		--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-md));
+		--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-md));
+
+		--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));
+		--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-md));
+		--_sds-switch-button-gap: var(--sds-switch-button-gap, var(--sds-spacing-4xs));
+		--_sds-switch-button-position: var(--sds-switch-button-position, calc(var(--_sds-switch-button-gap) - var(--_sds-switch-border-width)));
+		--_sds-switch-button-radius: var(--sds-switch-button-radius, var(--sds-radius-full));
+
+		--_sds-switch-focus-outline-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));
+		--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));
+		--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));
+		--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));
+
+		--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));
+
 		box-sizing: border-box;
-		align-items: center;
-		justify-content: space-between;
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
-	:host(:disabled),
-	:host(:disabled) * {
+	:host([readonly]) {
+		--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));
+		--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));
+		--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));
+		cursor: default;
 		pointer-events: none;
 	}
 
-	:host(:disabled) .sds-switch__input:checked::before {
-		content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23C4C6C7' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>");
+	:host([disabled]) {
+		opacity: var(--_sds-switch-disabled-opacity);
+		pointer-events: none;
 	}
 
-	:host(:disabled) .sds-switch__input:not(:checked)::before {
-		display: none;
+	:host([size='s']),
+	:host([size='sm']) {
+		--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));
+		--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));
+		--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-sm));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-sm));
 	}
 
-	:host(:disabled) .sds-switch__label {
-		color: var(--sds-color-semantic-text-disabled);
+	:host([size='l']),
+	:host([size='lg']) {
+		--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));
+		--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));
+		--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-lg));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 
 	.sds-switch {
-		--_switch-motion-duration: 200ms;
-		--_switch-height: 32px;
-		--_switch-width: 60px;
-		--_switch-padding: 8px;
-		--_switch-icon-size: calc(var(--_switch-height) - (2 * var(--_switch-padding)));
-
 		display: flex;
-		gap: 0.5rem;
-	}
-
-	.sds-switch--small {
-		--_switch-height: 24px;
-		--_switch-width: 48px;
-		--_switch-padding: 6px;
-	}
-
-	.sds-switch:has(.sds-switch__input:checked) {
-		--_switch-padding: 6px;
-	}
-
-	.sds-switch--small:has(.sds-switch__input:checked) {
-		--_switch-padding: 4px;
+		flex-direction: row;
+		align-items: center;
+		gap: var(--_sds-switch-gap);
+		font-family: var(--_sds-switch-font-family);
 	}
 
 	.sds-switch__label {
@@ -59,11 +84,11 @@ export const styles = css `
 		align-items: center;
 		cursor: pointer;
 		user-select: none;
-		color: var(--sds-color-semantic-text-default);
-		font-family: var(--sds-typography-font-family);
-		font-size: 1rem;
-		font-weight: 400;
-		line-height: 1.25;
+		gap: var(--_sds-switch-icon-gap);
+		color: var(--_sds-switch-text-color);
+		font-size: var(--_sds-switch-font-size);
+		font-weight: var(--_sds-switch-font-weight);
+		line-height: var(--_sds-switch-line-height);
 	}
 
 	.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {
@@ -76,50 +101,53 @@ export const styles = css `
 	}
 
 	.sds-switch__input {
-		--_switch-icon-position: var(--_switch-padding);
-
 		appearance: none;
+		position: relative;
 		cursor: pointer;
 		user-select: none;
-
-		inline-size: var(--_switch-width);
-		block-size: var(--_switch-height);
 		margin: 0;
 
-		flex-shrink: 0;
-		display: grid;
-		align-items: center;
-		grid: [track] 1fr / [track] 1fr;
+		width: var(--_sds-switch-width);
+		height: var(--_sds-switch-height);
+
+		background-color: var(--_sds-switch-background-color);
+		border: var(--_sds-switch-border-width) solid var(--_sds-switch-border-color);
+		border-radius: var(--_sds-switch-border-radius);
 
-		transition: background-color var(--_switch-motion-duration);
-		border-radius: 1rem;
-		background-color: var(--sds-color-global-gray-300);
+		transition: background-color var(--_sds-switch-transition-time) ease;
 	}
 
 	.sds-switch__input::before {
 		content: '';
-		grid-area: track;
-		inline-size: var(--_switch-icon-size);
-		block-size: var(--_switch-icon-size);
-
-		background-color: var(--sds-color-semantic-border-default);
-		transition: transform var(--_switch-motion-duration);
-		border-radius: 50%;
-		transform: translateX(var(--_switch-icon-position));
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%) translateX(var(--_sds-switch-button-position));
+
+		width: var(--_sds-switch-button-size);
+		height: var(--_sds-switch-button-size);
+
+		background-color: var(--_sds-switch-button-color);
+		border-radius: var(--_sds-switch-button-radius);
+
+		transition:
+			transform var(--_sds-switch-transition-time) ease,
+			background-color var(--_sds-switch-transition-time) ease;
 	}
 
 	.sds-switch__input:focus-visible {
-		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-switch-focus-inner-color);
+		outline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);
+		outline-offset: var(--_sds-switch-focus-outline-offset);
 	}
 
-	.sds-switch__input:checked {
-		--_switch-icon-position: calc(var(--_switch-width) - var(--_switch-icon-size) - var(--_switch-padding));
+	.sds-switch__input:checked:not([readonly]) {
+		--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-accent-action-default));
+		--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-accent-action-default));
+		--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));
 	}
 
 	.sds-switch__input:checked::before {
-		content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>");
-		background-color: var(--sds-color-semantic-surface-default);
+		--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));
 	}
 `;
 //# sourceMappingURL=sds-switch.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline-flex;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host(:disabled),\n\t:host(:disabled) * {\n\t\tpointer-events: none;\n\t}\n\n\t:host(:disabled) .sds-switch__input:checked::before {\n\t\tcontent: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23C4C6C7' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>\");\n\t}\n\n\t:host(:disabled) .sds-switch__input:not(:checked)::before {\n\t\tdisplay: none;\n\t}\n\n\t:host(:disabled) .sds-switch__label {\n\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t}\n\n\t.sds-switch {\n\t\t--_switch-motion-duration: 200ms;\n\t\t--_switch-height: 32px;\n\t\t--_switch-width: 60px;\n\t\t--_switch-padding: 8px;\n\t\t--_switch-icon-size: calc(var(--_switch-height) - (2 * var(--_switch-padding)));\n\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\t}\n\n\t.sds-switch--small {\n\t\t--_switch-height: 24px;\n\t\t--_switch-width: 48px;\n\t\t--_switch-padding: 6px;\n\t}\n\n\t.sds-switch:has(.sds-switch__input:checked) {\n\t\t--_switch-padding: 6px;\n\t}\n\n\t.sds-switch--small:has(.sds-switch__input:checked) {\n\t\t--_switch-padding: 4px;\n\t}\n\n\t.sds-switch__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tcolor: var(--sds-color-semantic-text-default);\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}\n\n\t.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\twidth: 1px;\n\t}\n\n\t.sds-switch__input {\n\t\t--_switch-icon-position: var(--_switch-padding);\n\n\t\tappearance: none;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\n\t\tinline-size: var(--_switch-width);\n\t\tblock-size: var(--_switch-height);\n\t\tmargin: 0;\n\n\t\tflex-shrink: 0;\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tgrid: [track] 1fr / [track] 1fr;\n\n\t\ttransition: background-color var(--_switch-motion-duration);\n\t\tborder-radius: 1rem;\n\t\tbackground-color: var(--sds-color-global-gray-300);\n\t}\n\n\t.sds-switch__input::before {\n\t\tcontent: '';\n\t\tgrid-area: track;\n\t\tinline-size: var(--_switch-icon-size);\n\t\tblock-size: var(--_switch-icon-size);\n\n\t\tbackground-color: var(--sds-color-semantic-border-default);\n\t\ttransition: transform var(--_switch-motion-duration);\n\t\tborder-radius: 50%;\n\t\ttransform: translateX(var(--_switch-icon-position));\n\t}\n\n\t.sds-switch__input:focus-visible {\n\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\toutline-offset: 2px;\n\t}\n\n\t.sds-switch__input:checked {\n\t\t--_switch-icon-position: calc(var(--_switch-width) - var(--_switch-icon-size) - var(--_switch-padding));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\tcontent: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>\");\n\t\tbackground-color: var(--sds-color-semantic-surface-default);\n\t}\n`;\n"]}
+{"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-default));\n\t\t--_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);\n\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));\n\t\t--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));\n\t\t--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-md));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-md));\n\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-md));\n\t\t--_sds-switch-button-gap: var(--sds-switch-button-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-button-position: var(--sds-switch-button-position, calc(var(--_sds-switch-button-gap) - var(--_sds-switch-border-width)));\n\t\t--_sds-switch-button-radius: var(--sds-switch-button-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-focus-outline-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-switch-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='s']),\n\t:host([size='sm']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='l']),\n\t:host([size='lg']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n\n\t.sds-switch {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-switch-gap);\n\t\tfont-family: var(--_sds-switch-font-family);\n\t}\n\n\t.sds-switch__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tgap: var(--_sds-switch-icon-gap);\n\t\tcolor: var(--_sds-switch-text-color);\n\t\tfont-size: var(--_sds-switch-font-size);\n\t\tfont-weight: var(--_sds-switch-font-weight);\n\t\tline-height: var(--_sds-switch-line-height);\n\t}\n\n\t.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\twidth: 1px;\n\t}\n\n\t.sds-switch__input {\n\t\tappearance: none;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tmargin: 0;\n\n\t\twidth: var(--_sds-switch-width);\n\t\theight: var(--_sds-switch-height);\n\n\t\tbackground-color: var(--_sds-switch-background-color);\n\t\tborder: var(--_sds-switch-border-width) solid var(--_sds-switch-border-color);\n\t\tborder-radius: var(--_sds-switch-border-radius);\n\n\t\ttransition: background-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%) translateX(var(--_sds-switch-button-position));\n\n\t\twidth: var(--_sds-switch-button-size);\n\t\theight: var(--_sds-switch-button-size);\n\n\t\tbackground-color: var(--_sds-switch-button-color);\n\t\tborder-radius: var(--_sds-switch-button-radius);\n\n\t\ttransition:\n\t\t\ttransform var(--_sds-switch-transition-time) ease,\n\t\t\tbackground-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input:focus-visible {\n\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-switch-focus-inner-color);\n\t\toutline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);\n\t\toutline-offset: var(--_sds-switch-focus-outline-offset);\n\t}\n\n\t.sds-switch__input:checked:not([readonly]) {\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-accent-action-default));\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-accent-action-default));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\t--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));\n\t}\n`;\n"]}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { SDS_COLOR_PALETTES, SDS_SIZES } from '../types';
+type TagColor = Extract<SDS_COLOR_PALETTES, 'neutral' | 'primary' | 'info' | 'success' | 'attention' | 'warning' | 'danger'> | 'danger-critical';
+type TagSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
+export interface SDSTagProps {
+    color?: TagColor;
+    size?: TagSize;
+}
+export declare class SDSTag extends LitElement {
+    static styles: import("lit").CSSResult[];
+    color: TagColor;
+    size: TagSize;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-tag': SDSTag;
+    }
+}
+export {};
+//# sourceMappingURL=sds-tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-tag.d.ts","sourceRoot":"","sources":["../../src/sds-tag/sds-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,QAAQ,GAAG,OAAO,CAAC,kBAAkB,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG,iBAAiB,CAAC;AACjJ,KAAK,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEtD,MAAM,WAAW,WAAW;IAC3B,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qBACa,MAAO,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAAY;IAES,KAAK,EAAE,QAAQ,CAAa;IAC5B,IAAI,EAAE,OAAO,CAAQ;IAEvD,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,SAAS,EAAE,MAAM,CAAC;KAClB;CACD"}

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

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { styles } from './sds-tag.styles';
+let SDSTag = class SDSTag extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = 'neutral';
+        this.size = 'md';
+    }
+    render() {
+        const tagClasses = {
+            'sds-tag': true,
+        };
+        return html `<span class="${classMap(tagClasses)}">
+			<slot></slot>
+		</span>`;
+    }
+};
+SDSTag.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTag.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTag.prototype, "size", void 0);
+SDSTag = __decorate([
+    guardedCustomElement('sds-tag')
+], SDSTag);
+export { SDSTag };
+//# sourceMappingURL=sds-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-tag.js","sourceRoot":"","sources":["../../src/sds-tag/sds-tag.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,kBAAkB,CAAC;AAYnC,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAGqC,UAAK,GAAa,SAAS,CAAC;QAC5B,SAAI,GAAY,IAAI,CAAC;IAWjE,CAAC;IATS,MAAM;QACd,MAAM,UAAU,GAAG;YAClB,SAAS,EAAE,IAAI;SACf,CAAC;QAEF,OAAO,IAAI,CAAA,gBAAgB,QAAQ,CAAC,UAAU,CAAC;;UAEvC,CAAC;IACV,CAAC;;AAbe,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA6B;AAC5B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAsB;AAJpD,MAAM;IADlB,oBAAoB,CAAC,SAAS,CAAC;GACnB,MAAM,CAelB","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-tag.styles';\nimport { SDS_COLOR_PALETTES, SDS_SIZES } from '../types';\n\ntype TagColor = Extract<SDS_COLOR_PALETTES, 'neutral' | 'primary' | 'info' | 'success' | 'attention' | 'warning' | 'danger'> | 'danger-critical';\ntype TagSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSTagProps {\n\tcolor?: TagColor;\n\tsize?: TagSize;\n}\n\n@guardedCustomElement('sds-tag')\nexport class SDSTag extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) color: TagColor = 'neutral';\n\t@property({ type: String, reflect: true }) size: TagSize = 'md';\n\n\toverride render() {\n\t\tconst tagClasses = {\n\t\t\t'sds-tag': true,\n\t\t};\n\n\t\treturn html`<span class=\"${classMap(tagClasses)}\">\n\t\t\t<slot></slot>\n\t\t</span>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-tag': SDSTag;\n\t}\n}\n"]}

package/dist/sds-tag/sds-tag.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-tag.styles.d.ts.map

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

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

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

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-neutral-surface-tinted));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-neutral-text-default));
+
+		--_sds-tag-font-family: var(--sds-tag-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-tag-font-weight: var(--sds-tag-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-md));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-md));
+
+		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-md));
+		--_sds-tag-gap: var(--sds-tag-gap, var(--sds-spacing--zero));
+		--_sds-tag-padding-inline: var(--sds-tag-padding-inline, var(--sds-spacing-3xs));
+		--_sds-tag-border-radius: var(--sds-tag-border-radius, var(--sds-radius-xs));
+
+		display: inline-block;
+		box-sizing: border-box;
+	}
+
+	.sds-tag {
+		height: var(--_sds-tag-height);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--_sds-tag-gap);
+		padding-inline: var(--_sds-tag-padding-inline);
+
+		color: var(--_sds-tag-text-color);
+		background-color: var(--_sds-tag-background-color);
+		border-radius: var(--_sds-tag-border-radius);
+
+		font-family: var(--_sds-tag-font-family);
+		font-size: var(--_sds-tag-font-size);
+		font-weight: var(--_sds-tag-font-weight);
+		line-height: var(--_sds-tag-line-height);
+		text-align: center;
+
+		user-select: text;
+	}
+
+	:host([color='primary']) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-primary-surface-tinted));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-primary-text-default));
+	}
+
+	:host([color='info']) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-info-surface-tinted));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-info-text-default));
+	}
+
+	:host([color='success']) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-success-surface-tinted));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-success-text-default));
+	}
+
+	:host([color='attention']) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-attention-surface-hover));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-attention-text-default));
+	}
+
+	:host([color='warning']) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-warning-surface-hover));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-warning-text-default));
+	}
+
+	:host([color='danger']) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-surface-hover));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-text-default));
+	}
+
+	:host([color='danger-critical']) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-action-default));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-action-contrast-default));
+	}
+
+	:host([size='sm']) {
+		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-sm));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-sm));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-sm));
+	}
+
+	:host([size='lg']) {
+		color: red;
+		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-lg));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-lg));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-lg));
+	}
+`;
+//# sourceMappingURL=sds-tag.styles.js.map

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

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

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

@@ -1,11 +1,16 @@
 import { LitElement } from 'lit';
-type Size = 'l' | 'm' | 's';
+import { SDS_SIZES } from '../types';
+type Size = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
 export interface SDSTextProps {
     size?: Size;
+    strong?: boolean;
+    tall?: boolean;
 }
 export declare class SDSText extends LitElement {
     static styles: import("lit").CSSResult[];
     size: Size;
+    strong: boolean;
+    tall: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"sds-text.d.ts","sourceRoot":"","sources":["../../src/sds-text/sds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5B,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;CACZ;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAGN,IAAI,EAAE,IAAI,CAAO;IAEpC,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"sds-text.d.ts","sourceRoot":"","sources":["../../src/sds-text/sds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEnD,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAGS,IAAI,EAAE,IAAI,CAAQ;IACjB,MAAM,EAAE,OAAO,CAAS;IACxB,IAAI,EAAE,OAAO,CAAS;IAEzD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

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

@@ -6,31 +6,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-text.styles';
 let SDSText = class SDSText extends LitElement {
     constructor() {
         super(...arguments);
         // Reactive Props
-        this.size = 'l';
+        this.size = 'md';
+        this.strong = false;
+        this.tall = false;
     }
     render() {
-        const styleClasses = {
-            'sds-text': true,
-            'sds-text--l': this.size === 'l',
-            'sds-text--m': this.size === 'm',
-            'sds-text--s': this.size === 's',
-        };
-        const classes = classMap(styleClasses);
-        return html `<p class=${classes}><slot></slot></p>`;
+        return html `<p><slot></slot></p>`;
     }
 };
 // Styling
 SDSText.styles = [styles];
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SDSText.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSText.prototype, "strong", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSText.prototype, "tall", void 0);
 SDSText = __decorate([
     guardedCustomElement('sds-text')
 ], SDSText);

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

@@ -1 +1 @@
-{"version":3,"file":"sds-text.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.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,mBAAmB,CAAC;AASpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIN,iBAAiB;QACW,SAAI,GAAS,GAAG,CAAC;IAc9C,CAAC;IAZS,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,UAAU,EAAE,IAAI;YAChB,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YAChC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YAChC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;SAChC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,IAAI,CAAA,YAAY,OAAO,oBAAoB,CAAC;IACpD,CAAC;;AAjBD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAkB;AALjC,OAAO;IADnB,oBAAoB,CAAC,UAAU,CAAC;GACpB,OAAO,CAmBnB","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-text.styles';\n\ntype Size = 'l' | 'm' | 's';\n\nexport interface SDSTextProps {\n\tsize?: Size;\n}\n\n@guardedCustomElement('sds-text')\nexport class SDSText extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String }) size: Size = 'l';\n\n\toverride render() {\n\t\tconst styleClasses = {\n\t\t\t'sds-text': true,\n\t\t\t'sds-text--l': this.size === 'l',\n\t\t\t'sds-text--m': this.size === 'm',\n\t\t\t'sds-text--s': this.size === 's',\n\t\t};\n\n\t\tconst classes = classMap(styleClasses);\n\n\t\treturn html`<p class=${classes}><slot></slot></p>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-text': SDSText;\n\t}\n}\n"]}
+{"version":3,"file":"sds-text.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAYpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIN,iBAAiB;QAC0B,SAAI,GAAS,IAAI,CAAC;QACjB,WAAM,GAAY,KAAK,CAAC;QACxB,SAAI,GAAY,KAAK,CAAC;IAKnE,CAAC;IAHS,MAAM;QACd,OAAO,IAAI,CAAA,sBAAsB,CAAC;IACnC,CAAC;;AAVD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAmB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAyB;AACxB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAuB;AAPtD,OAAO;IADnB,oBAAoB,CAAC,UAAU,CAAC;GACpB,OAAO,CAYnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-text.styles';\nimport { SDS_SIZES } from '../types';\n\ntype Size = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSTextProps {\n\tsize?: Size;\n\tstrong?: boolean;\n\ttall?: boolean;\n}\n\n@guardedCustomElement('sds-text')\nexport class SDSText extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) size: Size = 'md';\n\t@property({ type: Boolean, reflect: true }) strong: boolean = false;\n\t@property({ type: Boolean, reflect: true }) tall: boolean = false;\n\n\toverride render() {\n\t\treturn html`<p><slot></slot></p>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-text': SDSText;\n\t}\n}\n"]}

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

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