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

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

@@ -10,16 +10,19 @@ import { classMap } from 'lit/directives/class-map.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-notification.styles';
 import '../sds-icon/sds-icon';
+import '../sds-button/sds-button';
 const notificationIcons = {
-    info: 'info-material-filled',
+    info: 'InformationSquareFill-aksel-filled',
     success: 'check_circle-material-filled',
-    attention: 'error-material-filled',
+    attention: 'warning-material-filled',
     warning: 'warning-material-filled',
-    critical: 'dangerous-material-filled',
+    danger: 'dangerous-material-filled',
+    critical: 'dangerous-material-filled', // Deprecated
 };
+let hasWarnedAboutDeprecation = false;
 let SDSNotification = class SDSNotification extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         // Reactive Props
         this.variant = 'info';
         this._remove = () => {
@@ -28,31 +31,40 @@ let SDSNotification = class SDSNotification extends LitElement {
                 composed: true,
             }));
         };
+        if (!hasWarnedAboutDeprecation) {
+            hasWarnedAboutDeprecation = true;
+            console.warn('[Sheriff] The Notification component is deprecated and will be removed in the next major release. Please migrate to the Alert component.');
+        }
+    }
+    updated(changed) {
+        // Cast critical variant to danger and warning to attention to prevent breaking changes
+        if (changed.has('variant') && this.variant === 'critical') {
+            this.variant = 'danger';
+        }
+        else if (changed.has('variant') && this.variant === 'warning') {
+            this.variant = 'attention';
+        }
     }
     render() {
         const notificationClasses = {
             'sds-notification': true,
-            [`sds-notification--${this.variant}`]: true,
         };
+        const colorPalette = this.variant === 'danger' || this.variant === 'critical' ? 'danger' : 'accent';
         return html `<div class="${classMap(notificationClasses)}">
 			<div class="sds-notification__type">
-				<sds-icon class="sds-notification__icon" name="${notificationIcons[this.variant]}" size="m"></sds-icon>
+				<sds-icon class="sds-notification__icon" name="${notificationIcons[this.variant]}" size="md"></sds-icon>
 			</div>
 			<div class="sds-notification__content">
-				<div class="sds-notification__content-text">
-					<slot name="title"></slot>
-					<slot name="message"></slot>
-				</div>
-				${this.removableLabel
-            ? html `<button
-							class="sds-notification__remove-btn"
-							@click=${this._remove}
-							aria-label="${this.removableLabel}"
-						>
-							<sds-icon name="close-material-outlined" size="s"></sds-icon>
-						</button>`
-            : nothing}
+				<slot name="title"></slot>
+				<slot name="message"></slot>
 			</div>
+			${this.removableLabel
+            ? html `<div class="sds-notification__actions">
+						<sds-button icon variant="tertiary" color="${colorPalette}" size="sm" @click=${this._remove} aria-label="${this.removableLabel}">
+							<sds-icon name="close-material-outlined" size="sm"></sds-icon>
+						</sds-button>
+					</div>`
+            : nothing}
 		</div>`;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"sds-notification.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,sBAAsB,CAAC;AAI9B,MAAM,iBAAiB,GAAwC;IAC9D,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,uBAAuB;IAClC,OAAO,EAAE,yBAAyB;IAClC,QAAQ,EAAE,2BAA2B;CACrC,CAAC;AASK,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,iBAAiB;QAC0B,YAAO,GAAwB,MAAM,CAAC;QAGhE,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IA6BH,CAAC;IA3BS,MAAM;QACd,MAAM,mBAAmB,GAAG;YAC3B,kBAAkB,EAAE,IAAI;YACxB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SAC3C,CAAC;QAEF,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,mBAAmB,CAAC;;qDAEJ,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;;MAO9E,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;;gBAEK,IAAI,CAAC,OAAO;qBACP,IAAI,CAAC,cAAc;;;gBAGxB;YACX,CAAC,CAAC,OAAO;;SAEL,CAAC;IACT,CAAC;;AA1CD,UAAU;AACM,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAuC;AACR;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAyB;AANrF,eAAe;IAD3B,oBAAoB,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CA4C3B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-notification.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype NotificationVariant = 'info' | 'success' | 'attention' | 'warning' | 'critical';\n\nconst notificationIcons: Record<NotificationVariant, string> = {\n\tinfo: 'info-material-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'error-material-filled',\n\twarning: 'warning-material-filled',\n\tcritical: 'dangerous-material-filled',\n};\n\nexport interface SDSNotificationProps {\n\tvariant?: NotificationVariant;\n\t'removable-label'?: string;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-notification')\nexport class SDSNotification extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: NotificationVariant = 'info';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\toverride render() {\n\t\tconst notificationClasses = {\n\t\t\t'sds-notification': true,\n\t\t\t[`sds-notification--${this.variant}`]: true,\n\t\t};\n\n\t\treturn html`<div class=\"${classMap(notificationClasses)}\">\n\t\t\t<div class=\"sds-notification__type\">\n\t\t\t\t<sds-icon class=\"sds-notification__icon\" name=\"${notificationIcons[this.variant]}\" size=\"m\"></sds-icon>\n\t\t\t</div>\n\t\t\t<div class=\"sds-notification__content\">\n\t\t\t\t<div class=\"sds-notification__content-text\">\n\t\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.removableLabel\n\t\t\t\t\t? html`<button\n\t\t\t\t\t\t\tclass=\"sds-notification__remove-btn\"\n\t\t\t\t\t\t\t@click=${this._remove}\n\t\t\t\t\t\t\taria-label=\"${this.removableLabel}\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t\t\t\t</button>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-notification': SDSNotification;\n\t}\n}\n"]}
+{"version":3,"file":"sds-notification.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAIlC,MAAM,iBAAiB,GAAwC;IAC9D,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,yBAAyB;IACpC,OAAO,EAAE,yBAAyB;IAClC,MAAM,EAAE,2BAA2B;IACnC,QAAQ,EAAE,2BAA2B,EAAE,aAAa;CACpD,CAAC;AAQF,IAAI,yBAAyB,GAAY,KAAK,CAAC;AAGxC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAQ9C;QACC,KAAK,EAAE,CAAC;QALT,iBAAiB;QAC0B,YAAO,GAAwB,MAAM,CAAC;QAoBhE,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;QAtBD,IAAI,CAAC,yBAAyB,EAAE,CAAC;YAChC,yBAAyB,GAAG,IAAI,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,0IAA0I,CAAC,CAAC;QAC1J,CAAC;IACF,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,uFAAuF;QACvF,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YAC3D,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACzB,CAAC;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACjE,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;QAC5B,CAAC;IACF,CAAC;IAWQ,MAAM;QACd,MAAM,mBAAmB,GAAG;YAC3B,kBAAkB,EAAE,IAAI;SACxB,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEpG,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,mBAAmB,CAAC;;qDAEJ,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;KAM/E,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;mDACyC,YAAY,sBAAsB,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,cAAc;;;YAGxH;YACR,CAAC,CAAC,OAAO;SACJ,CAAC;IACT,CAAC;;AAxDD,UAAU;AACM,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAuC;AACR;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAyB;AANrF,eAAe;IAD3B,oBAAoB,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CA0D3B","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-notification.styles';\nimport { SDS_COLOR_PALETTES } from '../types';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-button/sds-button';\n\ntype NotificationVariant = Extract<SDS_COLOR_PALETTES, 'info' | 'success' | 'attention' | 'warning' | 'critical' | 'danger'> | 'critical';\n\nconst notificationIcons: Record<NotificationVariant, string> = {\n\tinfo: 'InformationSquareFill-aksel-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'warning-material-filled',\n\twarning: 'warning-material-filled',\n\tdanger: 'dangerous-material-filled',\n\tcritical: 'dangerous-material-filled', // Deprecated\n};\n\nexport interface SDSNotificationProps {\n\tvariant?: NotificationVariant;\n\t'removable-label'?: string;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\nlet hasWarnedAboutDeprecation: boolean = false;\n\n@guardedCustomElement('sds-notification')\nexport class SDSNotification extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: NotificationVariant = 'info';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\n\n\tconstructor() {\n\t\tsuper();\n\t\tif (!hasWarnedAboutDeprecation) {\n\t\t\thasWarnedAboutDeprecation = true;\n\t\t\tconsole.warn('[Sheriff] The Notification component is deprecated and will be removed in the next major release. Please migrate to the Alert component.');\n\t\t}\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\t// Cast critical variant to danger and warning to attention to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.variant = 'danger';\n\t\t} else if (changed.has('variant') && this.variant === 'warning') {\n\t\t\tthis.variant = 'attention';\n\t\t}\n\t}\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\toverride render() {\n\t\tconst notificationClasses = {\n\t\t\t'sds-notification': true,\n\t\t};\n\n\t\tconst colorPalette = this.variant === 'danger' || this.variant === 'critical' ? 'danger' : 'accent';\n\n\t\treturn html`<div class=\"${classMap(notificationClasses)}\">\n\t\t\t<div class=\"sds-notification__type\">\n\t\t\t\t<sds-icon class=\"sds-notification__icon\" name=\"${notificationIcons[this.variant]}\" size=\"md\"></sds-icon>\n\t\t\t</div>\n\t\t\t<div class=\"sds-notification__content\">\n\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t</div>\n\t\t\t${this.removableLabel\n\t\t\t\t? html`<div class=\"sds-notification__actions\">\n\t\t\t\t\t\t<sds-button icon variant=\"tertiary\" color=\"${colorPalette}\" size=\"sm\" @click=${this._remove} aria-label=\"${this.removableLabel}\">\n\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"sm\"></sds-icon>\n\t\t\t\t\t\t</sds-button>\n\t\t\t\t\t</div>`\n\t\t\t\t: nothing}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-notification': SDSNotification;\n\t}\n}\n"]}

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

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

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;CAgCf;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":"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"}

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,7 @@ let SDSRadio = class SDSRadio extends LitElement {
         };
         this._handleClick = (event) => {
             event.stopImmediatePropagation();
-            if (event.currentTarget === event.target && !this.disabled) {
+            if (event.currentTarget === event.target && !this.disabled && !this.readOnly) {
                 this.shadowRoot?.querySelector('input')?.click();
             }
         };
@@ -106,10 +111,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 +150,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 +193,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,22 +207,22 @@ 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}"
-						?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}"
+					?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>
 		`;
     }
@@ -253,6 +254,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);