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

package/dist/sheriff-web-components.js

@@ -604,14 +604,15 @@ const styles$g = i$4`
 		--_sds-alert-content-gap: var(--sds-alert-content-gap, var(--sds-spacing-3xs));
 
 		--_sds-alert-font-family: var(--sds-alert-font-family, var(--sds-typography-font-family-roboto));
-		--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-md));
-		--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-desktop-font-weight));
-		--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-squeezed-md));
 		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-info-text-default));
 
-		--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-typography-body-lg-desktop-tall-font-size));
+		--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-md));
+		--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));
+
+		--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-md));
 		--_sds-alert-title-font-weight: var(--sds-alert-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));
-		--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));
+		--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-md));
 
 		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-info-text-subtle));
 		--_sds-alert-max-line-width: var(--sds-alert-max-line-width, var(--sds-typography-max-line-width));
@@ -624,16 +625,42 @@ const styles$g = i$4`
 		display: flex;
 		gap: var(--_sds-alert-column-gap);
 		padding: var(--_sds-alert-padding);
-
 		background-color: var(--_sds-alert-background-color);
 		border: var(--_sds-alert-border-width) solid var(--_sds-alert-border-color);
 		border-radius: var(--_sds-alert-border-radius);
 		color: var(--_sds-alert-text-color);
-
 		font-family: var(--_sds-alert-font-family);
 		text-align: left;
 	}
 
+	:host([data-palette='success']) {
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-success-text-subtle));
+		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-success-border-default));
+		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-success-surface-tinted));
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-success-text-default));
+	}
+
+	:host([data-palette='danger']) {
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-danger-text-subtle));
+		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-danger-border-default));
+		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-danger-surface-tinted));
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-default));
+	}
+
+	:host([data-palette='attention']) {
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-text-subtle));
+		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-attention-border-default));
+		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-attention-surface-tinted));
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));
+	}
+
+	:host([data-palette='warning']) {
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-warning-text-subtle));
+		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-warning-border-default));
+		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-warning-surface-tinted));
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-warning-text-default));
+	}
+
 	.sds-alert__type {
 		color: var(--_sds-alert-icon-color);
 	}
@@ -648,6 +675,7 @@ const styles$g = i$4`
 
 	.sds-alert__actions {
 		--sds-button-padding-inline: 0;
+		--sds-button-text-color: var(--sds-color-action-default);
 	}
 
 	.sds-alert__icon {
@@ -656,82 +684,41 @@ const styles$g = i$4`
 		z-index: 1;
 	}
 
-	:host([color='success']) {
-		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-success-surface-tinted));
-		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-success-border-default));
-		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));
-		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-success-text-subtle));
-
-		sds-button {
-			--sds-button-text-color: var(--sds-color-alert-success-action-default);
-		}
-
-		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-button:active {
-			--sds-button-background-color: var(--sds-color-alert-success-surface-active);
-			--sds-button-border-color: var(--sds-color-alert-success-surface-active);
-		}
-	}
-
-	:host([color='attention']) {
-		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-attention-surface-tinted));
-		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-attention-border-default));
-		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));
-		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-text-subtle));
-
-		sds-button {
-			--sds-button-text-color: var(--sds-color-alert-attention-border-default);
-		}
-
-		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-button:active {
-			--sds-button-background-color: var(--sds-color-alert-attention-surface-active);
-			--sds-button-border-color: var(--sds-color-alert-attention-surface-active);
-		}
-	}
-
-	:host([color='danger']) {
-		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-danger-surface-tinted));
-		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-danger-border-default));
-		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-default));
-		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-danger-text-subtle));
-	}
-
 	:host([variant='secondary']) {
 		--_sds-alert-background-color: var(--sds-alert-background-color, transparent);
 		--_sds-alert-border-color: var(--sds-alert-border-color, transparent);
-		--_sds-alert-padding: var(--sds-alert-padding, 0);
+
+		--_sds-alert-padding: var(--sds-alert-padding, var(--sds-spacing-4xs));
 		--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-3xs));
-		--_sds-alert-content-gap: var(--sds-alert-content-gap, 0);
+		--_sds-alert-content-gap: var(--sds-alert-content-gap, var(--sds-spacing-4xs));
+
+		--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));
+		--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));
 
 		::slotted([slot='message']) {
 			padding: 3px 0 !important;
 		}
 	}
 
-	:host([variant='secondary']):host([color='info']) {
-		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-info-text-subtle));
+	:host([variant='secondary']):host([size='sm']) {
+		--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-sm));
+		--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-sm));
+		--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-sm));
 	}
 
-	:host([variant='secondary']):host([color='success']) {
-		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-success-text-subtle));
+	:host([variant='secondary']):host([size='md']) {
+		--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-md));
+		--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));
+		--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-md));
+		--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-md));
 	}
 
-	:host([variant='secondary']):host([color='attention']) {
-		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-subtle));
-		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-action-default));
-	}
-
-	:host([variant='secondary']):host([color='danger']) {
-		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-subtle));
+	:host([variant='secondary']):host([size='lg']) {
+		--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-lg));
+		--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-lg));
+		--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-lg));
 	}
 
 	::slotted([slot='title']),
@@ -813,6 +800,29 @@ class t extends e$1 {
 }
 t.directiveName = "unsafeSVG", t.resultType = 2;
 const o = e$2(t);
+const SYSTEM_ICONS = [
+  "arrow_forward-material-outlined",
+  "check_circle-material-filled",
+  "close-material-outlined",
+  "dangerous-material-filled",
+  "InformationSquareFill-aksel-filled",
+  "lock-material-filled",
+  "search-material-filled",
+  "warning-material-filled"
+];
+const isSystemIcon = (name) => {
+  return SYSTEM_ICONS.includes(name);
+};
+const systemIcons = {
+  "arrow_forward-material-outlined": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M662.82-440.39H145.87v-79.22h516.95L423.87-758.57 480-814.7 814.7-480 480-145.87l-56.13-55.56z"/></svg>`,
+  "check_circle-material-filled": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="m419.87-289.52 289.22-289.22-57.31-56.87L419.87-403.7 304.96-518.61l-56.31 56.87zm60.21 223.65q-85.47 0-161.01-32.39-75.53-32.4-131.97-88.84T98.26-318.99q-32.39-75.46-32.39-160.93 0-86.47 32.39-162.01 32.4-75.53 88.75-131.5t131.85-88.62 161.01-32.65q86.52 0 162.12 32.61 75.61 32.6 131.53 88.5 55.93 55.89 88.55 131.45Q894.7-566.58 894.7-480q0 85.55-32.65 161.07-32.65 75.53-88.62 131.9T642.01-98.26q-75.46 32.39-161.93 32.39"/></svg>`,
+  "close-material-outlined": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M249-193.43 193.43-249l231-231-231-231L249-766.57l231 231 231-231L766.57-711l-231 231 231 231L711-193.43l-231-231z"/></svg>`,
+  "dangerous-material-filled": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M324.35-105.87 105.87-324.35v-311.87L324.35-854.7h311.87L854.7-636.22v311.87L636.22-105.87zm34.91-206.87L480-433.48l120.74 120.74 47.09-46.52L526.52-480l121.31-120.74-47.09-47.09L480-526.52 359.26-647.83l-46.52 47.09L433.48-480 312.74-359.26z"/></svg>`,
+  "InformationSquareFill-aksel-filled": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>`,
+  "lock-material-filled": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M225.09-67q-32.68 0-55.95-23.27t-23.27-55.95v-423.82q0-32.91 23.27-56.35t55.95-23.44h58.69v-83.56q0-82.44 57.17-140.18 57.16-57.73 139.02-57.73t139.05 57.73q57.2 57.74 57.2 140.18v83.56h58.69q32.91 0 56.35 23.44t23.44 56.35v423.82q0 32.68-23.44 55.95T734.91-67zm255.08-214.13q31.83 0 54.33-22.03t22.5-52.97q0-30-22.67-54.5t-54.5-24.5-54.33 24.5-22.5 55 22.67 52.5 54.5 22M363-649.83h234v-83.43q0-49.96-33.79-84.11-33.8-34.15-82.96-34.15t-83.21 34.15Q363-783.22 363-733.26z"/></svg>`,
+  "search-material-filled": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M795.43-105.17 529.04-371q-29.43 24.26-69.11 37.94-39.67 13.67-85.32 13.67-112.12 0-189.87-77.83Q107-475.04 107-585t77.83-187.78q77.82-77.83 188.28-77.83t187.78 77.83q77.33 77.82 77.33 187.93 0 43.98-13.15 83.13-13.16 39.15-39.46 73.59L853-162.74zM373.81-398.61q77.66 0 131.42-54.53Q559-507.67 559-585t-53.85-131.86-131.34-54.53q-78.33 0-132.96 54.53T186.22-585t54.55 131.86 133.04 54.53"/></svg>`,
+  "warning-material-filled": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M27.56-112.65 480-894.7l452.44 782.05zm456.62-125.48q13.15 0 22.61-9.64 9.47-9.65 9.47-22.8t-9.64-22.33q-9.65-9.19-22.8-9.19t-22.61 9.36q-9.47 9.36-9.47 22.51t9.64 22.62q9.65 9.47 22.8 9.47M454-348h60v-219.48h-60z"/></svg>`
+};
 const loadLocalIcons = (name) => import(`@politiet/sheriff-icons/dist/assets/${name}.js`).then(({ default: svg }) => {
   return svg;
 }).catch((error) => {
@@ -828,6 +838,7 @@ class SDSIconLoader {
   constructor() {
     this.cache = /* @__PURE__ */ new Map();
     this._loadLocal = false;
+    this._disableSystemIcons = false;
     this.resolver = this._loadLocal ? loadLocalIcons : loadCdnIcons;
   }
   get loadLocal() {
@@ -837,7 +848,14 @@ class SDSIconLoader {
     this._loadLocal = value;
     this.resolver = value ? loadLocalIcons : loadCdnIcons;
   }
+  set disableSystemIcons(value) {
+    this._disableSystemIcons = value;
+  }
   resolve(name, onResolved) {
+    if (!this._disableSystemIcons && isSystemIcon(name)) {
+      onResolved(systemIcons[name]);
+      return;
+    }
     let cached = this.cache.get(name);
     if (typeof cached === "string") {
       onResolved(cached);
@@ -989,8 +1007,8 @@ const e2 = e$2(class extends i2 {
 });
 const styles$e = i$4`
 	:host {
-		--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-default));
-		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));
+		--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
 		--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));
 		--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));
 		--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));
@@ -998,14 +1016,14 @@ const styles$e = i$4`
 		--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));
 		--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));
 		--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));
-		--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));
 		--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));
 		--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));
 		--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));
 		--_sds-button-padding-block: var(--sds-button-padding-block, 0);
 		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));
 		--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-contrast-default));
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
 
 		display: inline-block;
 		box-sizing: border-box;
@@ -1031,8 +1049,8 @@ const styles$e = i$4`
 		text-align: center;
 
 		&:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-hover));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-hover));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
 		}
 
 		&:focus-visible {
@@ -1042,8 +1060,8 @@ const styles$e = i$4`
 		}
 
 		&:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-active));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-active));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
 		}
 
 		&:disabled {
@@ -1058,78 +1076,33 @@ const styles$e = i$4`
 		text-decoration: none;
 	}
 
-	:host([color='danger']) {
-		--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-default));
-		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));
-
-		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-hover));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-hover));
-		}
-
-		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-active));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-active));
-		}
-	}
-
 	:host([variant='secondary']) {
 		--_sds-button-background-color: var(--sds-button-background-color, transparent);
-		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));
+		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
 
 		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
 		}
 
 		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-hover)));
 		}
 	}
 
 	:host([variant='tertiary']) {
 		--_sds-button-background-color: var(--sds-button-background-color, transparent);
 		--_sds-button-border-color: var(--sds-button-border-color, transparent);
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));
-
-		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-hover));
-		}
-
-		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-active));
-		}
-	}
-
-	:host([variant='secondary']):host([color='danger']) {
-		--_sds-button-background-color: var(--sds-button-background-color, transparent);
-		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));
-
-		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));
-		}
-
-		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));
-		}
-	}
-
-	:host([variant='tertiary']):host([color='danger']) {
-		--_sds-button-background-color: var(--sds-button-background-color, transparent);
-		--_sds-button-border-color: var(--sds-button-border-color, transparent);
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
 
 		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-hover));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-surface-hover, --sds-color-main-surface-hover));
 		}
 
 		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-active));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
 		}
 	}
 
@@ -1229,8 +1202,7 @@ let SDSButton = class extends i$1 {
   }
   updated(changed) {
     if (changed.has("variant") && this.variant === "critical") {
-      this.variant = "primary";
-      this.color = "danger";
+      this.setAttribute("data-palette", "danger");
     }
   }
   focus() {
@@ -1247,12 +1219,6 @@ let SDSButton = class extends i$1 {
       "sds-button": true,
       "sds-button--as-link": !!this.href
     };
-    let loaderColor;
-    if (this.color === "danger") {
-      loaderColor = ["primary", "critical"].includes(this.variant) ? "danger" : "danger-contrast";
-    } else {
-      loaderColor = ["primary", "critical"].includes(this.variant) ? "accent" : "accent-contrast";
-    }
     if (this.href) {
       return x` <a id="link" class="${e2(buttonClasses)}" href="${this.href}" target="${o$1(this.target)}">
 				<slot name="before"></slot>
@@ -1271,7 +1237,7 @@ let SDSButton = class extends i$1 {
 				?disabled="${this.disabled}"
 				@click="${this._handleClick}"
 			>
-				${this.loading ? x`<sds-loader slot="before" color=${loaderColor}></sds-loader>` : E} ${this.loading ? E : x`<slot name="before"></slot>`}
+				${this.loading ? x`<sds-loader slot="before" ?contrast="${this.variant !== "primary"}"></sds-loader>` : E} ${this.loading ? E : x`<slot name="before"></slot>`}
 				<slot></slot>
 				${this.loading ? E : x`<slot name="after"></slot>`}
 			</button>
@@ -1289,9 +1255,6 @@ __decorateClass$f([
 __decorateClass$f([
   n2({ type: Boolean, reflect: true })
 ], SDSButton.prototype, "loading", 2);
-__decorateClass$f([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "color", 2);
 __decorateClass$f([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "form", 2);
@@ -1338,8 +1301,9 @@ const alertIcons = {
 let SDSAlert = class extends i$1 {
   constructor() {
     super(...arguments);
-    this.color = "info";
     this.variant = "primary";
+    this.size = "md";
+    this.palette = "info";
     this._remove = () => {
       this.dispatchEvent(
         new CustomEvent("sds-remove", {
@@ -1350,17 +1314,18 @@ let SDSAlert = class extends i$1 {
     };
   }
   render() {
-    const buttonColor = this.color === "danger" ? "danger" : "accent";
+    const iconSize = this.variant === "primary" ? "md" : this.size ?? "md";
+    const iconName = alertIcons[this.palette] ?? alertIcons["info"];
     return x`<div class="sds-alert">
 			<div class="sds-alert__type">
-				<sds-icon class="sds-alert__icon" name="${alertIcons[this.color]}" size="md"></sds-icon>
+				<sds-icon class="sds-alert__icon" name="${iconName}" size="${iconSize}"></sds-icon>
 			</div>
 			<div class="sds-alert__content">
 				<slot name="title"></slot>
 				<slot name="message"></slot>
 			</div>
 			${this.removableLabel && this.variant === "primary" ? x`<div class="sds-alert__actions">
-						<sds-button icon variant="tertiary" color="${buttonColor}" size="sm" @click=${this._remove} aria-label="${this.removableLabel}">
+						<sds-button icon variant="tertiary" size="sm" @click=${this._remove} aria-label="${this.removableLabel}">
 							<sds-icon name="close-material-outlined" size="sm"></sds-icon>
 						</sds-button>
 					</div>` : E}
@@ -1370,13 +1335,16 @@ let SDSAlert = class extends i$1 {
 SDSAlert.styles = [styles$g];
 __decorateClass$e([
   n2({ type: String, reflect: true })
-], SDSAlert.prototype, "color", 2);
+], SDSAlert.prototype, "variant", 2);
 __decorateClass$e([
   n2({ type: String, reflect: true })
-], SDSAlert.prototype, "variant", 2);
+], SDSAlert.prototype, "size", 2);
 __decorateClass$e([
   n2({ type: String, attribute: "removable-label", reflect: true })
 ], SDSAlert.prototype, "removableLabel", 2);
+__decorateClass$e([
+  n2({ type: String, attribute: "data-palette", reflect: true })
+], SDSAlert.prototype, "palette", 2);
 SDSAlert = __decorateClass$e([
   guardedCustomElement("sds-alert")
 ], SDSAlert);
@@ -1403,7 +1371,7 @@ function validateSlotContent(slot, allowedTags, allowText, warningMessage) {
 }
 const styles$d = i$4`
 	:host {
-		--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-tinted));
+		--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-tinted));
 		--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));
 		--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));
 		--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));
@@ -1411,9 +1379,9 @@ const styles$d = i$4`
 		--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));
 		--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));
 		--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));
-		--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-accent-action-default));
+		--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-main-action-default));
 
-		--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-accent-text-default));
+		--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-main-text-default));
 		--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));
 		--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));
 		--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));
@@ -1444,11 +1412,11 @@ const styles$d = i$4`
 		flex: 1;
 
 		&:hover {
-			--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-hover));
+			--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-hover));
 		}
 
 		&:active {
-			--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-active));
+			--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-active));
 		}
 
 		&:focus-visible {
@@ -1579,23 +1547,23 @@ SDSCard = __decorateClass$d([
 ], SDSCard);
 const styles$c = i$4`
 	:host {
-		--_sds-checkbox-block-gap: var(--sds-checkbox-label-gap, var(--sds-spacing-4xs));
-		--_sds-checkbox-inline-gap: var(--sds-checkbox-label-gap, var(--sds-spacing-3xs));
+		--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));
+		--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));
 		--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));
 
-		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-md));
+		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));
 		--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));
-		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));
 		--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));
 
-		--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, --sds-color-neutral-surface-default);
+		--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-default));
 		--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));
 		--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));
 		--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));
 		--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);
-		--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-radio-check-md));
+		--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));
 		--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);
-		--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-accent-action-contrast-default));
+		--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));
 
 		--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));
 		--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));
@@ -1613,6 +1581,7 @@ const styles$c = i$4`
 	}
 
 	.sds-checkbox {
+		align-items: start;
 		display: grid;
 		font-family: var(--_sds-checkbox-font-family);
 		gap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);
@@ -1633,15 +1602,19 @@ const styles$c = i$4`
 		}
 	}
 
+	.sds-checkbox--error {
+		--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));
+	}
+
 	.sds-checkbox__label {
 		grid-column: content;
-		align-items: flex-start;
+		align-self: center;
 		cursor: pointer;
 		color: var(--_sds-checkbox-label-text-color);
 		display: inline-flex;
 		font-size: var(--_sds-checkbox-label-font-size);
 		font-weight: var(--_sds-checkbox-label-font-weight);
-		gap: var(--_sds-checkbox-label-gap);
+		gap: var(--_sds-checkbox-inline-gap);
 		line-height: var(--_sds-checkbox-label-line-height);
 	}
 
@@ -1673,8 +1646,8 @@ const styles$c = i$4`
 		}
 
 		&[checked] {
-			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-default));
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-default));
+			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-default));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-default));
 
 			&::after {
 				content: '';
@@ -1684,7 +1657,7 @@ const styles$c = i$4`
 				background-color: var(--_sds-checkbox-input-icon-color);
 				transform-origin: bottom left;
 				clip-path: path(
-					'M13.1678 4.91802C13.5583 4.52749 14.1913 4.52749 14.5819 4.91802C14.9724 5.30854 14.9724 5.94156 14.5819 6.33208L8.20686 12.7071C8.01933 12.8946 7.76501 13 7.49983 13C7.23464 13 6.98032 12.8946 6.79279 12.7071L3.41779 9.33208C3.0273 8.94158 3.02735 8.30855 3.41779 7.91802C3.78391 7.5519 4.36291 7.52931 4.75569 7.84966L4.83186 7.91802L7.49983 10.586L13.1678 4.91802Z'
+					'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'
 				);
 				transform: translate(-2px, -2px);
 			}
@@ -1699,21 +1672,21 @@ const styles$c = i$4`
 		}
 
 		&:hover {
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-hover));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
 		}
 
 		&:active:not([readonly]) {
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-active));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
 		}
 
 		&[checked]:hover {
-			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-hover));
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-hover));
+			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-hover));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
 		}
 
 		&[checked]:active:not([readonly]) {
-			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-active));
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-active));
+			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-active));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
 		}
 
 		&:focus-visible {
@@ -1759,12 +1732,14 @@ const styles$c = i$4`
 	}
 
 	:host([size='sm']) {
-		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-sm));
-		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-sm));
-		--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-radio-check-sm));
+		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));
+		--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));
 
 		.sds-checkbox__input:checked::after {
-			transform: translate(-3px, -3px);
+			clip-path: path(
+				'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'
+			);
 		}
 
 		.sds-checkbox__label {
@@ -1773,12 +1748,14 @@ const styles$c = i$4`
 	}
 
 	:host([size='lg']) {
-		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-lg));
-		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-lg));
-		--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-radio-check-lg));
+		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));
+		--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));
 
 		.sds-checkbox__input:checked::after {
-			transform: translate(-1px, -1px);
+			clip-path: path(
+				'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'
+			);
 		}
 
 		.sds-checkbox__label {
@@ -1904,6 +1881,7 @@ let SDSCheckbox = class extends i$1 {
 					type="checkbox"
 					name="${o$1(this.name)}"
 					value="${o$1(this.value)}"
+					.checked="${this.checked}"
 					?checked="${this.checked}"
 					?disabled="${this.disabled}"
 					?required="${this.required}"
@@ -1997,6 +1975,10 @@ const styles$b = i$4`
 		}
 	}
 
+	sds-alert {
+		--sds-alert-padding: 0px;
+	}
+
 	.sds-checkbox-group__legend {
 		display: flex;
 		align-items: center;
@@ -2124,7 +2106,7 @@ let SDSCheckboxGroup = class extends i$1 {
 				<div class="sds-checkbox-group__checkboxes" @change=${this._handleCheckboxChange}>
 					<slot @slotchange=${this._handleSlotChange}></slot>
 				</div>
-				${this.errorMessage ? x`<sds-alert variant="secondary" color="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : E}
+				${this.errorMessage ? x`<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : E}
 			</fieldset>
 		`;
   }
@@ -2168,7 +2150,7 @@ const styles$a = i$4`
 		--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));
 		--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
 
-		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-border-subtle));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-border-subtle));
 		--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));
 		--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));
 
@@ -2177,45 +2159,46 @@ const styles$a = i$4`
 		--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));
 		--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));
 
-		--_sds-chip-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));
+		--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));
 
-		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-surface-tinted));
-		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-text-default));
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-tinted));
+		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-text-default));
 
 		display: inline-block;
 		box-sizing: border-box;
 	}
 
-	:host(:disabled) {
+	:host([disabled]) {
 		opacity: var(--_sds-chip-disabled-opacity);
 		cursor: not-allowed;
 		pointer-events: none;
 	}
 
 	:host(:hover) {
-		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-secondary-surface-hover));
-		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-secondary-action-default));
-		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-secondary-action-contrast-default));
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-hover));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
 	}
 
 	:host(:active) {
-		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-secondary-surface-active));
-		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-secondary-action-default));
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-active));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
 	}
 
 	:host([checked]) {
-		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-default));
-		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-default));
-		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
+		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
 	}
 
 	:host([checked]:hover) {
-		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-hover));
-		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
+		--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
 	}
 
 	:host([checked]:active) {
-		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-active));
+		--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
+		--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
 	}
 
 	:host([size='sm']) {
@@ -2267,20 +2250,20 @@ const styles$a = i$4`
 		}
 
 		&.sds-chip--removable {
-			--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-default));
-			--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
-			--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-default));
+			--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
+			--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
+			--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
 
 			&:hover {
-				--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-hover));
-				--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
-				--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-hover));
+				--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
+				--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
+				--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
 			}
 
 			&:active {
-				--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-accent-action-active));
-				--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-accent-action-contrast-default));
-				--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-accent-action-active));
+				--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
+				--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
+				--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
 			}
 		}
 
@@ -2388,7 +2371,16 @@ let SDSChip = class extends i$1 {
 			</button>`;
     }
     return x`<label class="${e2(chipClasses)}" @click="${this._toggle}" @keyup="${this._keypress}">
-			<input id="control" type="checkbox" name="${o$1(this.name)}" value="${o$1(this.value)}" ?checked="${this.checked}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" />
+			<input
+				id="control"
+				type="checkbox"
+				name="${o$1(this.name)}"
+				value="${o$1(this.value)}"
+				.checked="${this.checked}"
+				?checked="${this.checked}"
+				?disabled="${this.disabled}"
+				?readonly="${this.readonly}"
+			/>
 			<slot></slot>
 		</label>`;
   }
@@ -2626,13 +2618,23 @@ SDSHeading = __decorateClass$9([
 ], SDSHeading);
 const styles$8 = i$4`
 	:host {
-		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-action-contrast-default));
-		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-border-subtle));
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
 		--_sds-loader-animation-duration: var(--sds-loader-animation-duration, 2.5s);
 		--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-md));
 
 		display: flex;
 	}
+	:host([contrast]):host([data-palette]),
+	:host([contrast]) {
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
+	}
+
+	:host([data-palette]) {
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
+	}
 
 	:host([size='small']), /* Deprecated */
 	:host([size='sm']) {
@@ -2644,21 +2646,6 @@ const styles$8 = i$4`
 		--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-lg));
 	}
 
-	:host([color='accent-contrast']) {
-		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-border-subtle));
-		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-action-default));
-	}
-
-	:host([color='danger']) {
-		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-action-default));
-		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-border-subtle));
-	}
-
-	:host([color='danger-contrast']) {
-		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-border-subtle));
-		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-action-contrast-default));
-	}
-
 	.sds-loader {
 		animation: sds-loader-rotate-animation linear infinite var(--_sds-loader-animation-duration);
 		box-sizing: border-box;
@@ -2716,18 +2703,14 @@ var __decorateClass$8 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$8(target, key, result);
   return result;
 };
-const VALID_COLORS = ["accent", "accent-contrast", "danger", "danger-contrast"];
 let SDSLoader = class extends i$1 {
   constructor() {
     super(...arguments);
     this.size = "md";
-    this.color = "accent";
+    this.contrast = false;
   }
   render() {
-    const loaderClasses = {
-      "sds-loader": true
-    };
-    return x`<svg aria-label="Laster" class="${e2(loaderClasses)}" role="img" viewBox="0 0 50 50">
+    return x`<svg aria-label="Laster" class="sds-loader" role="img" viewBox="0 0 50 50">
 			<circle class="sds-loader__background" cx="25" cy="25" r="20" fill="none" stroke-width="7"></circle>
 			<circle class="sds-loader__circle" cx="25" cy="25" r="20" fill="none" stroke-width="7"></circle>
 		</svg>`;
@@ -2738,16 +2721,8 @@ __decorateClass$8([
   n2({ type: String, reflect: true })
 ], SDSLoader.prototype, "size", 2);
 __decorateClass$8([
-  n2({
-    type: String,
-    reflect: true,
-    converter: {
-      fromAttribute(value) {
-        return value && VALID_COLORS.includes(value) ? value : "accent";
-      }
-    }
-  })
-], SDSLoader.prototype, "color", 2);
+  n2({ type: Boolean, reflect: true })
+], SDSLoader.prototype, "contrast", 2);
 SDSLoader = __decorateClass$8([
   guardedCustomElement("sds-loader")
 ], SDSLoader);
@@ -2971,17 +2946,17 @@ const styles$6 = i$4`
 		--_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-md));
+		--_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-squeezed-md));
+		--_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-md));
+		--_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-squeezed-md));
+		--_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-radio-check-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));
@@ -3013,6 +2988,10 @@ const styles$6 = i$4`
 		}
 	}
 
+	.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;
@@ -3064,9 +3043,9 @@ const styles$6 = i$4`
 		}
 
 		&[checked] {
-			--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-accent-action-default));
-			--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-accent-action-default));
-			--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-accent-action-contrast-default));
+			--_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));
 
 			&[readonly] {
 				--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));
@@ -3079,22 +3058,22 @@ const styles$6 = i$4`
 
 		&: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-accent-action-hover));
+			--_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-accent-action-hover));
-				--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-accent-action-hover));
+				--_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));
 			}
 		}
 
 		&: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-accent-action-active));
+			--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));
 
 			&[checked] {
-				--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-accent-action-active));
-				--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-accent-action-active));
+				--_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));
 			}
 		}
@@ -3137,9 +3116,9 @@ const styles$6 = i$4`
 	}
 
 	:host([size='sm']) {
-		--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-sm));
-		--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-squeezed-sm));
-		--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-radio-check-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 {
@@ -3148,9 +3127,9 @@ const styles$6 = i$4`
 	}
 
 	:host([size='lg']) {
-		--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-lg));
-		--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-squeezed-lg));
-		--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-radio-check-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 {
@@ -3229,7 +3208,8 @@ let SDSRadio = class extends i$1 {
     };
     this._handleClick = (event) => {
       event.stopImmediatePropagation();
-      if (event.currentTarget === event.target && !this.disabled && !this.readOnly) {
+      const clickedOnUs = event.target instanceof Node && this.shadowRoot?.contains(event.target);
+      if (clickedOnUs && !this.disabled && !this.readOnly) {
         this.shadowRoot?.querySelector("input")?.click();
       }
     };
@@ -3359,6 +3339,7 @@ let SDSRadio = class extends i$1 {
 					name="${o$1(this.name)}"
 					value="${o$1(this.value)}"
 					?checked="${this.checked}"
+					.checked="${this.checked}"
 					?disabled="${this.disabled}"
 					?required="${this.required}"
 					?readonly="${this.readOnly}"
@@ -3455,6 +3436,10 @@ const styles$5 = i$4`
 		}
 	}
 
+	sds-alert {
+		--sds-alert-padding: 0px;
+	}
+
 	.sds-radio-group__legend {
 		display: flex;
 		align-items: center;
@@ -3582,7 +3567,7 @@ let SDSRadioGroup = class extends i$1 {
 				<div class="${e2(radioClasses)}" @change=${this._handleRadioChange}>
 					<slot @slotchange=${this._handleSlotChange}></slot>
 				</div>
-				${this.errorMessage ? x`<sds-alert variant="secondary" color="danger">
+				${this.errorMessage ? x`<sds-alert variant="secondary" data-palette="danger">
 							<p slot="message">${this.errorMessage}</p>
 						</sds-alert>` : E}
 			</fieldset>
@@ -3765,8 +3750,8 @@ const styles$4 = i$4`
 	}
 
 	.sds-switch__input:checked:not([readonly]) {
-		--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-accent-action-default));
-		--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-accent-action-default));
+		--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-main-action-default));
+		--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-main-action-default));
 		--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));
 	}
 
@@ -3883,6 +3868,7 @@ let SDSSwitch = class extends i$1 {
 			role="switch"
 			?readonly="${this.readOnly}"
 			?disabled="${this.disabled}"
+			.checked="${this.checked}"
 			?checked="${this.checked}"
 			name="${o$1(this.name)}"
 			@change="${this._handleChange}"
@@ -3928,13 +3914,13 @@ SDSSwitch = __decorateClass$4([
 ], SDSSwitch);
 const styles$3 = i$4`
 	:host {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-neutral-surface-tinted));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-neutral-text-default));
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
 
 		--_sds-tag-font-family: var(--sds-tag-font-family, var(--sds-typography-font-family-roboto));
 		--_sds-tag-font-weight: var(--sds-tag-font-weight, var(--sds-typography-font-weight-regular));
-		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-md));
-		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-md));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-md));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-md));
 
 		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-md));
 		--_sds-tag-gap: var(--sds-tag-gap, var(--sds-spacing--zero));
@@ -3966,52 +3952,26 @@ const styles$3 = i$4`
 		user-select: text;
 	}
 
-	:host([color='primary']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-primary-surface-tinted));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-primary-text-default));
-	}
-
-	:host([color='info']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-info-surface-tinted));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-info-text-default));
-	}
-
-	:host([color='success']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-success-surface-tinted));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-success-text-default));
-	}
-
-	:host([color='attention']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-attention-surface-hover));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-attention-text-default));
+	:host([data-palette]) {
+		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-surface-tinted));
+		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-text-default));
 	}
 
-	:host([color='warning']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-warning-surface-hover));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-warning-text-default));
-	}
-
-	:host([color='danger']) {
-		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-surface-hover));
-		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-text-default));
-	}
-
-	:host([color='danger-critical']) {
+	:host([data-palette='danger-action']) {
 		--_sds-tag-background-color: var(--sds-tag-background-color, var(--sds-color-alert-danger-action-default));
 		--_sds-tag-text-color: var(--sds-tag-text-color, var(--sds-color-alert-danger-action-contrast-default));
 	}
 
 	:host([size='sm']) {
 		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-sm));
-		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-sm));
-		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-sm));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-sm));
 	}
 
 	:host([size='lg']) {
-		color: red;
 		--_sds-tag-height: var(--sds-tag-height, var(--sds-components-chip-lg));
-		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-lg));
-		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-lg));
+		--_sds-tag-font-size: var(--sds-tag-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-tag-line-height: var(--sds-tag-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 `;
 var __defProp$3 = Object.defineProperty;
@@ -4027,7 +3987,6 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
 let SDSTag = class extends i$1 {
   constructor() {
     super(...arguments);
-    this.color = "neutral";
     this.size = "md";
   }
   render() {
@@ -4040,9 +3999,6 @@ let SDSTag = class extends i$1 {
   }
 };
 SDSTag.styles = [styles$3];
-__decorateClass$3([
-  n2({ type: String, reflect: true })
-], SDSTag.prototype, "color", 2);
 __decorateClass$3([
   n2({ type: String, reflect: true })
 ], SDSTag.prototype, "size", 2);
@@ -4055,7 +4011,7 @@ const styles$2 = i$4`
 		--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));
 		--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));
 		--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));
-		--_sds-text-color: var(--sds-text-color, var(--sds-color-primary-text-default));
+		--_sds-text-color: var(--sds-text-color, var(--sds-color-accent-text-default));
 
 		display: block;
 		box-sizing: border-box;
@@ -4365,7 +4321,7 @@ const styles$1 = i$4`
 		--_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));
 
 		--_sds-textfield-font-family: var(--sds-textfield-font-family, var(--sds-typography-font-family-roboto));
-		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-md));
+		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-md));
 		--_sds-textfield-font-weight: var(--sds-textfield-font-weight, var(--sds-typography-font-weight-regular));
 		--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-md));
 		--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-md));
@@ -4377,12 +4333,12 @@ const styles$1 = i$4`
 		--_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));
 
 		--_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-neutral-text-default));
-		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-md));
+		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-md));
 		--_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));
 		--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));
 
 		--_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-neutral-text-subtle));
-		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-md));
+		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-md));
 		--_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-medium));
 		--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));
 
@@ -4490,11 +4446,11 @@ const styles$1 = i$4`
 
 	:host([size='sm']) {
 		--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-sm));
-		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-sm));
+		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-sm));
-		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-sm));
+		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-sm));
-		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-sm));
+		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-sm));
 		--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));
 		--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-sm)));
@@ -4502,11 +4458,11 @@ const styles$1 = i$4`
 
 	:host([size='lg']) {
 		--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-lg));
-		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-lg));
+		--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-lg));
-		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-lg));
+		--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-lg));
-		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-lg));
+		--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-lg));
 		--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-2xs));
 	}
@@ -4641,7 +4597,7 @@ let SDSTextField = class extends i$1 {
 						?disabled="${this.disabled}"
 						?readonly="${this.readOnly}"
 						placeholder="${o$1(this.placeholder)}"
-						value="${o$1(this.value)}"
+						.value="${this.value ?? ""}"
 						name="${o$1(this.name)}"
 						autocomplete="${o$1(this.autocomplete)}"
 						?required="${this.required}"
@@ -4656,7 +4612,7 @@ let SDSTextField = class extends i$1 {
 					/>
 					<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
 				</div>
-				${this.errorMessage ? x`<sds-alert variant="secondary" color="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : E}
+				${this.errorMessage ? x`<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : E}
 			</div>
 		`;
   }
@@ -4792,7 +4748,7 @@ const styles = i$4`
 			resize: vertical;
 
 			&:hover {
-				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-accent-action-hover));
+				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-hover));
 			}
 
 			&:focus-visible {
@@ -4802,7 +4758,8 @@ const styles = i$4`
 			}
 
 			&:active {
-				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-accent-action-active));
+				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-active));
+				--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-main-text-default));
 			}
 		}
 
@@ -4851,11 +4808,16 @@ const styles = i$4`
 			& .sds-textarea__input:active {
 				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-active));
 			}
+
+			& :is(sds-alert) {
+				--sds-alert-padding: 0px;
+			}
 		}
 	}
 
 	:host([readonly]) {
 		--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));
+		--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-subtle));
 		.sds-textarea__input {
 			resize: none;
 		}
@@ -4964,7 +4926,9 @@ let SDSTextArea = class extends i$1 {
     if (this.counter === void 0) return E;
     const currentLength = this.value?.length || 0;
     if (this.hasTypedTooManyCharacters()) {
-      return x`<p class="sds-textarea__character-counter">Du har ${currentLength - this.counter} tegn for mye</p>`;
+      return x`<sds-alert variant="secondary" data-palette="danger"
+				><p class="sds-textarea__character-counter" slot="message">Du har ${currentLength - this.counter} tegn for mye</p></sds-alert
+			>`;
     }
     return x`<p class="sds-textarea__character-counter">Du har ${this.counter - currentLength} tegn igjen</p>`;
   }
@@ -5054,7 +5018,7 @@ let SDSTextArea = class extends i$1 {
 						@blur="${this._handleBlur}"
 					></textarea>
 				</div>
-				${this.renderCharacterCounter()} ${this.errorMessage ? x`<sds-alert variant="secondary" color="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : E}
+				${this.errorMessage ? x`<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : E} ${this.renderCharacterCounter()}
 			</div>
 		`;
   }