@politiet/sheriff-web-components 1.1.0 → 1.3.0

package/dist/sheriff-web-components.js

@@ -647,7 +647,7 @@ function guardedCustomElement(tagName) {
     }
   };
 }
-const styles$h = i$4`
+const styles$i = i$4`
 	:host {
 		--_color-semantic-surface-critical-hover: #b32a23;
 		display: inline-block;
@@ -679,6 +679,12 @@ const styles$h = i$4`
 			border: 2px solid var(--sds-color-semantic-surface-action-hover);
 		}
 
+		&:focus {
+			background-color: var(--sds-color-semantic-surface-action-default);
+			outline: 2px solid var(--sds-color-semantic-surface-action-default);
+			outline-offset: 1px;
+		}
+
 		&:active {
 			background-color: var(--sds-color-semantic-surface-action-active);
 			border: 2px solid var(--sds-color-semantic-surface-action-active);
@@ -693,13 +699,6 @@ const styles$h = i$4`
 		}
 	}
 
-	.sds-button:focus,
-	:host(:focus) .give-focus {
-		background-color: var(--sds-color-semantic-surface-action-default);
-		outline: 2px solid var(--sds-color-semantic-surface-action-default);
-		outline-offset: 1px;
-	}
-
 	.sds-button--secondary {
 		background-color: var(--sds-color-semantic-surface-action-inverted);
 		border: 2px solid var(--sds-color-semantic-border-action);
@@ -793,15 +792,20 @@ const styles$h = i$4`
 		font-size: 0.875rem;
 		padding: 0 var(--sds-spacing-3);
 	}
+
+	.sds-button--as-link {
+		inline-size: auto;
+		text-decoration: none;
+	}
 `;
-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;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(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$h(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 let SDSButton = class extends i$1 {
@@ -882,8 +886,21 @@ let SDSButton = class extends i$1 {
       "sds-button--tertiary": this.variant === "tertiary",
       "sds-button--critical": this.variant === "critical",
       "sds-button--medium": this.size === "medium",
-      "sds-button--small": this.size === "small"
+      "sds-button--small": this.size === "small",
+      "sds-button--as-link": !!this.href
     };
+    if (this.href) {
+      return x` <a
+				id="link"
+				class="${e$1(buttonClasses)}"
+				href="${this.href}"
+				target="${o$1(this.target)}"
+			>
+				<slot name="before"></slot>
+				<slot></slot>
+				<slot name="after"></slot>
+			</a>`;
+    }
     return x`
 			<button
 				id="control"
@@ -902,33 +919,39 @@ let SDSButton = class extends i$1 {
 		`;
   }
 };
-SDSButton.styles = [styles$h];
+SDSButton.styles = [styles$i];
 SDSButton.formAssociated = true;
-__decorateClass$h([
+__decorateClass$i([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "type", 2);
-__decorateClass$h([
+__decorateClass$i([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "variant", 2);
-__decorateClass$h([
+__decorateClass$i([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "size", 2);
-__decorateClass$h([
+__decorateClass$i([
   n2({ type: Boolean, reflect: true })
 ], SDSButton.prototype, "disabled", 2);
-__decorateClass$h([
+__decorateClass$i([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "name", 2);
-__decorateClass$h([
+__decorateClass$i([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "value", 2);
-__decorateClass$h([
+__decorateClass$i([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "form", 2);
-SDSButton = __decorateClass$h([
+__decorateClass$i([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "href", 2);
+__decorateClass$i([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "target", 2);
+SDSButton = __decorateClass$i([
   guardedCustomElement("sds-button")
 ], SDSButton);
-const styles$g = i$4`
+const styles$h = i$4`
 	:host {
 		flex: 0 0 auto;
 	}
@@ -1037,14 +1060,14 @@ const styles$g = i$4`
 		padding-top: 2px;
 	}
 `;
-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 SDSCheckbox = class extends i$1 {
@@ -1180,36 +1203,36 @@ let SDSCheckbox = class extends i$1 {
 		`;
   }
 };
-SDSCheckbox.styles = [styles$g];
+SDSCheckbox.styles = [styles$h];
 SDSCheckbox.formAssociated = true;
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: String, reflect: true })
 ], SDSCheckbox.prototype, "name", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: String, reflect: true })
 ], SDSCheckbox.prototype, "label", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: String })
 ], SDSCheckbox.prototype, "value", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "checked", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "disabled", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "error", 2);
-__decorateClass$g([
+__decorateClass$h([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "required", 2);
-__decorateClass$g([
+__decorateClass$h([
   e$3("#control")
 ], SDSCheckbox.prototype, "control", 2);
-SDSCheckbox = __decorateClass$g([
+SDSCheckbox = __decorateClass$h([
   guardedCustomElement("sds-checkbox")
 ], SDSCheckbox);
-const styles$f = i$4`
+const styles$g = i$4`
 	:host {
 		display: block;
 		contain: layout style;
@@ -1334,7 +1357,7 @@ class SDSIconLoader {
     return this.resolver;
   }
 }
-const styles$e = i$4`
+const styles$f = i$4`
 	:host {
 		--icon-size: var(--sds-icon-size-m);
 		display: inline-block;
@@ -1347,14 +1370,14 @@ const styles$e = i$4`
 		--icon-size: var(--sds-icon-size-s);
 	}
 `;
-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 SDSIcon = class extends i$1 {
@@ -1406,34 +1429,41 @@ let SDSIcon = class extends i$1 {
     }
   }
 };
-SDSIcon.styles = [styles$e];
+SDSIcon.styles = [styles$f];
 SDSIcon.iconLoader = new SDSIconLoader();
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "name", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "size", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "color", 2);
-__decorateClass$f([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "label", 2);
-__decorateClass$f([
+__decorateClass$g([
   r()
 ], SDSIcon.prototype, "svg", 2);
-SDSIcon = __decorateClass$f([
+SDSIcon = __decorateClass$g([
   guardedCustomElement("sds-icon")
 ], SDSIcon);
-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;
+const renderErrorMessage = (errorMessage, className, disabled = false) => {
+  if (!errorMessage) {
+    return E;
+  }
+  const iconColor = !disabled ? `var(--sds-color-semantic-icon-critical)` : `var(--sds-color-semantic-icon-disabled)`;
+  return x`<p class=${className}><sds-icon name="warning-material-filled" size="m" color=${iconColor}></sds-icon>${errorMessage}</p>`;
+};
+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;
 };
 let SDSCheckboxGroup = class extends i$1 {
@@ -1468,35 +1498,28 @@ let SDSCheckboxGroup = class extends i$1 {
 				<div class="sds-checkbox-group__checkboxes">
 					<slot @change=${this._handleCheckboxChange}></slot>
 				</div>
-				${this.errorMessage ? x`<p class="sds-checkbox-group__error-message">
-							<sds-icon
-								name="warning-material-filled"
-								size="m"
-								color="var(--sds-color-semantic-icon-critical)"
-							></sds-icon>
-							${this.errorMessage}
-						</p>` : E}
+				${renderErrorMessage(this.errorMessage, "sds-checkbox-group__error-message")}
 			</fieldset>
 		`;
   }
 };
-SDSCheckboxGroup.styles = [styles$f];
-__decorateClass$e([
+SDSCheckboxGroup.styles = [styles$g];
+__decorateClass$f([
   n2({ type: String, reflect: true })
 ], SDSCheckboxGroup.prototype, "legend", 2);
-__decorateClass$e([
+__decorateClass$f([
   n2({ type: String, attribute: "help-text", reflect: true })
 ], SDSCheckboxGroup.prototype, "helpText", 2);
-__decorateClass$e([
+__decorateClass$f([
   n2({ type: String, attribute: "error-message", reflect: true })
 ], SDSCheckboxGroup.prototype, "errorMessage", 2);
-__decorateClass$e([
+__decorateClass$f([
   r()
 ], SDSCheckboxGroup.prototype, "_selectedValues", 2);
-SDSCheckboxGroup = __decorateClass$e([
+SDSCheckboxGroup = __decorateClass$f([
   guardedCustomElement("sds-checkbox-group")
 ], SDSCheckboxGroup);
-const styles$d = i$4`
+const styles$e = i$4`
 	.sds-chip {
 		align-items: center;
 		display: inline-flex;
@@ -1571,14 +1594,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 SDSChip = class extends i$1 {
@@ -1662,36 +1685,36 @@ let SDSChip = class extends i$1 {
 		</label>`;
   }
 };
-SDSChip.styles = [styles$d];
+SDSChip.styles = [styles$e];
 SDSChip.formAssociated = true;
-__decorateClass$d([
+__decorateClass$e([
   n2({ type: String, reflect: true })
 ], SDSChip.prototype, "variant", 2);
-__decorateClass$d([
+__decorateClass$e([
   n2({ type: String, reflect: true })
 ], SDSChip.prototype, "size", 2);
-__decorateClass$d([
+__decorateClass$e([
   n2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "checked", 2);
-__decorateClass$d([
+__decorateClass$e([
   n2({ type: String, reflect: true })
 ], SDSChip.prototype, "name", 2);
-__decorateClass$d([
+__decorateClass$e([
   n2({ type: String })
 ], SDSChip.prototype, "value", 2);
-__decorateClass$d([
+__decorateClass$e([
   n2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "disabled", 2);
-__decorateClass$d([
+__decorateClass$e([
   n2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "readonly", 2);
-__decorateClass$d([
+__decorateClass$e([
   e$3("#control")
 ], SDSChip.prototype, "control", 2);
-SDSChip = __decorateClass$d([
+SDSChip = __decorateClass$e([
   guardedCustomElement("sds-chip")
 ], SDSChip);
-const styles$c = i$4`
+const styles$d = i$4`
 	:host {
 		display: block;
 	}
@@ -1714,14 +1737,14 @@ const styles$c = i$4`
 		font-weight: 500;
 	}
 `;
-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 SDSDetail = class extends i$1 {
@@ -1739,14 +1762,14 @@ let SDSDetail = class extends i$1 {
     return x`<p class=${classes}><slot></slot></p>`;
   }
 };
-SDSDetail.styles = [styles$c];
-__decorateClass$c([
+SDSDetail.styles = [styles$d];
+__decorateClass$d([
   n2({ type: String })
 ], SDSDetail.prototype, "variation", 2);
-SDSDetail = __decorateClass$c([
+SDSDetail = __decorateClass$d([
   guardedCustomElement("sds-detail")
 ], SDSDetail);
-const styles$b = i$4`
+const styles$c = i$4`
 	:host {
 		--_heading-text-align: left;
 		display: inline-block;
@@ -1849,14 +1872,14 @@ const styles$b = i$4`
 		}
 	}
 `;
-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;
 };
 let SDSHeading = class extends i$1 {
@@ -1892,17 +1915,17 @@ let SDSHeading = class extends i$1 {
     }
   }
 };
-SDSHeading.styles = [styles$b];
-__decorateClass$b([
+SDSHeading.styles = [styles$c];
+__decorateClass$c([
   n2({ type: String })
 ], SDSHeading.prototype, "level", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: String })
 ], SDSHeading.prototype, "as", 2);
-SDSHeading = __decorateClass$b([
+SDSHeading = __decorateClass$c([
   guardedCustomElement("sds-heading")
 ], SDSHeading);
-const styles$a = i$4`
+const styles$b = i$4`
 	:host {
 		display: block;
 	}
@@ -1931,14 +1954,14 @@ const styles$a = i$4`
 		line-height: 1.428;
 	}
 `;
-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 SDSLabel = class extends i$1 {
@@ -1957,17 +1980,17 @@ let SDSLabel = class extends i$1 {
     return x`<label for="${o$1(this.for)}" class=${classes}><slot></slot></label>`;
   }
 };
-SDSLabel.styles = [styles$a];
-__decorateClass$a([
+SDSLabel.styles = [styles$b];
+__decorateClass$b([
   n2({ type: String })
 ], SDSLabel.prototype, "size", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: String })
 ], SDSLabel.prototype, "for", 2);
-SDSLabel = __decorateClass$a([
+SDSLabel = __decorateClass$b([
   guardedCustomElement("sds-label")
 ], SDSLabel);
-const styles$9 = i$4`
+const styles$a = i$4`
 	:host {
 		display: inline;
 	}
@@ -2039,14 +2062,14 @@ const styles$9 = i$4`
 		font-size: 0.875rem;
 	}
 `;
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+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$9(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 let SDSLink = class extends i$1 {
@@ -2067,20 +2090,20 @@ let SDSLink = class extends i$1 {
 		></a>`;
   }
 };
-SDSLink.styles = [styles$9];
-__decorateClass$9([
+SDSLink.styles = [styles$a];
+__decorateClass$a([
   n2({ type: String })
 ], SDSLink.prototype, "href", 2);
-__decorateClass$9([
+__decorateClass$a([
   n2({ type: String })
 ], SDSLink.prototype, "size", 2);
-__decorateClass$9([
+__decorateClass$a([
   n2({ type: String })
 ], SDSLink.prototype, "target", 2);
-SDSLink = __decorateClass$9([
+SDSLink = __decorateClass$a([
   guardedCustomElement("sds-link")
 ], SDSLink);
-const styles$8 = i$4`
+const styles$9 = i$4`
 	:host {
 		line-height: 0;
 	}
@@ -2117,14 +2140,14 @@ const styles$8 = i$4`
 		}
 	}
 `;
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let SDSLoader = class extends i$1 {
@@ -2142,17 +2165,17 @@ let SDSLoader = class extends i$1 {
     return x`<span class="${e$1(loaderClasses)}" style="${`color:${this.color}`}"></span>`;
   }
 };
-SDSLoader.styles = [styles$8];
-__decorateClass$8([
+SDSLoader.styles = [styles$9];
+__decorateClass$9([
   n2({ type: String, reflect: true })
 ], SDSLoader.prototype, "size", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: String, reflect: true })
 ], SDSLoader.prototype, "color", 2);
-SDSLoader = __decorateClass$8([
+SDSLoader = __decorateClass$9([
   guardedCustomElement("sds-loader")
 ], SDSLoader);
-const styles$7 = i$4`
+const styles$8 = i$4`
 	:host {
 		display: block;
 		box-sizing: border-box;
@@ -2300,14 +2323,14 @@ const styles$7 = i$4`
 		}
 	}
 `;
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$7(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let SDSNavCard = class extends i$1 {
@@ -2373,29 +2396,29 @@ let SDSNavCard = class extends i$1 {
 		`;
   }
 };
-SDSNavCard.styles = [styles$7];
-__decorateClass$7([
+SDSNavCard.styles = [styles$8];
+__decorateClass$8([
   n2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "size", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "heading", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "level", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "link", 2);
-__decorateClass$7([
+__decorateClass$8([
   r()
 ], SDSNavCard.prototype, "hasIcon", 2);
-__decorateClass$7([
+__decorateClass$8([
   e$3("slot")
 ], SDSNavCard.prototype, "iconSlot", 2);
-SDSNavCard = __decorateClass$7([
+SDSNavCard = __decorateClass$8([
   guardedCustomElement("sds-nav-card")
 ], SDSNavCard);
-const styles$6 = i$4`
+const styles$7 = i$4`
 	:host {
 		display: block;
 		box-sizing: border-box;
@@ -2553,14 +2576,14 @@ const styles$6 = i$4`
 		}
 	}
 `;
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$6(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 const notificationIcons = {
@@ -2608,17 +2631,17 @@ let SDSNotification = class extends i$1 {
 		</div>`;
   }
 };
-SDSNotification.styles = [styles$6];
-__decorateClass$6([
+SDSNotification.styles = [styles$7];
+__decorateClass$7([
   n2({ type: String, reflect: true })
 ], SDSNotification.prototype, "variant", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String, attribute: "removable-label", reflect: true })
 ], SDSNotification.prototype, "removableLabel", 2);
-SDSNotification = __decorateClass$6([
+SDSNotification = __decorateClass$7([
   guardedCustomElement("sds-notification")
 ], SDSNotification);
-const styles$5 = i$4`
+const styles$6 = i$4`
 	:host {
 		display: block;
 	}
@@ -2653,14 +2676,14 @@ const styles$5 = i$4`
 		}
 	}
 `;
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$5(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let SDSParagraph = class extends i$1 {
@@ -2679,14 +2702,14 @@ let SDSParagraph = class extends i$1 {
     return x`<p class=${classes}><slot></slot></p>`;
   }
 };
-SDSParagraph.styles = [styles$5];
-__decorateClass$5([
+SDSParagraph.styles = [styles$6];
+__decorateClass$6([
   n2({ type: String })
 ], SDSParagraph.prototype, "size", 2);
-SDSParagraph = __decorateClass$5([
+SDSParagraph = __decorateClass$6([
   guardedCustomElement("sds-paragraph")
 ], SDSParagraph);
-const styles$4 = i$4`
+const styles$5 = i$4`
 	:host {
 		flex: 0 0 auto;
 	}
@@ -2794,14 +2817,14 @@ const styles$4 = i$4`
 		padding-top: 2px;
 	}
 `;
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$4(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 let SDSRadio = class extends i$1 {
@@ -3015,39 +3038,39 @@ let SDSRadio = class extends i$1 {
 		`;
   }
 };
-SDSRadio.styles = [styles$4];
+SDSRadio.styles = [styles$5];
 SDSRadio.formAssociated = true;
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "disabled", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "required", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String, reflect: true })
 ], SDSRadio.prototype, "label", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Boolean, reflect: true, attribute: "hide-label" })
 ], SDSRadio.prototype, "hideLabel", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String, reflect: true })
 ], SDSRadio.prototype, "name", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], SDSRadio.prototype, "value", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "checked", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "error", 2);
-__decorateClass$4([
+__decorateClass$5([
   e$3("#control")
 ], SDSRadio.prototype, "control", 2);
-SDSRadio = __decorateClass$4([
+SDSRadio = __decorateClass$5([
   guardedCustomElement("sds-radio")
 ], SDSRadio);
-const styles$3 = i$4`
+const styles$4 = i$4`
 	.sds-radio-group {
 		border: 0;
 		margin: 0;
@@ -3092,14 +3115,14 @@ const styles$3 = i$4`
 		gap: var(--sds-spacing-2);
 	}
 `;
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$3(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let SDSRadioGroup = class extends i$1 {
@@ -3130,35 +3153,28 @@ let SDSRadioGroup = class extends i$1 {
 				<div class="sds-radio-group__radios" @change=${this._handleRadioChange}>
 					<slot></slot>
 				</div>
-				${this.errorMessage ? x`<p class="sds-radio-group__error-message">
-							<sds-icon
-								name="warning-material-filled"
-								size="m"
-								color="var(--sds-color-semantic-icon-critical)"
-							></sds-icon>
-							${this.errorMessage}
-						</p>` : E}
+				${renderErrorMessage(this.errorMessage, "sds-radio-group__error-message")}
 			</fieldset>
 		`;
   }
 };
-SDSRadioGroup.styles = [styles$3];
-__decorateClass$3([
+SDSRadioGroup.styles = [styles$4];
+__decorateClass$4([
   n2({ type: String })
 ], SDSRadioGroup.prototype, "legend", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String, attribute: "help-text" })
 ], SDSRadioGroup.prototype, "helpText", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String, attribute: "error-message" })
 ], SDSRadioGroup.prototype, "errorMessage", 2);
-__decorateClass$3([
+__decorateClass$4([
   r()
 ], SDSRadioGroup.prototype, "_selectedValue", 2);
-SDSRadioGroup = __decorateClass$3([
+SDSRadioGroup = __decorateClass$4([
   guardedCustomElement("sds-radio-group")
 ], SDSRadioGroup);
-const styles$2 = i$4`
+const styles$3 = i$4`
 	:host {
 		display: inline-flex;
 		contain: layout style;
@@ -3281,14 +3297,14 @@ const styles$2 = i$4`
 		background-color: var(--sds-color-semantic-surface-default);
 	}
 `;
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$2(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 let SDSSwitch = class extends i$1 {
@@ -3388,36 +3404,36 @@ let SDSSwitch = class extends i$1 {
 		</div>`;
   }
 };
-SDSSwitch.styles = [styles$2];
+SDSSwitch.styles = [styles$3];
 SDSSwitch.formAssociated = true;
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "disabled", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: String, reflect: true })
 ], SDSSwitch.prototype, "label", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Boolean, reflect: true, attribute: "hide-label" })
 ], SDSSwitch.prototype, "hideLabel", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: String, reflect: true })
 ], SDSSwitch.prototype, "name", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "reverse", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "checked", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: String, reflect: true })
 ], SDSSwitch.prototype, "size", 2);
-__decorateClass$2([
+__decorateClass$3([
   e$3("#control")
 ], SDSSwitch.prototype, "control", 2);
-SDSSwitch = __decorateClass$2([
+SDSSwitch = __decorateClass$3([
   guardedCustomElement("sds-switch")
 ], SDSSwitch);
-const styles$1 = i$4`
+const styles$2 = i$4`
 	:host {
 		display: block;
 	}
@@ -3446,14 +3462,14 @@ const styles$1 = i$4`
 		line-height: 1.285;
 	}
 `;
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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$1(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 let SDSText = class extends i$1 {
@@ -3472,13 +3488,351 @@ let SDSText = class extends i$1 {
     return x`<p class=${classes}><slot></slot></p>`;
   }
 };
-SDSText.styles = [styles$1];
-__decorateClass$1([
+SDSText.styles = [styles$2];
+__decorateClass$2([
   n2({ type: String })
 ], SDSText.prototype, "size", 2);
-SDSText = __decorateClass$1([
+SDSText = __decorateClass$2([
   guardedCustomElement("sds-text")
 ], SDSText);
+const styles$1 = i$4`
+	:host {
+		all: unset;
+		display: block;
+		text-align: start;
+	}
+
+	.sds-textarea {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-family: var(--sds-typography-font-family);
+
+		.sds-textarea__input-container {
+			max-width: var(--sds-typography-max-line-width);
+			position: relative;
+		}
+
+		.sds-textarea__input {
+			box-sizing: border-box;
+			color: var(--sds-color-semantic-text-default);
+			padding: 0.75rem 1rem;
+			line-height: 1.25rem;
+			font-size: 1rem;
+			justify-content: flex-end;
+			border-radius: var(--sds-radius-4);
+			border: 1px solid var(--sds-color-semantic-border-default);
+			background: var(--sds-color-semantic-surface-default);
+			max-width: var(--sds-typography-max-line-width);
+			width: 100%;
+			min-height: 6rem;
+			resize: vertical;
+			font-family: var(--sds-typography-font-family);
+
+			&:hover {
+				border-color: var(--sds-color-semantic-border-strong);
+			}
+
+			&:focus {
+				outline: 2px solid var(--sds-color-semantic-border-focus);
+				outline-offset: 1px;
+			}
+
+			&:active {
+				border-color: var(--sds-color-semantic-border-action);
+				outline: none;
+			}
+		}
+
+		.sds-textarea__label {
+			color: var(--sds-color-semantic-text-default);
+			display: block;
+			font-size: 1rem;
+			font-weight: 500;
+			line-height: 1.5rem;
+			max-width: var(--sds-typography-max-line-width);
+		}
+
+		.sds-textarea__help-text,
+		.sds-textarea__character-counter {
+			color: var(--sds-color-semantic-text-subtle);
+			font-size: 1rem;
+			font-weight: 400;
+			line-height: 1.25rem;
+			margin: 0;
+			max-width: var(--sds-typography-max-line-width);
+		}
+
+		.sds-textarea__character-counter--error {
+			color: var(--sds-color-semantic-text-warning);
+		}
+
+		.sds-textarea__error-message {
+			margin: 0;
+			max-width: var(--sds-typography-max-line-width);
+			align-items: flex-start;
+			color: var(--sds-color-semantic-text-default);
+			display: flex;
+			line-height: 1.5rem;
+			gap: 0.25rem;
+		}
+	}
+
+	.sds-textarea--error {
+		color: var(--sds-color-semantic-text-default);
+		line-height: 1.5rem;
+
+		.sds-textarea__input,
+		.sds-textarea__input:hover {
+			border-color: var(--sds-color-semantic-border-critical);
+		}
+	}
+
+	.sds-textarea--disabled {
+		pointer-events: none;
+
+		.sds-textarea__label,
+		.sds-textarea__help-text,
+		.sds-textarea__character-counter,
+		.sds-textarea__error-message,
+		.sds-textarea__input {
+			color: var(--sds-color-semantic-text-disabled);
+		}
+
+		.sds-textarea__input {
+			border: 1px solid var(--sds-color-semantic-border-disabled);
+			resize: none;
+		}
+	}
+
+	.sds-textarea--readonly {
+		.sds-textarea__input {
+			resize: none;
+		}
+	}
+`;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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$1(target, key, result);
+  return result;
+};
+let SDSTextArea = class extends i$1 {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.readOnly = false;
+    this.required = false;
+    this._defaultValue = "";
+    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 }));
+      }
+    };
+    this._handleSelect = (event) => {
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        this.dispatchEvent(new CustomEvent("select", { bubbles: true, composed: true }));
+      }
+    };
+    this._handleFocus = (event) => {
+      event.stopImmediatePropagation();
+      this.dispatchEvent(new CustomEvent("focus", { bubbles: true, composed: true }));
+    };
+    this._handleBlur = (event) => {
+      event.stopImmediatePropagation();
+      this.updateValidity();
+      this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
+    };
+    this.internals = this.attachInternals();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._defaultValue = this.value ?? "";
+  }
+  updateValidity() {
+    if (this.control.checkValidity()) {
+      this.internals.setValidity({});
+    } else {
+      this.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);
+    }
+  }
+  renderCharacterCounter() {
+    if (this.counter === void 0) return E;
+    const currentLength = this.value?.length || 0;
+    const isOverCounter = currentLength > this.counter;
+    if (isOverCounter) {
+      return x`<p class="sds-textarea__character-counter sds-textarea__character-counter--error">
+				Du har ${currentLength - this.counter} tegn for mye
+			</p>`;
+    }
+    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.updateValidity();
+  }
+  select() {
+    if (!this.disabled) this.control.select();
+  }
+  type() {
+    return "textarea";
+  }
+  focus() {
+    if (!this.disabled) this.control.focus();
+  }
+  blur() {
+    if (!this.disabled) this.control.blur();
+  }
+  click() {
+    if (!this.disabled) this.control.click();
+  }
+  get selectionStart() {
+    return this.control ? this.control.selectionStart : null;
+  }
+  set selectionStart(value) {
+    if (this.control && value !== null) {
+      this.control.selectionStart = value;
+    }
+  }
+  get selectionEnd() {
+    return this.control ? this.control.selectionEnd : null;
+  }
+  set selectionEnd(value) {
+    if (this.control && value !== null) {
+      this.control.selectionEnd = value;
+    }
+  }
+  setSelectionRange(start, end, direction) {
+    if (this.control) {
+      this.control.setSelectionRange(start, end, direction);
+    }
+  }
+  checkValidity() {
+    return this.control.checkValidity();
+  }
+  reportValidity() {
+    return this.control.reportValidity();
+  }
+  setCustomValidity(message) {
+    this.control.setCustomValidity(message);
+    this.updateValidity();
+  }
+  render() {
+    const textareaClasses = {
+      "sds-textarea": true,
+      "sds-textarea--error": Boolean(this.errorMessage),
+      "sds-textarea--disabled": Boolean(this.disabled),
+      "sds-textarea--readonly": Boolean(this.readOnly)
+    };
+    return x`
+			<div class="${e$1(textareaClasses)}">
+				${this.label ? x`<label for="sds-textarea" class="sds-textarea__label">${this.label}</label>` : E}
+				${this.helpText ? x`<p class="sds-textarea__help-text">${this.helpText}</p>` : E}
+				<div class="sds-textarea__input-container">
+					<textarea
+						class="sds-textarea__input"
+						id="sds-textarea"
+						?disabled="${this.disabled}"
+						?readonly="${this.readOnly}"
+						placeholder="${o$1(this.placeholder)}"
+						.value="${this.value ?? ""}"
+						.autocomplete="${this.autocomplete}"
+						name="${o$1(this.name)}"
+						?required="${this.required}"
+						rows="${o$1(this.rows)}"
+						cols="${o$1(this.cols)}"
+						wrap="${o$1(this.wrap)}"
+						minlength="${o$1(this.minlength)}"
+						maxlength="${o$1(this.maxlength)}"
+						@input="${this._handleInputChange}"
+						@change="${this._handleInputChange}"
+						@select="${this._handleSelect}"
+						@focus="${this._handleFocus}"
+						@blur="${this._handleBlur}"
+					></textarea>
+				</div>
+				${this.renderCharacterCounter()}
+				${this.errorMessage ? x`<p class="sds-textarea__error-message">
+							<sds-icon
+								name="warning-material-filled"
+								size="m"
+								color="${!this.disabled ? `var(--sds-color-semantic-icon-critical)` : `var(--sds-color-semantic-icon-disabled)`}"
+							></sds-icon>
+							${this.errorMessage}
+						</p>` : E}
+			</div>
+		`;
+  }
+};
+SDSTextArea.styles = [styles$1];
+SDSTextArea.formAssociated = true;
+__decorateClass$1([
+  n2({ type: String })
+], SDSTextArea.prototype, "value", 2);
+__decorateClass$1([
+  n2({ type: String, reflect: true })
+], SDSTextArea.prototype, "name", 2);
+__decorateClass$1([
+  n2({ type: String, reflect: true })
+], SDSTextArea.prototype, "label", 2);
+__decorateClass$1([
+  n2({ type: String, reflect: true })
+], SDSTextArea.prototype, "placeholder", 2);
+__decorateClass$1([
+  n2({ type: String, attribute: "help-text", reflect: true })
+], SDSTextArea.prototype, "helpText", 2);
+__decorateClass$1([
+  n2({ type: String, attribute: "error-message", reflect: true })
+], SDSTextArea.prototype, "errorMessage", 2);
+__decorateClass$1([
+  n2({ type: Boolean, reflect: true })
+], SDSTextArea.prototype, "disabled", 2);
+__decorateClass$1([
+  n2({ type: Boolean, attribute: "readonly", reflect: true })
+], SDSTextArea.prototype, "readOnly", 2);
+__decorateClass$1([
+  n2({ type: String, reflect: true })
+], SDSTextArea.prototype, "autocomplete", 2);
+__decorateClass$1([
+  n2({ type: Boolean, reflect: true })
+], SDSTextArea.prototype, "required", 2);
+__decorateClass$1([
+  n2({ type: Number, reflect: true })
+], SDSTextArea.prototype, "rows", 2);
+__decorateClass$1([
+  n2({ type: Number, reflect: true })
+], SDSTextArea.prototype, "cols", 2);
+__decorateClass$1([
+  n2({ type: String, reflect: true })
+], SDSTextArea.prototype, "wrap", 2);
+__decorateClass$1([
+  n2({ type: Number, reflect: true })
+], SDSTextArea.prototype, "minlength", 2);
+__decorateClass$1([
+  n2({ type: Number, reflect: true })
+], SDSTextArea.prototype, "maxlength", 2);
+__decorateClass$1([
+  n2({ type: Number, reflect: true })
+], SDSTextArea.prototype, "counter", 2);
+__decorateClass$1([
+  e$3("#sds-textarea")
+], SDSTextArea.prototype, "control", 2);
+SDSTextArea = __decorateClass$1([
+  guardedCustomElement("sds-textarea")
+], SDSTextArea);
 const styles = i$4`
 	:host {
 		all: unset;
@@ -3739,14 +4093,7 @@ let SDSTextField = class extends i$1 {
 					/>
 					<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
 				</div>
-				${this.errorMessage ? x`<p class="sds-textfield__error-message">
-							<sds-icon
-								name="warning-material-filled"
-								size="m"
-								color="${!this.disabled ? `var(--sds-color-semantic-icon-critical)` : `var(--sds-color-semantic-icon-disabled)`}"
-							></sds-icon>
-							${this.errorMessage}
-						</p>` : E}
+				${renderErrorMessage(this.errorMessage, "sds-textfield__error-message", this.disabled)}
 			</div>
 		`;
   }
@@ -3822,5 +4169,6 @@ export {
   SDSRadioGroup,
   SDSSwitch,
   SDSText,
+  SDSTextArea,
   SDSTextField
 };