@politiet/sheriff-web-components 2.0.3 → 2.1.0

package/dist/sheriff-web-components.js

@@ -592,7 +592,7 @@ function guardedCustomElement(tagName) {
     }
   };
 }
-const styles$g = i$4`
+const styles$h = i$4`
 	:host {
 		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-info-surface-tinted));
 
@@ -619,6 +619,8 @@ const styles$g = i$4`
 		--_sds-alert-max-line-width: var(--sds-alert-max-line-width, var(--sds-typography-max-line-width));
 		--_sds-alert-padding: var(--sds-alert-padding, var(--sds-spacing-sm));
 
+		--sds-icon-color: var(--sds-alert-icon-color, var(--_sds-alert-icon-color));
+
 		display: block;
 	}
 
@@ -830,7 +832,8 @@ const SYSTEM_ICONS = [
   "InformationSquareFill-aksel-filled",
   "lock-material-filled",
   "search-material-filled",
-  "warning-material-filled"
+  "warning-material-filled",
+  "chevron_up-material-filled"
 ];
 const isSystemIcon = (name) => {
   return SYSTEM_ICONS.includes(name);
@@ -843,7 +846,8 @@ const systemIcons = {
   "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>`
+  "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>`,
+  "chevron_up-material-filled": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32"><path d="m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z"/></svg>`
 };
 const loadLocalIcons = (name) => import(`@politiet/sheriff-icons/dist/assets/${name}.js`).then(({ default: svg }) => {
   return svg;
@@ -899,7 +903,7 @@ class SDSIconLoader {
     return this.resolver;
   }
 }
-const styles$f = i$4`
+const styles$g = i$4`
 	:host {
 		--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));
 		--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
@@ -932,14 +936,14 @@ const styles$f = i$4`
 		overflow: hidden;
 	}
 `;
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 let SDSIcon = class extends i$1 {
@@ -985,24 +989,24 @@ let SDSIcon = class extends i$1 {
     }
   }
 };
-SDSIcon.styles = [styles$f];
+SDSIcon.styles = [styles$g];
 SDSIcon.iconLoader = new SDSIconLoader();
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "name", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "size", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "color", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "label", 2);
-__decorateClass$g([
+__decorateClass$h([
   r()
 ], SDSIcon.prototype, "svg", 2);
-SDSIcon = __decorateClass$g([
+SDSIcon = __decorateClass$h([
   guardedCustomElement("sds-icon")
 ], SDSIcon);
 /**
@@ -1032,7 +1036,7 @@ const e2 = e$2(class extends i2 {
     return T;
   }
 });
-const styles$e = i$4`
+const styles$f = i$4`
 	:host {
 		--_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)));
@@ -1188,14 +1192,14 @@ const styles$e = i$4`
 		min-width: var(--_sds-button-min-height);
 	}
 `;
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let SDSButton = class extends i$1 {
@@ -1306,52 +1310,52 @@ let SDSButton = class extends i$1 {
 		`;
   }
 };
-SDSButton.styles = [styles$e];
+SDSButton.styles = [styles$f];
 SDSButton.formAssociated = true;
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: Boolean, reflect: true })
 ], SDSButton.prototype, "disabled", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: Boolean, reflect: true })
 ], SDSButton.prototype, "icon", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: Boolean, reflect: true })
 ], SDSButton.prototype, "loading", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "form", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "href", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "name", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "size", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "target", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "type", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "value", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "variant", 2);
-SDSButton = __decorateClass$f([
+SDSButton = __decorateClass$g([
   guardedCustomElement("sds-button")
 ], SDSButton);
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 const alertIcons = {
@@ -1394,20 +1398,20 @@ let SDSAlert = class extends i$1 {
 		</div>`;
   }
 };
-SDSAlert.styles = [styles$g];
-__decorateClass$e([
+SDSAlert.styles = [styles$h];
+__decorateClass$f([
   n2({ type: String, reflect: true })
 ], SDSAlert.prototype, "variant", 2);
-__decorateClass$e([
+__decorateClass$f([
   n2({ type: String, reflect: true })
 ], SDSAlert.prototype, "size", 2);
-__decorateClass$e([
+__decorateClass$f([
   n2({ type: String, attribute: "removable-label", reflect: true })
 ], SDSAlert.prototype, "removableLabel", 2);
-__decorateClass$e([
+__decorateClass$f([
   n2({ type: String, attribute: "data-palette", reflect: true })
 ], SDSAlert.prototype, "palette", 2);
-SDSAlert = __decorateClass$e([
+SDSAlert = __decorateClass$f([
   guardedCustomElement("sds-alert")
 ], SDSAlert);
 function validateSlotContent(slot, allowedTags, allowText, warningMessage) {
@@ -1431,7 +1435,7 @@ function validateSlotContent(slot, allowedTags, allowText, warningMessage) {
     console.warn(warningMessage, ...invalid);
   }
 }
-const styles$d = i$4`
+const styles$e = i$4`
 	:host {
 		--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));
 		--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));
@@ -1553,14 +1557,14 @@ const styles$d = i$4`
 		}
 	}
 `;
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 let SDSCard = class extends i$1 {
@@ -1591,20 +1595,20 @@ let SDSCard = class extends i$1 {
     return x`<article class="sds-card">${this.link ? x`<a href="${this.link}" class="sds-card__content">${cardBody}</a>` : x`<div class="sds-card__content">${cardBody}</div>`}</article>`;
   }
 };
-SDSCard.styles = [styles$d];
-__decorateClass$d([
+SDSCard.styles = [styles$e];
+__decorateClass$e([
   n2({ type: String, reflect: true })
 ], SDSCard.prototype, "link", 2);
-__decorateClass$d([
+__decorateClass$e([
   e$3("slot#heading")
 ], SDSCard.prototype, "headingSlot", 2);
-__decorateClass$d([
+__decorateClass$e([
   e$3("slot#text")
 ], SDSCard.prototype, "textSlot", 2);
-SDSCard = __decorateClass$d([
+SDSCard = __decorateClass$e([
   guardedCustomElement("sds-card")
 ], SDSCard);
-const styles$c = i$4`
+const styles$d = i$4`
 	:host {
 		--_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));
@@ -1625,7 +1629,7 @@ const styles$c = i$4`
 		--_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-text-subtle, 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));
+		--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-content-md));
 		--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
 		--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));
 
@@ -1822,25 +1826,28 @@ const styles$c = i$4`
 		}
 	}
 `;
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let SDSCheckbox = class extends i$1 {
   constructor() {
     super();
     this.checked = false;
-    this.disabled = false;
     this.error = false;
     this.required = false;
     this.size = "md";
     this.readOnly = false;
+    this._disabled = false;
+    this._disabledIsAuthorControlled = false;
+    this._settingDisabledFromParent = false;
+    this._parentRequestDisabled = false;
     this._initialChecked = false;
     this._handleChange = (event) => {
       event.stopImmediatePropagation();
@@ -1866,6 +1873,33 @@ let SDSCheckbox = class extends i$1 {
     this.internals = this.attachInternals();
     this.attachShadow({ mode: "open", delegatesFocus: true });
   }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(value) {
+    const newVal = value ?? false;
+    const oldVal = this._disabled;
+    if (oldVal === newVal) return;
+    this._disabled = newVal;
+    this.requestUpdate("disabled", oldVal);
+    if (!this._settingDisabledFromParent) {
+      this._disabledIsAuthorControlled = newVal;
+    }
+  }
+  get parentRequestDisabled() {
+    return this._parentRequestDisabled;
+  }
+  set parentRequestDisabled(value) {
+    const newVal = value ?? false;
+    const oldVal = this._parentRequestDisabled;
+    if (oldVal === newVal) return;
+    this._parentRequestDisabled = newVal;
+    this.requestUpdate("parentRequestDisabled", oldVal);
+    if (this._disabledIsAuthorControlled) return;
+    this._settingDisabledFromParent = true;
+    this.disabled = newVal;
+    this._settingDisabledFromParent = false;
+  }
   connectedCallback() {
     super.connectedCallback();
     this._initialChecked = this.checked;
@@ -1914,6 +1948,11 @@ let SDSCheckbox = class extends i$1 {
     if (changedProperties.has("checked")) {
       this._validate();
     }
+    if (!this._disabledIsAuthorControlled && this.disabled !== this._parentRequestDisabled) {
+      this._settingDisabledFromParent = true;
+      this.disabled = this._parentRequestDisabled ?? false;
+      this._settingDisabledFromParent = false;
+    }
   }
   get type() {
     return "checkbox";
@@ -1950,49 +1989,52 @@ let SDSCheckbox = class extends i$1 {
 		`;
   }
 };
-SDSCheckbox.styles = [styles$c];
+SDSCheckbox.styles = [styles$d];
 SDSCheckbox.formAssociated = true;
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: String, reflect: true })
 ], SDSCheckbox.prototype, "name", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: String, reflect: true })
 ], SDSCheckbox.prototype, "label", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: String })
 ], SDSCheckbox.prototype, "value", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "checked", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: Boolean, reflect: true })
-], SDSCheckbox.prototype, "disabled", 2);
-__decorateClass$c([
+], SDSCheckbox.prototype, "disabled", 1);
+__decorateClass$d([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "error", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "required", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: String, reflect: true })
 ], SDSCheckbox.prototype, "size", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: String, attribute: "help-text" })
 ], SDSCheckbox.prototype, "helpText", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: Boolean, attribute: "readonly", reflect: true })
 ], SDSCheckbox.prototype, "readOnly", 2);
-__decorateClass$c([
+__decorateClass$d([
+  n2({ type: Boolean, attribute: false })
+], SDSCheckbox.prototype, "parentRequestDisabled", 1);
+__decorateClass$d([
   e$3("#control")
 ], SDSCheckbox.prototype, "control", 2);
-SDSCheckbox = __decorateClass$c([
+SDSCheckbox = __decorateClass$d([
   guardedCustomElement("sds-checkbox")
 ], SDSCheckbox);
-const styles$b = i$4`
+const styles$c = i$4`
 	:host {
 		--_sds-checkbox-group-gap: var(--sds-checkbox-group-gap, var(--sds-spacing-xs));
 		--_sds-checkbox-group-font-family: var(--sds-checkbox-group-font-family, var(--sds-typography-font-family-roboto));
-		--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-md));
+		--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-content-md));
 		--_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
 		--_sds-checkbox-group-max-line-width: var(--sds-checkbox-group-max-line-width, var(--sds-typography-max-line-width));
 		--_sds-checkbox-group-disabled-opacity: var(--sds-checkbox-group-disabled-opacity, var(--sds-color-states-disabled-opacity));
@@ -2002,7 +2044,7 @@ const styles$b = i$4`
 		--_sds-checkbox-group-legend-help-text-gap: var(--sds-checkbox-group-legend-help-text-gap, var(--sds-spacing-4xs));
 
 		--_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
-		--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-md));
+		--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-content-md));
 		--_sds-checkbox-group-help-text-font-weight: var(--sds-checkbox-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
 		--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));
 
@@ -2068,29 +2110,30 @@ const styles$b = i$4`
 	}
 
 	:host([size='sm']) {
-		--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-sm));
+		--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));
-		--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-sm));
+		--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));
 	}
 
 	:host([size='lg']) {
-		--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-lg));
+		--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));
-		--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-lg));
+		--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 `;
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
+const updatableCheckboxProps = ["disabled", "errorMessage", "readOnly", "size"];
 let SDSCheckboxGroup = class extends i$1 {
   constructor() {
     super(...arguments);
@@ -2111,36 +2154,49 @@ let SDSCheckboxGroup = class extends i$1 {
       );
     };
     this._handleSlotChange = () => {
-      this._updateChildProps(["readOnly", "disabled", "size", "error"]);
+      this._updateChildProps([...updatableCheckboxProps]);
     };
   }
-  _updateChildProps(props) {
-    const checkboxChildren = this._slotElement.assignedElements({ flatten: true });
-    checkboxChildren.forEach((child) => {
-      if (child instanceof SDSCheckbox) {
-        props.forEach((prop) => {
-          if (prop === "error") {
-            child.error = Boolean(this.errorMessage);
-          } else {
-            child[prop] = this[prop];
-          }
-        });
+  _getChildCheckboxes() {
+    return this._slotElement?.assignedElements({ flatten: true }).filter((element) => element.tagName === "SDS-CHECKBOX") ?? [];
+  }
+  _updateChildProps(changedAttributes) {
+    const checkboxes = this._getChildCheckboxes();
+    for (const childCheckbox of checkboxes) {
+      for (const attribute of changedAttributes) {
+        switch (attribute) {
+          case "readOnly":
+            childCheckbox.readOnly = this.readOnly;
+            break;
+          case "disabled":
+            childCheckbox.parentRequestDisabled = this.disabled;
+            break;
+          case "errorMessage":
+            childCheckbox.error = Boolean(this.errorMessage);
+            break;
+          case "size":
+            childCheckbox.size = this.size;
+            break;
+        }
       }
-    });
+    }
   }
   updated(changedProps) {
     super.updated(changedProps);
-    if (changedProps.has("readonly")) {
-      this._updateChildProps(["readOnly"]);
-    }
-    if (changedProps.has("disabled")) {
-      this._updateChildProps(["disabled"]);
+    const changedKeys = Array.from(changedProps.keys());
+    if (changedKeys.includes("errorMessage") || changedKeys.includes("error-message")) {
+      this._updateChildProps(["errorMessage"]);
     }
-    if (changedProps.has("size")) {
-      this._updateChildProps(["size"]);
+  }
+  attributeChangedCallback(name, _old, value) {
+    super.attributeChangedCallback(name, _old, value);
+    if (name === "readonly") {
+      this._updateChildProps(["readOnly"]);
+      return;
     }
-    if (changedProps.has("errorMessage")) {
-      this._updateChildProps(["error"]);
+    const property2 = name;
+    if (updatableCheckboxProps.includes(property2)) {
+      this._updateChildProps([property2]);
     }
   }
   get value() {
@@ -2164,39 +2220,39 @@ let SDSCheckboxGroup = class extends i$1 {
 		`;
   }
 };
-SDSCheckboxGroup.styles = [styles$b];
-__decorateClass$b([
+SDSCheckboxGroup.styles = [styles$c];
+__decorateClass$c([
   n2({ type: String, reflect: true })
 ], SDSCheckboxGroup.prototype, "legend", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: String, attribute: "help-text", reflect: true })
 ], SDSCheckboxGroup.prototype, "helpText", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: String, attribute: "error-message", reflect: true })
 ], SDSCheckboxGroup.prototype, "errorMessage", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: Boolean, attribute: "readonly", reflect: true })
 ], SDSCheckboxGroup.prototype, "readOnly", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckboxGroup.prototype, "disabled", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: String, reflect: true })
 ], SDSCheckboxGroup.prototype, "size", 2);
-__decorateClass$b([
+__decorateClass$c([
   r()
 ], SDSCheckboxGroup.prototype, "_selectedValues", 2);
-__decorateClass$b([
+__decorateClass$c([
   e$3("slot")
 ], SDSCheckboxGroup.prototype, "_slotElement", 2);
-SDSCheckboxGroup = __decorateClass$b([
+SDSCheckboxGroup = __decorateClass$c([
   guardedCustomElement("sds-checkbox-group")
 ], SDSCheckboxGroup);
-const styles$a = i$4`
+const styles$b = i$4`
 	:host {
 		--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));
 		--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));
-		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-md));
+		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-md));
 		--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));
 		--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));
 
@@ -2219,6 +2275,10 @@ const styles$a = i$4`
 
 		display: inline-block;
 		box-sizing: border-box;
+
+		sds-icon {
+			--sds-icon-color: --_sds-chip-text-color;
+		}
 	}
 
 	:host([disabled]) {
@@ -2256,14 +2316,14 @@ const styles$a = i$4`
 
 	:host([size='sm']) {
 		--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
-		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-sm));
+		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));
 		--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));
 	}
 
 	:host([size='lg']) {
 		--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
-		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-lg));
+		--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));
 		--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));
 	}
@@ -2333,14 +2393,14 @@ const styles$a = i$4`
 		}
 	}
 `;
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let SDSChip = class extends i$1 {
@@ -2392,13 +2452,12 @@ let SDSChip = class extends i$1 {
     this._initialChecked = this.checked;
     this.internals.role = "checkbox";
     if (this.checked) {
-      this.internals.setFormValue(this.value ? this.value : "");
+      this.internals.setFormValue(this.value ?? null);
     }
   }
   formResetCallback() {
     this.checked = this._initialChecked;
-    const resetValue = this.checked && this.value ? this.value : "";
-    this.internals.setFormValue(resetValue);
+    this.internals.setFormValue(this.value ?? null);
   }
   focus() {
     if (!this.disabled) this.shadowRoot?.querySelector("input")?.focus();
@@ -2438,35 +2497,231 @@ let SDSChip = class extends i$1 {
 		</label>`;
   }
 };
-SDSChip.styles = [styles$a];
+SDSChip.styles = [styles$b];
 SDSChip.formAssociated = true;
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: String, reflect: true })
 ], SDSChip.prototype, "variant", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: String, reflect: true })
 ], SDSChip.prototype, "size", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "checked", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: String, reflect: true })
 ], SDSChip.prototype, "name", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: String })
 ], SDSChip.prototype, "value", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "disabled", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "readonly", 2);
-__decorateClass$a([
+__decorateClass$b([
   e$3("#control")
 ], SDSChip.prototype, "control", 2);
-SDSChip = __decorateClass$a([
+SDSChip = __decorateClass$b([
   guardedCustomElement("sds-chip")
 ], SDSChip);
+const styles$a = i$4`
+	:host {
+		--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
+
+		--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));
+		--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
+		--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));
+
+		--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));
+		--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));
+		--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
+
+		--_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));
+		--_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));
+		--_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));
+		--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));
+
+		--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);
+
+		--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
+		--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));
+	}
+
+	:host([data-palette]) {
+		--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
+		--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
+	}
+
+	.sds-details {
+		color: var(--_sds-details-text-color);
+
+		&:is([open]) {
+			--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));
+		}
+
+		&:not([data-standalone]) {
+			border-top: solid 1px var(--_sds-details-border-color);
+			border-bottom: var(--_sds-details-border-bottom);
+		}
+
+		/* Setting the border on the summary element preserves the border
+		   when the element has focus
+		*/
+		&:is([data-standalone]) {
+			summary {
+				border-radius: var(--sds-radius-md);
+				border: solid 1px var(--_sds-details-border-color);
+			}
+
+			&:is([open]) {
+				& summary {
+					border-bottom-left-radius: 0px;
+					border-bottom-right-radius: 0px;
+				}
+
+				& .sds-details__content {
+					border-left: solid 1px var(--_sds-details-border-color);
+					border-right: solid 1px var(--_sds-details-border-color);
+					border-bottom: solid 1px var(--_sds-details-border-color);
+					border-bottom-left-radius: var(--sds-radius-md);
+					border-bottom-right-radius: var(--sds-radius-md);
+				}
+			}
+		}
+	}
+
+	.sds-details__summary {
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--_sds-details-summary-padding);
+		background-color: var(--_sds-details-summary-background-color);
+		gap: var(--_sds-details-summary-gap);
+		list-style: none;
+		user-select: none;
+
+		&:hover {
+			--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
+		}
+
+		&:active {
+			--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-details-focus-inner-color);
+			outline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);
+			outline-offset: var(--_sds-details-focus-outline-offset);
+		}
+	}
+
+	.sds-details__summary-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	sds-icon {
+		transition: var(--_sds-details-icon-transition);
+	}
+
+	.sds-details[open] sds-icon {
+		transform: rotate(180deg);
+	}
+
+	.sds-details__content {
+		padding: var(--_sds-details-content-padding);
+		padding-inline-start: var(--_sds-details-content-padding-start);
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.sds-details__content {
+			animation: show-content-keyframes 200ms ease-in-out;
+		}
+	}
+
+	@keyframes show-content-keyframes {
+		from {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	::slotted(*) {
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+
+	::slotted([slot='summary']) {
+		display: inline;
+		margin: 0;
+	}
+`;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$a(target, key, result);
+  return result;
+};
+let SDSDetails = class extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.standalone = false;
+    this.name = void 0;
+    this._handleToggle = (event) => {
+      const details = event.currentTarget;
+      if (this.open !== details.open) {
+        this.open = details.open;
+      }
+      this.dispatchEvent(
+        new CustomEvent("sds-toggle", {
+          detail: { open: details.open },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  render() {
+    return x`
+			<details class="sds-details" .name="${this.name ?? ""}" ?data-standalone="${this.standalone}" ?open="${this.open}" @toggle="${this._handleToggle}">
+				<summary class="sds-details__summary">
+					<sds-icon name="chevron_up-material-filled"></sds-icon>
+					<div class="sds-details__summary-content">
+						<slot name="summary"></slot>
+					</div>
+				</summary>
+				<div class="sds-details__content">
+					<slot></slot>
+				</div>
+			</details>
+		`;
+  }
+};
+SDSDetails.styles = [styles$a];
+__decorateClass$a([
+  n2({ type: Boolean, reflect: true })
+], SDSDetails.prototype, "open", 2);
+__decorateClass$a([
+  n2({ type: Boolean, reflect: true })
+], SDSDetails.prototype, "standalone", 2);
+__decorateClass$a([
+  n2({ type: String, reflect: true })
+], SDSDetails.prototype, "name", 2);
+SDSDetails = __decorateClass$a([
+  guardedCustomElement("sds-details")
+], SDSDetails);
 const styles$9 = i$4`
 	:host {
 		--_sds-heading-font-family: var(--sds-heading-font-family, var(--sds-typography-font-family-roboto));
@@ -2795,7 +3050,7 @@ const styles$7 = i$4`
 		--_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-size: var(--sds-notification-font-size, var(--sds-components-font-size-content-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));
@@ -3494,7 +3749,7 @@ const styles$5 = i$4`
 		--_sds-radio-group-gap: var(--sds-radio-group-gap, var(--sds-spacing-xs));
 		--_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));
 		--_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));
-		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));
+		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-md));
 		--_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
 		--_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));
 		--_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));
@@ -3504,7 +3759,7 @@ const styles$5 = i$4`
 		--_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));
 
 		--_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
-		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));
+		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-md));
 		--_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
 		--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));
 
@@ -3575,16 +3830,16 @@ const styles$5 = i$4`
 	}
 
 	:host([size='sm']) {
-		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-sm));
+		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));
-		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-sm));
+		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));
 	}
 
 	:host([size='lg']) {
-		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-lg));
+		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));
-		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-lg));
+		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 `;
@@ -3738,9 +3993,9 @@ const styles$4 = i$4`
 		--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));
 
 		--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));
-		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-md));
 		--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));
-		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-md));
 
 		--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));
 		--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));
@@ -3785,8 +4040,8 @@ const styles$4 = i$4`
 		--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));
 		--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));
 		--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));
-		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-sm));
-		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-sm));
 	}
 
 	:host([size='l']),
@@ -3794,8 +4049,8 @@ const styles$4 = i$4`
 		--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));
 		--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));
 		--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));
-		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-lg));
-		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-lg));
 	}
 
 	.sds-switch {
@@ -3900,7 +4155,7 @@ let SDSSwitch = class extends i$1 {
     this._initialChecked = false;
     this._handleChange = (event) => {
       event.stopImmediatePropagation();
-      if (!this.disabled && !this.disabled) {
+      if (!this.disabled) {
         const elem = event.target;
         this.checked = elem.checked;
         this.internals.setFormValue(this.checked ? "on" : "off");
@@ -3914,7 +4169,7 @@ let SDSSwitch = class extends i$1 {
     };
     this._handleFocus = (event) => {
       event.stopImmediatePropagation();
-      if (!this.disabled && !this.disabled) {
+      if (!this.disabled) {
         this.dispatchEvent(
           new CustomEvent("focus", {
             bubbles: true,
@@ -4129,7 +4384,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-text-default, var(--sds-color-accent-text-default)));
+		--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
 
 		display: block;
 		box-sizing: border-box;
@@ -4147,7 +4402,7 @@ const styles$2 = i$4`
 	}
 
 	:host([data-palette]) {
-		--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-accent-text-default)));
+		--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
 	}
 
 	/* Mobile */
@@ -4619,20 +4874,20 @@ let SDSTextField = class extends i$1 {
     this.required = false;
     this.size = "md";
     this.hasIcon = false;
-    this._defaultValue = "";
+    this._defaultValue = null;
     this.handleSlotChange = (e3) => {
       const slot = e3.target;
       this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
     };
     this._handleInputChange = (event) => {
       event.stopImmediatePropagation();
-      if (!this.disabled) {
-        const currentValue = event.target.value;
-        this.value = currentValue;
-        this.internals.setFormValue(currentValue === "" ? null : currentValue);
-        this.updateValidity();
-        this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));
+      if (this.disabled || !(event.target instanceof HTMLInputElement)) {
+        return;
       }
+      this.value = event.target.value;
+      this.internals.setFormValue(this.value === "" ? null : this.value);
+      this.updateValidity();
+      this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));
     };
     this._handleSelect = (event) => {
       event.stopImmediatePropagation();
@@ -4666,7 +4921,8 @@ let SDSTextField = class extends i$1 {
   }
   connectedCallback() {
     super.connectedCallback();
-    this._defaultValue = this.value ?? "";
+    this._defaultValue = this.value ?? null;
+    this.internals.setFormValue(this._defaultValue);
   }
   updateValidity() {
     if (this.control.checkValidity()) {
@@ -4676,9 +4932,10 @@ let SDSTextField = class extends i$1 {
     }
   }
   formResetCallback() {
-    this.control.value = this._defaultValue;
-    this.internals.setFormValue(this._defaultValue === "" ? null : this._defaultValue);
-    this.value = this._defaultValue;
+    this.internals.setFormValue(this._defaultValue);
+    const newValue = this._defaultValue ?? "";
+    this.control.value = newValue;
+    this.value = newValue;
     this.updateValidity();
   }
   select() {
@@ -4829,9 +5086,9 @@ const styles = i$4`
 		--_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));
 
 		--_sds-textarea-font-family: var(--sds-textarea-font-family, var(--sds-typography-font-family-roboto));
-		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-md));
+		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-content-md));
 		--_sds-textarea-font-weight: var(--sds-textarea-font-weight, var(--sds-typography-font-weight-regular));
-		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-md));
+		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-content-md));
 		--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-md));
 
 		--_sds-textarea-gap: var(--sds-textarea-gap, var(--sds-spacing-3xs));
@@ -4840,19 +5097,19 @@ const styles = i$4`
 		--_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));
 
 		--_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
-		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));
+		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-content-md));
 		--_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));
 		--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));
 
 		--_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));
 
 		--_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
-		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));
+		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-content-md));
 		--_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));
 		--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));
 
 		--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
-		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));
+		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-content-md));
 		--_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));
 		--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));
 
@@ -4975,32 +5232,32 @@ const styles = i$4`
 	}
 
 	:host([size='sm']) {
-		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-sm));
-		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-sm));
+		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-content-sm));
 		--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-sm));
 
 		--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-sm));
-		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-sm));
+		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-content-sm));
 
-		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-sm));
+		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-sm));
 
-		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-sm));
+		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-content-sm));
 		--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-sm));
 	}
 
 	:host([size='lg']) {
-		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-lg));
-		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-lg));
+		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-content-lg));
 		--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-lg));
 
 		--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-lg));
-		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-lg));
+		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-content-lg));
 
-		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-lg));
+		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-lg));
 
-		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-lg));
+		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 `;
@@ -5021,16 +5278,16 @@ let SDSTextArea = class extends i$1 {
     this.readOnly = false;
     this.required = false;
     this.size = "md";
-    this._defaultValue = "";
+    this._defaultValue = null;
     this._handleInputChange = (event) => {
       event.stopImmediatePropagation();
-      if (!this.disabled) {
-        const currentValue = event.target.value;
-        this.value = currentValue;
-        this.internals.setFormValue(currentValue === "" ? null : currentValue);
-        this.updateValidity();
-        this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));
+      if (this.disabled || !(event.target instanceof HTMLTextAreaElement)) {
+        return;
       }
+      this.value = event.target.value;
+      this.internals.setFormValue(this.value === "" ? null : this.value);
+      this.updateValidity();
+      this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));
     };
     this._handleSelect = (event) => {
       event.stopImmediatePropagation();
@@ -5052,7 +5309,8 @@ let SDSTextArea = class extends i$1 {
   }
   connectedCallback() {
     super.connectedCallback();
-    this._defaultValue = this.value ?? "";
+    this._defaultValue = this.value ?? null;
+    this.internals.setFormValue(this._defaultValue);
   }
   updateValidity() {
     if (this.control.checkValidity()) {
@@ -5079,9 +5337,10 @@ let SDSTextArea = class extends i$1 {
     return x`<p class="sds-textarea__character-counter">Du har ${this.counter - currentLength} tegn igjen</p>`;
   }
   formResetCallback() {
-    this.control.value = this._defaultValue;
-    this.internals.setFormValue(this._defaultValue === "" ? null : this._defaultValue);
-    this.value = this._defaultValue;
+    this.internals.setFormValue(this._defaultValue);
+    const newValue = this._defaultValue ?? "";
+    this.control.value = newValue;
+    this.value = newValue;
     this.updateValidity();
   }
   select() {
@@ -5235,6 +5494,7 @@ export {
   SDSCheckbox,
   SDSCheckboxGroup,
   SDSChip,
+  SDSDetails,
   SDSHeading,
   SDSIcon,
   SDSLoader,