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

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

@@ -1,160 +1,140 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
+		--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-info-surface-tinted));
+
+		--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-info-border-default));
+		--_sds-notification-border-radius: var(--sds-notification-border-radius, var(--sds-radius-sm));
+		--_sds-notification-border-width: var(--sds-notification-border-width, var(--sds-border-sm));
+
+		--_sds-notification-column-gap: var(--sds-notification-column-gap, var(--sds-spacing-2xs));
+		--_sds-notification-content-gap: var(--sds-notification-content-gap, var(--sds-spacing-3xs));
+
+		--_sds-notification-font-family: var(--sds-notification-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-notification-font-size: var(--sds-notification-font-size, var(--sds-components-font-size-md));
+		--_sds-notification-font-weight: var(--sds-notification-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-notification-line-height: var(--sds-notification-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-info-text-default));
+
+		--_sds-notification-title-font-size: var(--sds-notification-title-font-size, var(--sds-typography-body-lg-desktop-tall-font-size));
+		--_sds-notification-title-font-weight: var(--sds-notification-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));
+		--_sds-notification-title-line-height: var(--sds-notification-title-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));
+
+		--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-info-text-subtle));
+		--_sds-notification-max-line-width: var(--sds-notification-max-line-width, var(--sds-typography-max-line-width));
+		--_sds-notification-padding: var(--sds-notification-padding, var(--sds-spacing-sm));
+		--_sds-notification-remove-btn-radius: var(--sds-notification-remove-btn-radius, var(--sds-radius-xs));
+
 		display: block;
-		box-sizing: border-box;
 	}
 
 	.sds-notification {
-		font-family: var(--sds-typography-font-family);
-		font-size: 1rem;
-		font-weight: 400;
-		line-height: 1.25;
-
 		display: flex;
-		gap: 0.5rem;
+		gap: var(--_sds-notification-column-gap);
+		padding: var(--_sds-notification-padding);
 
-		background-color: var(--sds-color-semantic-surface-info-subtle);
-		border: 1px solid var(--sds-color-semantic-surface-info-xtreme);
-		color: var(--sds-color-semantic-text-default);
+		background-color: var(--_sds-notification-background-color);
+		border: var(--_sds-notification-border-width) solid var(--_sds-notification-border-color);
+		border-radius: var(--_sds-notification-border-radius);
+		color: var(--_sds-notification-text-color);
 
+		font-family: var(--_sds-notification-font-family);
 		text-align: left;
 	}
 
-	.sds-notification--success {
-		background-color: var(--sds-color-semantic-surface-ok-subtle);
-		border-color: var(--sds-color-semantic-surface-ok-xtreme);
+	.sds-notification__type {
+		color: var(--_sds-notification-icon-color);
+	}
 
-		.sds-notification__type {
-			background-color: var(--sds-color-semantic-surface-ok-xtreme);
-		}
+	.sds-notification__content {
+		align-self: center;
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: var(--_sds-notification-content-gap);
 	}
 
-	.sds-notification--attention {
-		background-color: var(--sds-color-semantic-surface-attention-subtle);
-		border-color: var(--sds-color-semantic-surface-attention-xtreme);
+	.sds-notification__actions {
+		--sds-button-padding-inline: 0;
+	}
 
-		.sds-notification__type {
-			background-color: var(--sds-color-semantic-surface-attention-xtreme);
-		}
+	.sds-notification__icon {
+		display: block;
+		position: relative;
+		z-index: 1;
 	}
 
-	.sds-notification--warning {
-		background-color: var(--sds-color-semantic-surface-warning-subtle);
-		border-color: var(--sds-color-semantic-surface-warning-xtreme);
+	:host([variant='success']) {
+		--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-success-surface-tinted));
+		--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-success-border-default));
+		--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-attention-text-default));
+		--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-success-text-subtle));
+
+		sds-button {
+			--sds-button-text-color: var(--sds-color-alert-success-action-default);
+		}
 
-		.sds-notification__type {
-			background-color: var(--sds-color-semantic-surface-warning-xtreme);
+		sds-button:hover {
+			--sds-button-background-color: var(--sds-color-alert-success-surface-hover);
+			--sds-button-border-color: var(--sds-color-alert-success-surface-hover);
 		}
 
-		.sds-notification__icon::before {
-			width: 4px;
-			height: 14px;
+		sds-button:active {
+			--sds-button-background-color: var(--sds-color-alert-success-surface-active);
+			--sds-button-border-color: var(--sds-color-alert-success-surface-active);
 		}
 	}
 
-	.sds-notification--critical {
-		background-color: var(--sds-color-semantic-surface-critical-subtle);
-		border-color: var(--sds-color-semantic-surface-critical-xtreme);
+	:host([variant='warning']), /* Deprecated */
+	:host([variant='attention']) {
+		--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-attention-surface-tinted));
+		--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-attention-border-default));
+		--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-attention-text-default));
+		--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-attention-text-subtle));
 
-		.sds-notification__type {
-			background-color: var(--sds-color-semantic-surface-critical-xtreme);
+		sds-button {
+			--sds-button-text-color: var(--sds-color-alert-attention-border-default);
 		}
 
-		.sds-notification__icon::before {
-			width: 10px;
-			height: 10px;
+		sds-button:hover {
+			--sds-button-background-color: var(--sds-color-alert-attention-surface-hover);
+			--sds-button-border-color: var(--sds-color-alert-attention-surface-hover);
 		}
-	}
-
-	.sds-notification__type {
-		background-color: var(--sds-color-semantic-surface-info-xtreme);
-		color: white;
-		padding: 1rem 0.5rem;
-	}
 
-	.sds-notification__content {
-		display: flex;
-		flex: 1;
-		gap: 1rem;
-		padding: 1rem 0.5rem;
+		sds-button:active {
+			--sds-button-background-color: var(--sds-color-alert-attention-surface-active);
+			--sds-button-border-color: var(--sds-color-alert-attention-surface-active);
+		}
 	}
 
-	.sds-notification__content-text {
-		flex: 1;
+	:host([variant='critical']), /* Deprecated */
+	:host([variant='danger']) {
+		--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-danger-surface-tinted));
+		--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-danger-border-default));
+		--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-danger-text-default));
+		--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-danger-text-subtle));
 	}
 
 	::slotted([slot='title']),
 	::slotted(:is(h1, h2, h3, h4, h5, h6)) {
-		color: var(--sds-color-semantic-text-default) !important;
-		font-size: 1rem !important;
+		color: var(--_sds-notification-text-color) !important;
+		font-size: var(--_sds-notification-title-font-size) !important;
 		font-style: normal !important;
-		font-weight: 700 !important;
-		line-height: 1.5 !important;
+		font-weight: var(--_sds-notification-title-font-weight) !important;
+		line-height: var(--_sds-notification-title-line-height) !important;
 		margin: 0 !important;
-		max-width: var(--sds-typography-max-line-width) !important;
+		max-width: var(--_sds-notification-max-line-width) !important;
 	}
 
 	::slotted([slot='message']),
 	::slotted(:is(p)) {
-		color: var(--sds-color-semantic-text-default) !important;
-		font-size: 1rem !important;
+		color: var(--_sds-notification-text-color) !important;
+		font-size: var(--_sds-notification-font-size) !important;
 		font-style: normal !important;
-		font-weight: 400 !important;
-		line-height: 1.5 !important;
+		font-weight: var(--_sds-notification-font-weight) !important;
+		line-height: var(--_sds-notification-line-height) !important;
 		margin: 0 !important;
-		max-width: var(--sds-typography-max-line-width) !important;
-	}
-
-	.sds-notification__icon {
-		display: block;
-		position: relative;
-		z-index: 1;
-
-		&::before {
-			content: '';
-			display: block;
-			width: 14px;
-			height: 14px;
-			background-color: black;
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			z-index: -1;
-		}
-	}
-
-	.sds-notification__remove-btn {
-		border: 0;
-		border-radius: var(--sds-radius-4);
-		background: transparent;
-		cursor: pointer;
-		flex: 0 1 auto;
-		padding: 0;
-		width: 24px;
-		height: 24px;
-
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		&:focus {
-			outline: 2px solid var(--sds-color-semantic-surface-action-default);
-			outline-offset: 1px;
-		}
-
-		&:hover {
-			background-color: var(--sds-color-semantic-surface-action-subtle);
-			border: 2px solid var(--sds-color-semantic-surface-action-hover);
-		}
-
-		&:active {
-			background-color: var(--sds-color-semantic-surface-action-active);
-			border: 2px solid var(--sds-color-semantic-surface-action-active);
-			color: var(--sds-color-semantic-text-on-action);
-			outline: 0;
-		}
+		max-width: var(--_sds-notification-max-line-width) !important;
 	}
 `;
 //# sourceMappingURL=sds-notification.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-notification.styles.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-notification {\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\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\n\t\tbackground-color: var(--sds-color-semantic-surface-info-subtle);\n\t\tborder: 1px solid var(--sds-color-semantic-surface-info-xtreme);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\ttext-align: left;\n\t}\n\n\t.sds-notification--success {\n\t\tbackground-color: var(--sds-color-semantic-surface-ok-subtle);\n\t\tborder-color: var(--sds-color-semantic-surface-ok-xtreme);\n\n\t\t.sds-notification__type {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-ok-xtreme);\n\t\t}\n\t}\n\n\t.sds-notification--attention {\n\t\tbackground-color: var(--sds-color-semantic-surface-attention-subtle);\n\t\tborder-color: var(--sds-color-semantic-surface-attention-xtreme);\n\n\t\t.sds-notification__type {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-attention-xtreme);\n\t\t}\n\t}\n\n\t.sds-notification--warning {\n\t\tbackground-color: var(--sds-color-semantic-surface-warning-subtle);\n\t\tborder-color: var(--sds-color-semantic-surface-warning-xtreme);\n\n\t\t.sds-notification__type {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-warning-xtreme);\n\t\t}\n\n\t\t.sds-notification__icon::before {\n\t\t\twidth: 4px;\n\t\t\theight: 14px;\n\t\t}\n\t}\n\n\t.sds-notification--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-subtle);\n\t\tborder-color: var(--sds-color-semantic-surface-critical-xtreme);\n\n\t\t.sds-notification__type {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t}\n\n\t\t.sds-notification__icon::before {\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t}\n\t}\n\n\t.sds-notification__type {\n\t\tbackground-color: var(--sds-color-semantic-surface-info-xtreme);\n\t\tcolor: white;\n\t\tpadding: 1rem 0.5rem;\n\t}\n\n\t.sds-notification__content {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tgap: 1rem;\n\t\tpadding: 1rem 0.5rem;\n\t}\n\n\t.sds-notification__content-text {\n\t\tflex: 1;\n\t}\n\n\t::slotted([slot='title']),\n\t::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n\t\tcolor: var(--sds-color-semantic-text-default) !important;\n\t\tfont-size: 1rem !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: 700 !important;\n\t\tline-height: 1.5 !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t}\n\n\t::slotted([slot='message']),\n\t::slotted(:is(p)) {\n\t\tcolor: var(--sds-color-semantic-text-default) !important;\n\t\tfont-size: 1rem !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: 400 !important;\n\t\tline-height: 1.5 !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t}\n\n\t.sds-notification__icon {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tz-index: 1;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tbackground-color: black;\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translate(-50%, -50%);\n\t\t\tz-index: -1;\n\t\t}\n\t}\n\n\t.sds-notification__remove-btn {\n\t\tborder: 0;\n\t\tborder-radius: var(--sds-radius-4);\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tflex: 0 1 auto;\n\t\tpadding: 0;\n\t\twidth: 24px;\n\t\theight: 24px;\n\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&: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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-notification.styles.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-info-surface-tinted));\n\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-info-border-default));\n\t\t--_sds-notification-border-radius: var(--sds-notification-border-radius, var(--sds-radius-sm));\n\t\t--_sds-notification-border-width: var(--sds-notification-border-width, var(--sds-border-sm));\n\n\t\t--_sds-notification-column-gap: var(--sds-notification-column-gap, var(--sds-spacing-2xs));\n\t\t--_sds-notification-content-gap: var(--sds-notification-content-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-notification-font-family: var(--sds-notification-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-notification-font-size: var(--sds-notification-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-notification-font-weight: var(--sds-notification-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-notification-line-height: var(--sds-notification-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-info-text-default));\n\n\t\t--_sds-notification-title-font-size: var(--sds-notification-title-font-size, var(--sds-typography-body-lg-desktop-tall-font-size));\n\t\t--_sds-notification-title-font-weight: var(--sds-notification-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-notification-title-line-height: var(--sds-notification-title-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-info-text-subtle));\n\t\t--_sds-notification-max-line-width: var(--sds-notification-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-notification-padding: var(--sds-notification-padding, var(--sds-spacing-sm));\n\t\t--_sds-notification-remove-btn-radius: var(--sds-notification-remove-btn-radius, var(--sds-radius-xs));\n\n\t\tdisplay: block;\n\t}\n\n\t.sds-notification {\n\t\tdisplay: flex;\n\t\tgap: var(--_sds-notification-column-gap);\n\t\tpadding: var(--_sds-notification-padding);\n\n\t\tbackground-color: var(--_sds-notification-background-color);\n\t\tborder: var(--_sds-notification-border-width) solid var(--_sds-notification-border-color);\n\t\tborder-radius: var(--_sds-notification-border-radius);\n\t\tcolor: var(--_sds-notification-text-color);\n\n\t\tfont-family: var(--_sds-notification-font-family);\n\t\ttext-align: left;\n\t}\n\n\t.sds-notification__type {\n\t\tcolor: var(--_sds-notification-icon-color);\n\t}\n\n\t.sds-notification__content {\n\t\talign-self: center;\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-notification-content-gap);\n\t}\n\n\t.sds-notification__actions {\n\t\t--sds-button-padding-inline: 0;\n\t}\n\n\t.sds-notification__icon {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n\t:host([variant='success']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-success-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-success-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-attention-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-success-text-subtle));\n\n\t\tsds-button {\n\t\t\t--sds-button-text-color: var(--sds-color-alert-success-action-default);\n\t\t}\n\n\t\tsds-button:hover {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-success-surface-hover);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-success-surface-hover);\n\t\t}\n\n\t\tsds-button:active {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-success-surface-active);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-success-surface-active);\n\t\t}\n\t}\n\n\t:host([variant='warning']), /* Deprecated */\n\t:host([variant='attention']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-attention-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-attention-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-attention-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-attention-text-subtle));\n\n\t\tsds-button {\n\t\t\t--sds-button-text-color: var(--sds-color-alert-attention-border-default);\n\t\t}\n\n\t\tsds-button:hover {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-attention-surface-hover);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-attention-surface-hover);\n\t\t}\n\n\t\tsds-button:active {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-attention-surface-active);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-attention-surface-active);\n\t\t}\n\t}\n\n\t:host([variant='critical']), /* Deprecated */\n\t:host([variant='danger']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-danger-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-danger-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-danger-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-danger-text-subtle));\n\t}\n\n\t::slotted([slot='title']),\n\t::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n\t\tcolor: var(--_sds-notification-text-color) !important;\n\t\tfont-size: var(--_sds-notification-title-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-notification-title-font-weight) !important;\n\t\tline-height: var(--_sds-notification-title-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-notification-max-line-width) !important;\n\t}\n\n\t::slotted([slot='message']),\n\t::slotted(:is(p)) {\n\t\tcolor: var(--_sds-notification-text-color) !important;\n\t\tfont-size: var(--_sds-notification-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-notification-font-weight) !important;\n\t\tline-height: var(--_sds-notification-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-notification-max-line-width) !important;\n\t}\n`;\n"]}

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

@@ -5,9 +5,9 @@ export const styles = css `
 	}
 
 	.sds-paragraph {
-		font-family: var(--sds-typography-font-family);
+		font-family: var(--sds-typography-body-md-font-family);
 		font-weight: 400;
-		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-paragraph/sds-paragraph.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-paragraph.styles.js","sourceRoot":"","sources":["../../src/sds-paragraph/sds-paragraph.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-paragraph {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-weight: 400;\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-paragraph--xl {\n\t\tfont-size: 1.25rem;\n\t\tline-height: 1.4;\n\t}\n\n\t.sds-paragraph--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.333;\n\t}\n\n\t.sds-paragraph--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t}\n\n\t@media (max-width: 640px) {\n\t\t.sds-paragraph--m {\n\t\t\tline-height: 1.375;\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-paragraph.styles.js","sourceRoot":"","sources":["../../src/sds-paragraph/sds-paragraph.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-paragraph {\n\t\tfont-family: var(--sds-typography-body-md-font-family);\n\t\tfont-weight: 400;\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-paragraph--xl {\n\t\tfont-size: 1.25rem;\n\t\tline-height: 1.4;\n\t}\n\n\t.sds-paragraph--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.333;\n\t}\n\n\t.sds-paragraph--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t}\n\n\t@media (max-width: 640px) {\n\t\t.sds-paragraph--m {\n\t\t\tline-height: 1.375;\n\t\t}\n\t}\n`;\n"]}

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

@@ -1,4 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
+import { SDS_SIZES } from '../types';
+type RadioSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
 export interface SDSRadioProps {
     disabled?: boolean;
     required?: boolean;
@@ -8,6 +10,9 @@ export interface SDSRadioProps {
     value?: string;
     checked?: boolean;
     error?: boolean;
+    readonly?: boolean;
+    size?: RadioSize;
+    'help-text'?: string;
     onChange?: (event: CustomEvent<{
         checked: boolean;
         value?: string;
@@ -27,6 +32,9 @@ export declare class SDSRadio extends LitElement {
     value: string;
     checked: boolean;
     error: boolean;
+    readOnly: boolean;
+    size: RadioSize;
+    helpText?: string;
     control: HTMLInputElement;
     private _initialChecked;
     constructor();
@@ -62,4 +70,5 @@ declare global {
         'sds-radio': SDSRadio;
     }
 }
+export {};
 //# sourceMappingURL=sds-radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAOhE,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACtC;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,OAAO,CAAS;IAC1B,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAQ;IACL,OAAO,UAAS;IAChB,KAAK,UAAS;IAEvC,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,oBAAoB;IAKpB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAK/D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA4B7B;IAEF,iBAAiB;IAOR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAiB1E,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAU5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAiCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
+{"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAExD,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACtC;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,OAAO,CAAS;IAC1B,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAQ;IACL,OAAO,UAAS;IAChB,KAAK,UAAS;IACS,QAAQ,EAAE,OAAO,CAAS;IAClD,IAAI,EAAE,SAAS,CAAQ;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAEnD,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,oBAAoB;IAKpB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAK/D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,sBAAsB;IAc9B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA4B7B;IAEF,iBAAiB;IAOR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAiB1E,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAM3B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAiCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/dist/sds-radio/sds-radio.js

@@ -20,9 +20,11 @@ let SDSRadio = class SDSRadio extends LitElement {
         this.value = 'on';
         this.checked = false;
         this.error = false;
+        this.readOnly = false;
+        this.size = 'md';
         this._initialChecked = false;
         this._handleKeydown = (event) => {
-            if (!this.name || this.disabled)
+            if (!this.name || this.disabled || this.readOnly)
                 return;
             const root = this.getRootNode();
             const radios = Array.from(root.querySelectorAll(`sds-radio[name="${this.name}"]`));
@@ -48,15 +50,18 @@ let SDSRadio = class SDSRadio extends LitElement {
             event.preventDefault();
         };
         this._handleChange = (event) => {
-            if (!this.disabled) {
-                const elem = event.target;
-                this.checked = elem.checked;
-                if (this.checked) {
-                    this._uncheckSiblings();
-                }
-                this._updateGroupValidation();
-                this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+            if (this.disabled || this.readOnly) {
+                event.target.checked = this.checked;
+                event.preventDefault();
+                return;
             }
+            const elem = event.target;
+            this.checked = elem.checked;
+            if (this.checked) {
+                this._uncheckSiblings();
+            }
+            this._updateGroupValidation();
+            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
         };
         this._handleFocus = (event) => {
             event.stopImmediatePropagation();
@@ -68,7 +73,8 @@ let SDSRadio = class SDSRadio extends LitElement {
         };
         this._handleClick = (event) => {
             event.stopImmediatePropagation();
-            if (event.currentTarget === event.target && !this.disabled) {
+            const clickedOnUs = event.target instanceof Node && this.shadowRoot?.contains(event.target);
+            if (clickedOnUs && !this.disabled && !this.readOnly) {
                 this.shadowRoot?.querySelector('input')?.click();
             }
         };
@@ -106,10 +112,7 @@ let SDSRadio = class SDSRadio extends LitElement {
             if (!radio.control)
                 return;
             if (isAnyRequired) {
-                isAnyChecked
-                    ? radio.internals.setValidity({})
-                    : radio.internals.setValidity({ valueMissing: true }, radio.control.validationMessage, radio.control);
-                radio.internals.setValidity(isAnyChecked ? {} : { valueMissing: true }, isAnyChecked ? 'Error' : radio.control.validationMessage, ...(radio.control ? [radio.control] : []));
+                radio.internals.setValidity(isAnyChecked ? {} : { valueMissing: true }, isAnyChecked ? '' : radio.control.validationMessage, radio.control);
             }
             else {
                 radio.internals.setValidity({});
@@ -148,9 +151,8 @@ let SDSRadio = class SDSRadio extends LitElement {
                 radio.checked = false;
                 radio.internals.setFormValue(null);
                 const input = radio.shadowRoot?.querySelector('#control');
-                if (input) {
+                if (input)
                     input.checked = false;
-                }
             }
         });
     }
@@ -192,7 +194,7 @@ let SDSRadio = class SDSRadio extends LitElement {
             this.shadowRoot?.querySelector('input')?.blur();
     }
     click() {
-        if (!this.disabled)
+        if (!this.disabled && !this.readOnly)
             this.shadowRoot?.querySelector('input')?.click();
     }
     render() {
@@ -206,23 +208,23 @@ let SDSRadio = class SDSRadio extends LitElement {
         };
         return html `
 			<div class="${classMap(radioClasses)}" @click="${this._handleClick}">
-				<label class="sds-radio__label">
-					<input
-						id="control"
-						type="radio"
-						name="${ifDefined(this.name)}"
-						value="${ifDefined(this.value)}"
-						.checked="${this.checked}"
-						?checked="${this.checked}"
-						?disabled="${this.disabled}"
-						?required="${this.required}"
-						@change="${this._handleChange}"
-						@focus="${this._handleFocus}"
-						@blur="${this._handleBlur}"
-						class="${classMap(inputClasses)}"
-					/>
-					${this.label ? html `<span class="sds-radio__text">${this.label}</span>` : nothing}
-				</label>
+				<input
+					id="control"
+					type="radio"
+					name="${ifDefined(this.name)}"
+					value="${ifDefined(this.value)}"
+					?checked="${this.checked}"
+					.checked="${this.checked}"
+					?disabled="${this.disabled}"
+					?required="${this.required}"
+					?readonly="${this.readOnly}"
+					@change="${this._handleChange}"
+					@focus="${this._handleFocus}"
+					@blur="${this._handleBlur}"
+					class="${classMap(inputClasses)}"
+				/>
+				${this.label ? html `<label class="sds-radio__label" for="control">${this.label}</label>` : nothing}
+				${this.helpText ? html `<span class="sds-radio__help-text">${this.helpText}</span>` : nothing}
 			</div>
 		`;
     }
@@ -254,6 +256,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly', reflect: true })
+], SDSRadio.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSRadio.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'help-text' })
+], SDSRadio.prototype, "helpText", void 0);
 __decorate([
     query('#control')
 ], SDSRadio.prototype, "control", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio.styles';\n\nexport interface SDSRadioProps {\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value?: string }>) => void;\n\tonFocus?: (event: CustomEvent) => void;\n\tonBlur?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value: string = 'on';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked;\n\t\t}\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tthis._updateGroupValidation();\n\t}\n\n\tprivate _getGroupRadios(): SDSRadio[] {\n\t\tif (!this.name) return [this];\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radioGroup = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\treturn radioGroup;\n\t}\n\n\tprivate _updateGroupValidation() {\n\t\tconst group: Array<SDSRadio> = this._getGroupRadios();\n\t\tconst isAnyChecked = group.some((radio) => radio.checked);\n\t\tconst isAnyRequired = group.some((radio) => radio.required);\n\t\tgroup.forEach((radio) => {\n\t\t\tif (!radio.control) return;\n\t\t\tif (isAnyRequired) {\n\t\t\t\tisAnyChecked\n\t\t\t\t\t? radio.internals.setValidity({})\n\t\t\t\t\t: radio.internals.setValidity(\n\t\t\t\t\t\t\t{ valueMissing: true },\n\t\t\t\t\t\t\tradio.control.validationMessage,\n\t\t\t\t\t\t\tradio.control\n\t\t\t\t\t\t);\n\t\t\t\tradio.internals.setValidity(\n\t\t\t\t\tisAnyChecked ? {} : { valueMissing: true },\n\t\t\t\t\tisAnyChecked ? 'Error' : radio.control.validationMessage,\n\t\t\t\t\t...(radio.control ? [radio.control] : [])\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tradio.internals.setValidity({});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\ttargetRadio?.click();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis._updateGroupValidation();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`);\n\n\t\tradios.forEach((radio) => {\n\t\t\tif (radio !== this) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t\tconst input: HTMLInputElement | null | undefined = radio.shadowRoot?.querySelector('#control');\n\t\t\t\tif (input) {\n\t\t\t\t\tinput.checked = false;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type(): string {\n\t\treturn 'radio';\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<label class=\"sds-radio__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t.checked=\"${this.checked}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-radio__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}
+{"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio.styles';\nimport { SDS_SIZES } from '../types';\n\ntype RadioSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSRadioProps {\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\treadonly?: boolean;\n\tsize?: RadioSize;\n\t'help-text'?: string;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value?: string }>) => void;\n\tonFocus?: (event: CustomEvent) => void;\n\tonBlur?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value: string = 'on';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) size: RadioSize = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked;\n\t\t}\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tthis._updateGroupValidation();\n\t}\n\n\tprivate _getGroupRadios(): SDSRadio[] {\n\t\tif (!this.name) return [this];\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radioGroup = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\treturn radioGroup;\n\t}\n\n\tprivate _updateGroupValidation() {\n\t\tconst group: Array<SDSRadio> = this._getGroupRadios();\n\t\tconst isAnyChecked = group.some((radio) => radio.checked);\n\t\tconst isAnyRequired = group.some((radio) => radio.required);\n\t\tgroup.forEach((radio) => {\n\t\t\tif (!radio.control) return;\n\t\t\tif (isAnyRequired) {\n\t\t\t\tradio.internals.setValidity(isAnyChecked ? {} : { valueMissing: true }, isAnyChecked ? '' : radio.control.validationMessage, radio.control);\n\t\t\t} else {\n\t\t\t\tradio.internals.setValidity({});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled || this.readOnly) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\ttargetRadio?.click();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis._updateGroupValidation();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`);\n\n\t\tradios.forEach((radio) => {\n\t\t\tif (radio !== this) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t\tconst input = radio.shadowRoot?.querySelector('#control') as HTMLInputElement | null;\n\t\t\t\tif (input) input.checked = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (this.disabled || this.readOnly) {\n\t\t\t(event.target as HTMLInputElement).checked = this.checked;\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target as HTMLInputElement;\n\t\tthis.checked = elem.checked;\n\t\tif (this.checked) {\n\t\t\tthis._uncheckSiblings();\n\t\t}\n\t\tthis._updateGroupValidation();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tconst clickedOnUs = event.target instanceof Node && this.shadowRoot?.contains(event.target);\n\t\tif (clickedOnUs && !this.disabled && !this.readOnly) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type(): string {\n\t\treturn 'radio';\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t.checked=\"${this.checked}\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label class=\"sds-radio__label\" for=\"control\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-radio__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}

package/dist/sds-radio/sds-radio.spec.js

@@ -1,7 +1,6 @@
 import { test } from '@playwright/test';
 import { onFormSubmitCallback } from '../playwright-util/form';
 import { expect } from '../playwright-util/custom-matchers';
-import { takeScreenshotOfElement } from 'src/playwright-util/screenshot';
 test.describe('radio-component', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('iframe.html?viewMode=docs&id=test-radio--docs');
@@ -41,25 +40,6 @@ test.describe('radio-component', () => {
         await checkedDisabledRadio.click();
         await expect(checkedDisabledRadio).isChecked();
     });
-    test('keep checked property in sync with checked attribute', async ({ page }) => {
-        const reactRadioButton = page.locator('#react-radio-button');
-        const radioButtonInsideShadowDOM = page.getByRole('radio', { name: 'React radio button', exact: true });
-        // First interact with button with a click
-        await reactRadioButton.click();
-        await expect(reactRadioButton).isChecked();
-        expect(radioButtonInsideShadowDOM.isChecked()).toBeTruthy();
-        await expect(radioButtonInsideShadowDOM).isChecked();
-        // Then try to change the state using the button,
-        // which will change the React component's internal state.
-        const reactButton = page.locator('#react-button');
-        await reactButton.click();
-        await expect(reactRadioButton).isChecked();
-        expect(await radioButtonInsideShadowDOM.isChecked()).toBeTruthy();
-        // This verifies that the internal input and the checkbox's state are in sync.
-        await reactButton.click();
-        await expect(reactRadioButton).isNotChecked();
-        expect(await radioButtonInsideShadowDOM.isChecked()).toBeFalsy();
-    });
     test('form-submission', async ({ page }) => {
         const getFormData = await onFormSubmitCallback(page, 'radio-form');
         const radioGroupMember = page.locator('#group-member-1');
@@ -87,11 +67,5 @@ test.describe('radio-component', () => {
         await expect(page.locator('#unchecked')).isNotChecked();
         await expect(page.locator('#checked')).isChecked();
     });
-    test('design-implementation', async ({ page }) => {
-        const elementIds = ['with-label', 'unchecked', 'checked', 'custom-value', 'disabled', 'checked-disabled'];
-        for (const elementId of elementIds) {
-            await takeScreenshotOfElement(page, elementId);
-        }
-    });
 });
 //# sourceMappingURL=sds-radio.spec.js.map