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

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

@@ -1 +1 @@
-{"version":3,"file":"sds-radio.spec.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test } from '@playwright/test';\nimport { onFormSubmitCallback } from '../playwright-util/form';\nimport { expect } from '../playwright-util/custom-matchers';\nimport { takeScreenshotOfElement } from 'src/playwright-util/screenshot';\n\ntest.describe('radio-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-radio--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tawait expect(page.locator('#with-label')).toBeVisible();\n\t\tawait expect(page.locator('#unchecked')).toBeVisible();\n\t\tawait expect(page.locator('#checked')).toBeVisible();\n\t\tawait expect(page.locator('#custom-value')).toBeVisible();\n\t\tawait expect(page.locator('#disabled')).toBeVisible();\n\t\tawait expect(page.locator('#checked-disabled')).toBeVisible();\n\t});\n\n\ttest('states', async ({ page }) => {\n\t\tconst radioWithLabel = page.locator('#with-label');\n\t\tawait expect(radioWithLabel).isNotChecked();\n\n\t\tconst uncheckedRadio = page.locator('#unchecked');\n\t\tawait expect(uncheckedRadio).isNotChecked();\n\n\t\tconst checkedRadio = page.locator('#checked');\n\t\tawait expect(checkedRadio).isChecked();\n\n\t\tconst disabledRadio = page.locator('#disabled');\n\t\tawait expect(disabledRadio).toHaveAttribute('disabled', '');\n\n\t\tconst checkedDisabledRadio = page.locator('#checked-disabled');\n\t\tawait expect(checkedDisabledRadio).isChecked();\n\t\tawait expect(checkedDisabledRadio).toHaveAttribute('disabled', '');\n\t});\n\n\ttest('interaction', async ({ page }) => {\n\t\tawait page.getByLabel('Radio button with label').click();\n\t\tconst radioWithLabel = page.locator('#with-label');\n\t\tawait expect(radioWithLabel).isChecked();\n\n\t\tconst uncheckedRadio = page.locator('#unchecked');\n\t\tawait uncheckedRadio.click();\n\t\tawait expect(uncheckedRadio).isChecked();\n\n\t\tconst disabledRadio = page.locator('#disabled');\n\t\tawait disabledRadio.click();\n\t\tawait expect(disabledRadio).isNotChecked();\n\n\t\tconst checkedDisabledRadio = page.locator('#checked-disabled');\n\t\tawait checkedDisabledRadio.click();\n\t\tawait expect(checkedDisabledRadio).isChecked();\n\t});\n\n\ttest('keep checked property in sync with checked attribute', async ({ page }) => {\n\t\tconst reactRadioButton = page.locator('#react-radio-button');\n\t\tconst radioButtonInsideShadowDOM = page.getByRole('radio', { name: 'React radio button', exact: true });\n\n\t\t// First interact with button with a click\n\t\tawait reactRadioButton.click();\n\t\tawait expect(reactRadioButton).isChecked();\n\t\texpect(radioButtonInsideShadowDOM.isChecked()).toBeTruthy();\n\t\tawait expect(radioButtonInsideShadowDOM).isChecked();\n\n\t\t// Then try to change the state using the button,\n\t\t// which will change the React component's internal state.\n\t\tconst reactButton = page.locator('#react-button');\n\n\t\tawait reactButton.click();\n\t\tawait expect(reactRadioButton).isChecked();\n\t\texpect(await radioButtonInsideShadowDOM.isChecked()).toBeTruthy();\n\n\t\t// This verifies that the internal input and the checkbox's state are in sync.\n\t\tawait reactButton.click();\n\t\tawait expect(reactRadioButton).isNotChecked();\n\t\texpect(await radioButtonInsideShadowDOM.isChecked()).toBeFalsy();\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst getFormData = await onFormSubmitCallback(page, 'radio-form');\n\n\t\tconst radioGroupMember = page.locator('#group-member-1');\n\t\tawait radioGroupMember.click();\n\n\t\tconst radioGroupMember2 = page.locator('#group-member-2');\n\t\tawait radioGroupMember2.click();\n\n\t\tconst radioGroupMember3 = page.locator('#group-member-3');\n\t\tawait radioGroupMember3.click();\n\n\t\tawait page.locator('#submit-button').click();\n\n\t\tawait expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();\n\t\tconst formData = await getFormData();\n\n\t\texpect(formData).toMatchObject({\n\t\t\tchecked: 'on',\n\t\t\t'custom-value': 'custom-value',\n\t\t\t'radio-group': 'option-3',\n\t\t});\n\t\texpect(formData).not.toHaveProperty('unchecked');\n\t\texpect(formData).not.toHaveProperty('disabled');\n\t\texpect(formData).not.toHaveProperty('checked-disabled');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#unchecked').click();\n\t\tawait page.locator('#checked').click();\n\n\t\tawait page.locator('#reset-button').click();\n\n\t\tawait expect(page.locator('#unchecked')).isNotChecked();\n\t\tawait expect(page.locator('#checked')).isChecked();\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tconst elementIds = ['with-label', 'unchecked', 'checked', 'custom-value', 'disabled', 'checked-disabled'];\n\t\tfor (const elementId of elementIds) {\n\t\t\tawait takeScreenshotOfElement(page, elementId);\n\t\t}\n\t});\n});\n"]}
+{"version":3,"file":"sds-radio.spec.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test } from '@playwright/test';\nimport { onFormSubmitCallback } from '../playwright-util/form';\nimport { expect } from '../playwright-util/custom-matchers';\n\ntest.describe('radio-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-radio--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tawait expect(page.locator('#with-label')).toBeVisible();\n\t\tawait expect(page.locator('#unchecked')).toBeVisible();\n\t\tawait expect(page.locator('#checked')).toBeVisible();\n\t\tawait expect(page.locator('#custom-value')).toBeVisible();\n\t\tawait expect(page.locator('#disabled')).toBeVisible();\n\t\tawait expect(page.locator('#checked-disabled')).toBeVisible();\n\t});\n\n\ttest('states', async ({ page }) => {\n\t\tconst radioWithLabel = page.locator('#with-label');\n\t\tawait expect(radioWithLabel).isNotChecked();\n\n\t\tconst uncheckedRadio = page.locator('#unchecked');\n\t\tawait expect(uncheckedRadio).isNotChecked();\n\n\t\tconst checkedRadio = page.locator('#checked');\n\t\tawait expect(checkedRadio).isChecked();\n\n\t\tconst disabledRadio = page.locator('#disabled');\n\t\tawait expect(disabledRadio).toHaveAttribute('disabled', '');\n\n\t\tconst checkedDisabledRadio = page.locator('#checked-disabled');\n\t\tawait expect(checkedDisabledRadio).isChecked();\n\t\tawait expect(checkedDisabledRadio).toHaveAttribute('disabled', '');\n\t});\n\n\ttest('interaction', async ({ page }) => {\n\t\tawait page.getByLabel('Radio button with label').click();\n\t\tconst radioWithLabel = page.locator('#with-label');\n\t\tawait expect(radioWithLabel).isChecked();\n\n\t\tconst uncheckedRadio = page.locator('#unchecked');\n\t\tawait uncheckedRadio.click();\n\t\tawait expect(uncheckedRadio).isChecked();\n\n\t\tconst disabledRadio = page.locator('#disabled');\n\t\tawait disabledRadio.click();\n\t\tawait expect(disabledRadio).isNotChecked();\n\n\t\tconst checkedDisabledRadio = page.locator('#checked-disabled');\n\t\tawait checkedDisabledRadio.click();\n\t\tawait expect(checkedDisabledRadio).isChecked();\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst getFormData = await onFormSubmitCallback(page, 'radio-form');\n\n\t\tconst radioGroupMember = page.locator('#group-member-1');\n\t\tawait radioGroupMember.click();\n\n\t\tconst radioGroupMember2 = page.locator('#group-member-2');\n\t\tawait radioGroupMember2.click();\n\n\t\tconst radioGroupMember3 = page.locator('#group-member-3');\n\t\tawait radioGroupMember3.click();\n\n\t\tawait page.locator('#submit-button').click();\n\n\t\tawait expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();\n\t\tconst formData = await getFormData();\n\n\t\texpect(formData).toMatchObject({\n\t\t\tchecked: 'on',\n\t\t\t'custom-value': 'custom-value',\n\t\t\t'radio-group': 'option-3',\n\t\t});\n\t\texpect(formData).not.toHaveProperty('unchecked');\n\t\texpect(formData).not.toHaveProperty('disabled');\n\t\texpect(formData).not.toHaveProperty('checked-disabled');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#unchecked').click();\n\t\tawait page.locator('#checked').click();\n\n\t\tawait page.locator('#reset-button').click();\n\n\t\tawait expect(page.locator('#unchecked')).isNotChecked();\n\t\tawait expect(page.locator('#checked')).isChecked();\n\t});\n});\n"]}

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

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

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

@@ -1,110 +1,200 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
+		--_sds-radio-font-family: var(--sds-radio-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-radio-disabled-opacity: var(--sds-radio-disabled-opacity, var(--sds-color-states-disabled-opacity));
+		--_sds-radio-block-gap: var(--sds-radio-block-gap, var(--sds-spacing-4xs));
+		--_sds-radio-inline-gap: var(--sds-radio-inline-gap, var(--sds-spacing-3xs));
+
+		--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-md));
+		--_sds-radio-label-font-weight: var(--sds-radio-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-md));
+		--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-neutral-text-default));
+
+		--_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-neutral-text-subtle));
+		--_sds-radio-help-text-font-size: var(--sds-radio-help-text-font-size, var(--sds-components-font-size-content-md));
+		--_sds-radio-help-text-font-weight: var(--sds-radio-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-radio-help-text-line-height: var(--sds-radio-help-text-line-height, var(--sds-components-line-height-tall-content-md));
+
+		--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-md));
+		--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
+		--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-default));
+		--_sds-radio-input-border-width: var(--sds-radio-input-border-width, var(--sds-border-md));
+		--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);
+		--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);
+
+		display: inline-flex;
 		flex: 0 0 auto;
 	}
 
-	.sds-radio__label {
-		align-items: flex-start;
-		cursor: pointer;
-		color: var(--sds-color-semantic-text-default);
-		display: flex;
-		font-family: var(--sds-typography-font-family);
-		font-size: 1rem;
-		font-weight: 400;
-		gap: var(--sds-spacing-3);
-		line-height: 1.25;
+	.sds-radio {
+		display: grid;
+		font-family: var(--_sds-radio-font-family);
+		gap: var(--_sds-radio-block-gap) var(--_sds-radio-inline-gap);
+		grid-template-areas: 'input content';
+		grid-template-columns: auto 1fr;
+		width: fit-content;
 
 		&:has(:disabled) {
 			cursor: default;
 			pointer-events: none;
+			opacity: var(--_sds-radio-disabled-opacity);
 		}
+
+		&:has(:focus-visible) {
+			outline: 3px solid var(--sds-color-states-focus-outer);
+			outline-offset: 6px;
+			border-radius: var(--sds-radius-sm);
+		}
+	}
+
+	.sds-radio--error {
+		--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-alert-danger-text-default));
+	}
+
+	.sds-radio__help-text {
+		grid-column: content;
+		margin: 0;
+		color: var(--_sds-radio-help-text-color);
+		font-size: var(--_sds-radio-help-text-font-size);
+		font-weight: var(--_sds-radio-help-text-font-weight);
+		line-height: var(--_sds-radio-help-text-line-height);
+		max-width: var(--_sds-radio-max-line-width);
+	}
+
+	.sds-radio__label {
+		cursor: pointer;
+		color: var(--_sds-radio-label-text-color);
+		display: inline-block;
+		font-size: var(--_sds-radio-label-font-size);
+		font-weight: var(--_sds-radio-label-font-weight);
+		line-height: var(--_sds-radio-label-line-height);
+
+		grid-column: content;
 	}
 
 	.sds-radio__input {
 		appearance: none;
-		background-color: transparent;
-		color: currentColor;
+		background-color: var(--_sds-radio-input-background-color);
+		background-image: radial-gradient(circle closest-side, currentcolor var(--_sds-radio-input-dot-size), transparent 0);
+		color: var(--_sds-radio-input-dot-color);
 		cursor: pointer;
-		width: 24px;
-		height: 24px;
+		width: var(--_sds-radio-input-size);
+		height: var(--_sds-radio-input-size);
 		aspect-ratio: 1;
-		border: 2px solid var(--sds-color-semantic-border-default);
+		border: var(--_sds-radio-input-border-width) solid var(--_sds-radio-input-border-color);
 		border-radius: 50%;
 		margin: 0;
 		position: relative;
 
-		&:checked {
-			background-color: white;
-			border-color: var(--sds-color-semantic-surface-action-selected);
-			border-width: 3px;
-
-			&::after {
-				content: '';
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				width: 12px;
-				height: 12px;
-				background-color: var(--sds-color-semantic-icon-action-default);
-				border-radius: 50%;
-				transform: translate(-50%, -50%);
+		grid-column: input;
+		grid-row: 1;
+
+		&[readonly] {
+			--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));
+			--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-subtle));
+			cursor: default;
+			pointer-events: none;
+
+			& + .sds-radio__label {
+				cursor: default;
+				pointer-events: none;
 			}
 		}
 
-		&:hover {
-			border-width: 3px;
+		&[checked] {
+			--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-default));
+			--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-default));
+			--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-main-action-contrast-default));
 
-			&:checked {
-				&::after {
-					width: 12px;
-					height: 12px;
-					transform: translate(-50%, -50%);
-				}
+			&[readonly] {
+				--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));
+				--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-subtle));
+				--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-action-default));
+				cursor: default;
+				pointer-events: none;
 			}
 		}
 
-		&:focus {
-			outline: 2px solid var(--sds-color-semantic-border-focus);
-			outline-offset: 1px;
+		&:hover {
+			--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
+			--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-hover));
+
+			&[checked] {
+				--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-hover));
+				--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-hover));
+				--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
+			}
 		}
 
-		&.sds-radio__input--error {
-			border: 2px solid var(--sds-color-semantic-surface-critical-xtreme);
+		&:active:not([readonly], [checked]) {
+			--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
+			--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));
 
-			&:checked {
-				&::after {
-					width: 12px;
-					height: 12px;
-					transform: translate(-50%, -50%);
-				}
+			&[checked] {
+				--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-active));
+				--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));
+				--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
 			}
 		}
 
-		&:disabled {
-			border: 2px solid var(--sds-color-semantic-border-disabled);
+		&:focus-visible {
+			outline: none;
+		}
+
+		&.sds-radio__input--error {
+			--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-border-default));
+
+			&[checked] {
+				--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-default));
+				--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-default));
+				--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-alert-danger-action-contrast-default));
+			}
 
-			&:checked {
-				border-width: 3px;
-				background-color: white;
+			&:hover {
+				--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
+				--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));
 
-				&::after {
-					background-color: var(--sds-color-semantic-border-disabled);
-					width: 12px;
-					height: 12px;
+				&[checked] {
+					--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-hover));
+					--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));
+					--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
 				}
 			}
 
-			& + .sds-radio__text {
-				color: var(--sds-color-semantic-border-disabled);
+			&:active:not([readonly], [checked]) {
+				--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
+				--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));
+
+				&[checked] {
+					--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-active));
+					--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));
+					--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
+				}
 			}
 		}
 	}
 
-	.sds-radio__text {
-		display: inline-block;
-		max-width: var(--sds-typography-max-line-width);
-		padding-top: 2px;
+	:host([size='sm']) {
+		--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-sm));
+		--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-sm));
+		--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 3.5px);
+
+		.sds-radio__label {
+			margin-block-start: 1px;
+		}
+	}
+
+	:host([size='lg']) {
+		--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-lg));
+		--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-lg));
+		--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);
+
+		.sds-radio__label {
+			margin-block-start: -1px;
+		}
 	}
 `;
 //# sourceMappingURL=sds-radio.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio__label {\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: flex;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tgap: var(--sds-spacing-3);\n\t\tline-height: 1.25;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tcolor: currentColor;\n\t\tcursor: pointer;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\taspect-ratio: 1;\n\t\tborder: 2px solid var(--sds-color-semantic-border-default);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\t&:checked {\n\t\t\tbackground-color: white;\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tborder-width: 3px;\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t\twidth: 12px;\n\t\t\t\theight: 12px;\n\t\t\t\tbackground-color: var(--sds-color-semantic-icon-action-default);\n\t\t\t\tborder-radius: 50%;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tborder-width: 3px;\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-critical-xtreme);\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\n\t\t\t&:checked {\n\t\t\t\tborder-width: 3px;\n\t\t\t\tbackground-color: white;\n\n\t\t\t\t&::after {\n\t\t\t\t\tbackground-color: var(--sds-color-semantic-border-disabled);\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& + .sds-radio__text {\n\t\t\t\tcolor: var(--sds-color-semantic-border-disabled);\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-radio__text {\n\t\tdisplay: inline-block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding-top: 2px;\n\t}\n`;\n"]}
+{"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-font-family: var(--sds-radio-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-disabled-opacity: var(--sds-radio-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-radio-block-gap: var(--sds-radio-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-radio-inline-gap: var(--sds-radio-inline-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-label-font-weight: var(--sds-radio-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-radio-help-text-font-size: var(--sds-radio-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-help-text-font-weight: var(--sds-radio-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-help-text-line-height: var(--sds-radio-help-text-line-height, var(--sds-components-line-height-tall-content-md));\n\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-md));\n\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));\n\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-radio-input-border-width: var(--sds-radio-input-border-width, var(--sds-border-md));\n\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\tdisplay: inline-flex;\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio {\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-radio-font-family);\n\t\tgap: var(--_sds-radio-block-gap) var(--_sds-radio-inline-gap);\n\t\tgrid-template-areas: 'input content';\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-radio-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: 3px solid var(--sds-color-states-focus-outer);\n\t\t\toutline-offset: 6px;\n\t\t\tborder-radius: var(--sds-radius-sm);\n\t\t}\n\t}\n\n\t.sds-radio--error {\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-radio__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-help-text-color);\n\t\tfont-size: var(--_sds-radio-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-max-line-width);\n\t}\n\n\t.sds-radio__label {\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-radio-label-text-color);\n\t\tdisplay: inline-block;\n\t\tfont-size: var(--_sds-radio-label-font-size);\n\t\tfont-weight: var(--_sds-radio-label-font-weight);\n\t\tline-height: var(--_sds-radio-label-line-height);\n\n\t\tgrid-column: content;\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-radio-input-background-color);\n\t\tbackground-image: radial-gradient(circle closest-side, currentcolor var(--_sds-radio-input-dot-size), transparent 0);\n\t\tcolor: var(--_sds-radio-input-dot-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-radio-input-size);\n\t\theight: var(--_sds-radio-input-size);\n\t\taspect-ratio: 1;\n\t\tborder: var(--_sds-radio-input-border-width) solid var(--_sds-radio-input-border-color);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\n\t\t&[readonly] {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-radio__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-main-action-contrast-default));\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-action-default));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-hover));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-hover));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-hover));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));\n\t\t\t}\n\t\t}\n\n\t\t&:active:not([readonly], [checked]) {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-active));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-alert-danger-action-contrast-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active:not([readonly], [checked]) {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-sm));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 3.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-lg));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}

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

@@ -1,6 +1,9 @@
 import { LitElement } from 'lit';
+import { SDS_SIZES } from '../types';
+type RadioGroupSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
 import '../sds-radio/sds-radio';
 import '../sds-icon/sds-icon';
+import '../sds-alert/sds-alert';
 /**
  * TODO: Implement keyboard navigation behavior according to
  * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
@@ -9,6 +12,10 @@ export interface SDSRadioGroupProps {
     legend?: string;
     'help-text'?: string;
     'error-message'?: string;
+    readonly?: boolean;
+    direction?: 'column' | 'row';
+    disabled?: boolean;
+    size?: RadioGroupSize;
     onChange?: (event: CustomEvent<{
         selectedValue: string | null;
     }>) => void;
@@ -18,14 +25,23 @@ export declare class SDSRadioGroup extends LitElement {
     legend?: string;
     helpText?: string;
     errorMessage?: string;
+    readOnly: boolean;
+    direction: 'column' | 'row';
+    disabled: boolean;
+    size: RadioGroupSize;
     private _selectedValue;
+    private _slotElement;
     private readonly _handleRadioChange;
-    get value(): {};
+    private _handleSlotChange;
+    private _updateChildProps;
+    updated(changedProps: Map<string | number | symbol, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
+    get value(): {};
 }
 declare global {
     interface HTMLElementTagNameMap {
         'sds-radio-group': SDSRadioGroup;
     }
 }
+export {};
 //# sourceMappingURL=sds-radio-group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAG9B;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAY;IAEN,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAErE,OAAO,CAAC,cAAc,CAAuB;IAEtD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAajC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
+{"version":3,"file":"sds-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,cAAc,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAG7D,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAEhC;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAY;IAEN,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAS;IACjE,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAY;IACvB,QAAQ,UAAS;IAClB,IAAI,EAAE,cAAc,CAAQ;IAE9D,OAAO,CAAC,cAAc,CAAuB;IACvC,OAAO,CAAC,YAAY,CAAmB;IAEtD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,iBAAiB;IAehB,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAa5D,MAAM;IA+Bf,IAAI,KAAK,IAAI,EAAE,CAEd;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}

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

@@ -5,42 +5,93 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-radio-group.styles';
 import '../sds-radio/sds-radio';
 import '../sds-icon/sds-icon';
-import { renderErrorMessage } from '../utils/renderErrorMessage';
+import '../sds-alert/sds-alert';
 let SDSRadioGroup = class SDSRadioGroup extends LitElement {
     constructor() {
         super(...arguments);
+        this.readOnly = false;
+        this.direction = 'column';
+        this.disabled = false;
+        this.size = 'md';
         this._selectedValue = null;
         this._handleRadioChange = (event) => {
             const target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO');
             if (target) {
                 this._selectedValue = target.getAttribute('value') || null;
-                this.dispatchEvent(new CustomEvent('sds-update', {
-                    bubbles: true,
-                    composed: true,
-                }));
+                this.dispatchEvent(new CustomEvent('sds-update', { bubbles: true, composed: true }));
             }
         };
+        this._handleSlotChange = () => {
+            this._updateChildProps(['readOnly', 'disabled', 'size', 'error']);
+        };
     }
-    get value() {
-        return { selectedValue: this._selectedValue };
+    _updateChildProps(props) {
+        const radioChildren = this._slotElement?.assignedElements({ flatten: true }) ?? [];
+        radioChildren.forEach((radio) => {
+            if (radio.tagName === 'SDS-RADIO') {
+                props.forEach((prop) => {
+                    if (prop === 'error') {
+                        radio.error = Boolean(this.errorMessage);
+                    }
+                    else {
+                        radio[prop] = this[prop];
+                    }
+                });
+            }
+        });
+    }
+    updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has('readonly')) {
+            this._updateChildProps(['readOnly']);
+        }
+        else if (changedProps.has('disabled')) {
+            this._updateChildProps(['disabled']);
+        }
+        else if (changedProps.has('size')) {
+            this._updateChildProps(['size']);
+        }
+        else if (changedProps.has('errorMessage')) {
+            this._updateChildProps(['error']);
+        }
     }
     render() {
+        const radioGroupClasses = {
+            'sds-radio-group': true,
+            'sds-radio-group--readonly': this.readOnly,
+            'sds-radio-group--disabled': this.disabled,
+        };
+        const radioClasses = {
+            'sds-radio-group__radios': true,
+            'sds-radio-group--column': this.direction === 'column',
+            'sds-radio-group--row': this.direction === 'row',
+        };
         return html `
-			<fieldset class="sds-radio-group">
-				${this.legend ? html `<legend class="sds-radio-group__legend">${this.legend}</legend>` : nothing}
+			<fieldset class="${classMap(radioGroupClasses)}">
+				${this.legend
+            ? html `<legend class="sds-radio-group__legend">${this.readOnly ? html `<sds-icon name="lock-material-filled" size="md"></sds-icon>` : nothing}${this.legend}</legend>`
+            : nothing}
 				${this.helpText ? html `<p class="sds-radio-group__help-text">${this.helpText}</p>` : nothing}
-				<div class="sds-radio-group__radios" @change=${this._handleRadioChange}>
-					<slot></slot>
+				<div class="${classMap(radioClasses)}" @change=${this._handleRadioChange}>
+					<slot @slotchange=${this._handleSlotChange}></slot>
 				</div>
-				${renderErrorMessage(this.errorMessage, 'sds-radio-group__error-message')}
+				${this.errorMessage
+            ? html `<sds-alert variant="secondary" data-palette="danger">
+							<p slot="message">${this.errorMessage}</p>
+						</sds-alert>`
+            : nothing}
 			</fieldset>
 		`;
     }
+    get value() {
+        return { selectedValue: this._selectedValue };
+    }
 };
 SDSRadioGroup.styles = [styles];
 __decorate([
@@ -52,9 +103,24 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'error-message' })
 ], SDSRadioGroup.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly', reflect: true })
+], SDSRadioGroup.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: String })
+], SDSRadioGroup.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSRadioGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSRadioGroup.prototype, "size", void 0);
 __decorate([
     state()
 ], SDSRadioGroup.prototype, "_selectedValue", void 0);
+__decorate([
+    query('slot')
+], SDSRadioGroup.prototype, "_slotElement", void 0);
 SDSRadioGroup = __decorate([
     guardedCustomElement('sds-radio-group')
 ], SDSRadioGroup);

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

@@ -1 +1 @@
-{"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAe1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAOW,mBAAc,GAAkB,IAAI,CAAC;QAErC,uBAAkB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,CAAoC,CAAC;YAE7I,IAAI,MAAM,EAAE,CAAC;gBACZ,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;gBAE3D,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;oBAC7B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;IAkBH,CAAC;IAhBA,IAAI,KAAK;QACR,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC/C,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;MAEP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAC7F,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;mDAC7C,IAAI,CAAC,kBAAkB;;;MAGpE,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,gCAAgC,CAAC;;GAE1E,CAAC;IACH,CAAC;;AAtCe,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AACQ;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+CAAmB;AACd;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mDAAuB;AAE7D;IAAhB,KAAK,EAAE;qDAA8C;AAP1C,aAAa;IADzB,oBAAoB,CAAC,iBAAiB,CAAC;GAC3B,aAAa,CAwCzB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio-group.styles';\n\nimport '../sds-radio/sds-radio';\nimport '../sds-icon/sds-icon';\nimport { renderErrorMessage } from '../utils/renderErrorMessage';\n\n/**\n * TODO: Implement keyboard navigation behavior according to\n * https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n\nexport interface SDSRadioGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValue: string | null }>) => void;\n}\n\n@guardedCustomElement('sds-radio-group')\nexport class SDSRadioGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) legend?: string;\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message' }) errorMessage?: string;\n\n\t@state() private _selectedValue: string | null = null;\n\n\tprivate readonly _handleRadioChange = (event: Event): void => {\n\t\tconst target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO') as HTMLElement & { value: string };\n\n\t\tif (target) {\n\t\t\tthis._selectedValue = target.getAttribute('value') || null;\n\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('sds-update', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tget value(): {} {\n\t\treturn { selectedValue: this._selectedValue };\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<fieldset class=\"sds-radio-group\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-radio-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-radio-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-radio-group__radios\" @change=${this._handleRadioChange}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t${renderErrorMessage(this.errorMessage, 'sds-radio-group__error-message')}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio-group': SDSRadioGroup;\n\t}\n}\n"]}
+{"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio-group.styles';\nimport { SDS_SIZES } from '../types';\n\ntype RadioGroupSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype UpdatableRadioProps = 'readOnly' | 'disabled' | 'size' | 'error';\n\nimport '../sds-radio/sds-radio';\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\n\n/**\n * TODO: Implement keyboard navigation behavior according to\n * https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n\nexport interface SDSRadioGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\treadonly?: boolean;\n\tdirection?: 'column' | 'row';\n\tdisabled?: boolean;\n\tsize?: RadioGroupSize;\n\tonChange?: (event: CustomEvent<{ selectedValue: string | null }>) => void;\n}\n\n@guardedCustomElement('sds-radio-group')\nexport class SDSRadioGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) legend?: string;\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message' }) errorMessage?: string;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String }) direction: 'column' | 'row' = 'column';\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: String, reflect: true }) size: RadioGroupSize = 'md';\n\n\t@state() private _selectedValue: string | null = null;\n\t@query('slot') private _slotElement!: HTMLSlotElement;\n\n\tprivate readonly _handleRadioChange = (event: Event): void => {\n\t\tconst target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO') as HTMLElement & { value: string };\n\n\t\tif (target) {\n\t\t\tthis._selectedValue = target.getAttribute('value') || null;\n\t\t\tthis.dispatchEvent(new CustomEvent('sds-update', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate _handleSlotChange = () => {\n\t\tthis._updateChildProps(['readOnly', 'disabled', 'size', 'error']);\n\t};\n\n\tprivate _updateChildProps(props: UpdatableRadioProps[]) {\n\t\tconst radioChildren = this._slotElement?.assignedElements({ flatten: true }) ?? [];\n\t\tradioChildren.forEach((radio) => {\n\t\t\tif (radio.tagName === 'SDS-RADIO') {\n\t\t\t\tprops.forEach((prop) => {\n\t\t\t\t\tif (prop === 'error') {\n\t\t\t\t\t\t(radio as any).error = Boolean(this.errorMessage);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t(radio as any)[prop] = (this as any)[prop];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n\n\toverride updated(changedProps: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProps);\n\t\tif (changedProps.has('readonly')) {\n\t\t\tthis._updateChildProps(['readOnly']);\n\t\t} else if (changedProps.has('disabled')) {\n\t\t\tthis._updateChildProps(['disabled']);\n\t\t} else if (changedProps.has('size')) {\n\t\t\tthis._updateChildProps(['size']);\n\t\t} else if (changedProps.has('errorMessage')) {\n\t\t\tthis._updateChildProps(['error']);\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst radioGroupClasses = {\n\t\t\t'sds-radio-group': true,\n\t\t\t'sds-radio-group--readonly': this.readOnly,\n\t\t\t'sds-radio-group--disabled': this.disabled,\n\t\t};\n\n\t\tconst radioClasses = {\n\t\t\t'sds-radio-group__radios': true,\n\t\t\t'sds-radio-group--column': this.direction === 'column',\n\t\t\t'sds-radio-group--row': this.direction === 'row',\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(radioGroupClasses)}\">\n\t\t\t\t${this.legend\n\t\t\t\t\t? html`<legend class=\"sds-radio-group__legend\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"md\"></sds-icon>` : nothing}${this.legend}</legend>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-radio-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"${classMap(radioClasses)}\" @change=${this._handleRadioChange}>\n\t\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<sds-alert variant=\"secondary\" data-palette=\"danger\">\n\t\t\t\t\t\t\t<p slot=\"message\">${this.errorMessage}</p>\n\t\t\t\t\t\t</sds-alert>`\n\t\t\t\t\t: nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n\n\tget value(): {} {\n\t\treturn { selectedValue: this._selectedValue };\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio-group': SDSRadioGroup;\n\t}\n}\n"]}

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

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