@helsevestikt/hviktor-angular 0.0.17 → 0.0.18

package/fesm2022/helsevestikt-hviktor-angular.mjs

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { Input, Component, Directive, booleanAttribute, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, ElementRef, HostListener, Output, ViewChild, DestroyRef, signal, input, computed, HostBinding, ChangeDetectorRef, ViewEncapsulation, numberAttribute, ContentChildren, forwardRef, Renderer2 } from '@angular/core';
+import { Input, Component, Directive, booleanAttribute, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, ElementRef, HostListener, Output, signal, computed, input, HostBinding, numberAttribute, ViewChild, ContentChildren, forwardRef } from '@angular/core';
 import '@u-elements/u-details';
-import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
-import { FormGroupDirective, NgControl, ControlContainer, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { HttpClient } from '@angular/common/http';
+import '@digdir/designsystemet-web';
+import { Validators, FormGroupDirective, NgControl, ControlContainer, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import '@u-elements/u-tabs';
 import { NgTemplateOutlet } from '@angular/common';
 
@@ -24,10 +23,10 @@ import { NgTemplateOutlet } from '@angular/common';
 class HviAlert {
     /** Sets the type of alert by changing the color and  */
     color;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviAlert, isStandalone: true, selector: "hvi-alert", inputs: { color: "color" }, host: { properties: { "attr.data-color": "color" }, classAttribute: "ds-alert" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviAlert, isStandalone: true, selector: "hvi-alert", inputs: { color: "color" }, host: { properties: { "attr.data-color": "color" }, classAttribute: "ds-alert" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviAlert, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-alert',
@@ -69,10 +68,10 @@ class HviAvatar {
     size;
     /** The color theme of the avatar */
     color;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviAvatar, isStandalone: true, selector: "hvi-avatar", inputs: { ariaLabel: "ariaLabel", variant: "variant", initials: "initials", size: "size", color: "color" }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel ?? null", "attr.data-variant": "variant ?? null", "attr.data-initials": "initials ?? null", "attr.data-size": "size ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-avatar" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviAvatar, isStandalone: true, selector: "hvi-avatar", inputs: { ariaLabel: "ariaLabel", variant: "variant", initials: "initials", size: "size", color: "color" }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel ?? null", "attr.data-variant": "variant ?? null", "attr.data-initials": "initials ?? null", "attr.data-size": "size ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-avatar" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviAvatar, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-avatar',
@@ -118,10 +117,10 @@ class HviAvatarStack {
     expandable;
     suffix;
     gap;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviAvatarStack, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviAvatarStack, isStandalone: true, selector: "figure[hviAvatarStack]", inputs: { variant: "variant", expandable: "expandable", suffix: "suffix", gap: "gap" }, host: { properties: { "attr.data-variant": "variant", "attr.data-expandable": "expandable", "attr.data-suffix": "suffix", "attr.data-avatar-stack-gap": "gap" }, classAttribute: "ds-avatar-stack" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviAvatarStack, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviAvatarStack, isStandalone: true, selector: "figure[hviAvatarStack]", inputs: { variant: "variant", expandable: "expandable", suffix: "suffix", gap: "gap" }, host: { properties: { "attr.data-variant": "variant", "attr.data-expandable": "expandable", "attr.data-suffix": "suffix", "attr.data-avatar-stack-gap": "gap" }, classAttribute: "ds-avatar-stack" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviAvatarStack, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviAvatarStack, decorators: [{
             type: Directive,
             args: [{
                     selector: 'figure[hviAvatarStack]',
@@ -149,10 +148,10 @@ class HviBadgePosition {
     overlap = 'rectangle';
     /** Placement of the badge */
     placement = 'top-right';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviBadgePosition, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviBadgePosition, isStandalone: true, selector: "hvi-badge-position", inputs: { overlap: "overlap", placement: "placement" }, host: { properties: { "attr.data-overlap": "overlap", "attr.data-placement": "placement" }, classAttribute: "ds-badge--position" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviBadgePosition, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviBadgePosition, isStandalone: true, selector: "hvi-badge-position", inputs: { overlap: "overlap", placement: "placement" }, host: { properties: { "attr.data-overlap": "overlap", "attr.data-placement": "placement" }, classAttribute: "ds-badge--position" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviBadgePosition, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviBadgePosition, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-badge-position',
@@ -177,10 +176,10 @@ class HviBadge {
     count;
     /** The color theme of the badge */
     color;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviBadge, isStandalone: true, selector: "hvi-badge", inputs: { variant: "variant", count: "count", color: "color" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-count": "count ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-badge" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviBadge, isStandalone: true, selector: "hvi-badge", inputs: { variant: "variant", count: "count", color: "color" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-count": "count ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-badge" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviBadge, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-badge',
@@ -231,8 +230,8 @@ class HviBreadcrumbs {
     backLink;
     /** Array of breadcrumb items */
     items = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HviBreadcrumbs, isStandalone: true, selector: "nav[hviBreadcrumbs]", inputs: { ariaLabel: "ariaLabel", backLink: "backLink", items: "items" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel ?? null" }, classAttribute: "ds-breadcrumbs" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: HviBreadcrumbs, isStandalone: true, selector: "nav[hviBreadcrumbs]", inputs: { ariaLabel: "ariaLabel", backLink: "backLink", items: "items" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel ?? null" }, classAttribute: "ds-breadcrumbs" }, ngImport: i0, template: `
     <!-- Back link (optional) -->
     @if (backLink) {
       <a class="ds-link" [href]="backLink.href" [attr.aria-label]="backLink.ariaLabel ?? null">
@@ -256,7 +255,7 @@ class HviBreadcrumbs {
     </ol>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviBreadcrumbs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviBreadcrumbs, decorators: [{
             type: Component,
             args: [{
                     selector: 'nav[hviBreadcrumbs]',
@@ -330,10 +329,10 @@ class HviButton {
     loading = false;
     /** Makes the button full width */
     fullWidth = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.1", type: HviButton, isStandalone: true, selector: "button[hviButton], a[hviButton]", inputs: { size: "size", variant: "variant", type: "type", color: "color", icon: ["icon", "icon", booleanAttribute], loading: ["loading", "loading", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute] }, host: { properties: { "attr.type": "type", "attr.data-size": "size", "attr.data-variant": "variant", "attr.data-color": "color", "attr.data-fullwidth": "fullWidth ? \"\" : null", "attr.data-icon": "icon ? \"\" : null", "attr.aria-busy": "loading ? \"true\" : null" }, classAttribute: "ds-button" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: HviButton, isStandalone: true, selector: "button[hviButton], a[hviButton]", inputs: { size: "size", variant: "variant", type: "type", color: "color", icon: ["icon", "icon", booleanAttribute], loading: ["loading", "loading", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute] }, host: { properties: { "attr.type": "type", "attr.data-size": "size", "attr.data-variant": "variant", "attr.data-color": "color", "attr.data-fullwidth": "fullWidth ? \"\" : null", "attr.data-icon": "icon ? \"\" : null", "attr.aria-busy": "loading ? \"true\" : null" }, classAttribute: "ds-button" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviButton, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hviButton], a[hviButton]',
@@ -385,10 +384,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Documentation: https://designsystemet.no/en/components/docs/card/code#with-sections
  */
 class HviCardBlock {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviCardBlock, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviCardBlock, isStandalone: true, selector: "[hviCardBlock]", host: { classAttribute: "ds-card__block" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviCardBlock, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviCardBlock, isStandalone: true, selector: "[hviCardBlock]", host: { classAttribute: "ds-card__block" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviCardBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviCardBlock, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviCardBlock]',
@@ -418,10 +417,10 @@ class HviCard {
     color;
     /** Maximum width of the card, for example '320px' or '20rem' */
     maxWidth;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviCard, isStandalone: true, selector: "hvi-card", inputs: { variant: "variant", color: "color", maxWidth: "maxWidth" }, host: { properties: { "attr.data-variant": "variant", "attr.data-color": "color", "style.max-width": "maxWidth" }, classAttribute: "ds-card" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviCard, isStandalone: true, selector: "hvi-card", inputs: { variant: "variant", color: "color", maxWidth: "maxWidth" }, host: { properties: { "attr.data-variant": "variant", "attr.data-color": "color", "style.max-width": "maxWidth" }, classAttribute: "ds-card" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviCard, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-card',
@@ -445,10 +444,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class HviChipButton {
     /** Whether the chip is removable*/
     removable = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviChipButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.1", type: HviChipButton, isStandalone: true, selector: "button[hviChip]", inputs: { removable: ["removable", "removable", booleanAttribute] }, host: { properties: { "attr.data-removable": "removable ? \"true\" : null" }, classAttribute: "ds-chip" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviChipButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: HviChipButton, isStandalone: true, selector: "button[hviChip]", inputs: { removable: ["removable", "removable", booleanAttribute] }, host: { properties: { "attr.data-removable": "removable ? \"true\" : null" }, classAttribute: "ds-chip" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviChipButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviChipButton, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hviChip]',
@@ -464,10 +463,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             }] } });
 
 class HviChipLabel {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviChipLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviChipLabel, isStandalone: true, selector: "label[hviChip]", host: { classAttribute: "ds-chip" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviChipLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviChipLabel, isStandalone: true, selector: "label[hviChip]", host: { classAttribute: "ds-chip" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviChipLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviChipLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: 'label[hviChip]',
@@ -479,10 +478,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 
 class HviDetailsContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDetailsContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviDetailsContent, isStandalone: true, selector: "hvi-details-content", ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDetailsContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviDetailsContent, isStandalone: true, selector: "hvi-details-content", ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDetailsContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDetailsContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-details-content',
@@ -491,10 +490,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 
 class HviDetailsSummary {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDetailsSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviDetailsSummary, isStandalone: true, selector: "hvi-details-summary", ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDetailsSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviDetailsSummary, isStandalone: true, selector: "hvi-details-summary", ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDetailsSummary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDetailsSummary, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-details-summary',
@@ -531,8 +530,8 @@ class HviDetails {
     handleToggle(event) {
         console.log('Toggled!', event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviDetails, isStandalone: true, selector: "hvi-details", inputs: { variant: "variant", open: "open", defaultOpen: "defaultOpen", onToggle: "onToggle" }, ngImport: i0, template: ` <u-details
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviDetails, isStandalone: true, selector: "hvi-details", inputs: { variant: "variant", open: "open", defaultOpen: "defaultOpen", onToggle: "onToggle" }, ngImport: i0, template: ` <u-details
     #detailsRef
     class="ds-details"
     [attr.data-variant]="variant"
@@ -548,7 +547,7 @@ class HviDetails {
     </div>
   </u-details>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDetails, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDetails, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-details',
@@ -582,10 +581,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             }] } });
 
 class HviDialogBlock {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDialogBlock, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviDialogBlock, isStandalone: true, selector: "[hviDialogBlock]", host: { classAttribute: "ds-dialog__block" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDialogBlock, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviDialogBlock, isStandalone: true, selector: "[hviDialogBlock]", host: { classAttribute: "ds-dialog__block" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDialogBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDialogBlock, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviDialogBlock]',
@@ -669,10 +668,10 @@ class HviDialog {
         }
         this.element.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviDialog, isStandalone: true, selector: "dialog[hviDialog]", inputs: { id: "id", open: "open", modal: "modal" }, outputs: { openChange: "openChange" }, host: { attributes: { "id": "{{ id }}" }, listeners: { "close": "handleClose()", "cancel": "handleCancel($event)" }, classAttribute: "ds-dialog" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviDialog, isStandalone: true, selector: "dialog[hviDialog]", inputs: { id: "id", open: "open", modal: "modal" }, outputs: { openChange: "openChange" }, host: { attributes: { "id": "{{ id }}" }, listeners: { "close": "handleClose()", "cancel": "handleCancel($event)" }, classAttribute: "ds-dialog" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDialog, decorators: [{
             type: Directive,
             args: [{
                     selector: 'dialog[hviDialog]',
@@ -709,10 +708,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Dokumentasjon: https://designsystemet.no/no/components/docs/divider/overview
  */
 class HviDivider {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviDivider, isStandalone: true, selector: "hr[hviDivider]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "ds-divider" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviDivider, isStandalone: true, selector: "hr[hviDivider]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "ds-divider" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDivider, decorators: [{
             type: Directive,
             args: [{
                     selector: 'hr[hviDivider]',
@@ -726,12 +725,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 /**
  * @summary
- * Dropdown er en generisk nedtrekksliste. Den legger grunnmuren for å bygge menyer og lister..
+ * Dropdown er en generisk nedtrekksliste. Den legger grunnmuren for å bygge menyer og lister.
  *
  * @example
  * ```html
- * <button hviButton popovertarget="myDropdown">Åpne dropdown</button
- * <hvi-dropdown id="myDropdown" popover>
+ * <button hviButton popovertarget="myDropdown">Åpne dropdown</button>
+ * <hvi-dropdown id="myDropdown">
  *  <ul>
  *    <li>
  *     <button hviButton variant="tertiary">Menylenke</button>
@@ -746,128 +745,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * @see {@link https://designsystemet.no/en/components/docs/dropdown/code}
  */
 class HviDropdown {
-    el = inject((ElementRef));
-    cleanupAutoUpdate;
-    boundHandleClick;
-    boundHandleKeydown;
-    /**ID to target the popover */
+    /** ID to target the popover */
     id;
-    /** variant */
+    /** Popover type - 'auto' lukkes ved klikk utenfor, 'manual' krever manuell lukking */
+    type = 'auto';
+    /** Variant */
     variant;
-    /** Plassering av popover relativt til trigger */
-    dropdownPlacement = 'bottom-end';
+    /** Plassering av dropdown relativt til trigger */
+    dropdownPlacement = 'bottom';
     /** Aktiver automatisk repositjonering hvis det ikke er plass */
     autoPlacement = true;
-    /** Event når popover åpnes */
+    /** Event når dropdown åpnes */
     opened = new EventEmitter();
-    /** Event når popover lukkes */
+    /** Event når dropdown lukkes */
     closed = new EventEmitter();
-    get dropdownElement() {
-        return this.el.nativeElement;
-    }
-    get triggerElement() {
-        const id = this.dropdownElement.id;
-        return id ? document.querySelector(`[popovertarget="${id}"]`) : null;
-    }
-    ngOnInit() {
-        this.setupEventListeners();
-    }
-    ngOnDestroy() {
-        this.stopAutoUpdate();
-        this.removeEventListeners();
-    }
-    setupEventListeners() {
-        const dropdown = this.dropdownElement;
-        // Click utenfor lukker popover
-        this.boundHandleClick = (event) => {
-            const el = event.target;
-            const isTrigger = el?.closest?.(`[popovertarget="${dropdown.id}"]`);
-            const isOutside = !isTrigger && !dropdown.contains(el);
-            if (isTrigger) {
-                event.preventDefault();
-                dropdown.togglePopover?.();
-            }
-            if (isOutside && dropdown.matches(':popover-open')) {
-                dropdown.togglePopover?.();
-            }
-        };
-        // Escape lukker popover
-        this.boundHandleKeydown = (event) => {
-            if (event.key !== 'Escape' || !dropdown.matches(':popover-open'))
-                return;
-            event.preventDefault();
-            dropdown.togglePopover?.();
-        };
-        addEventListener('click', this.boundHandleClick);
-        addEventListener('keydown', this.boundHandleKeydown);
-        // Toggle events
-        dropdown.addEventListener('beforetoggle', this.handleBeforeToggle);
-        dropdown.addEventListener('toggle', this.handleToggle);
-    }
-    removeEventListeners() {
-        if (this.boundHandleClick) {
-            removeEventListener('click', this.boundHandleClick);
-        }
-        if (this.boundHandleKeydown) {
-            removeEventListener('keydown', this.boundHandleKeydown);
-        }
-        this.dropdownElement.removeEventListener('beforetoggle', this.handleBeforeToggle);
-        this.dropdownElement.removeEventListener('toggle', this.handleToggle);
-    }
-    handleBeforeToggle = (event) => {
-        const toggleEvent = event;
-        if (toggleEvent.newState === 'open') {
-            this.updatePosition();
-        }
-    };
-    handleToggle = (event) => {
-        const toggleEvent = event;
-        if (toggleEvent.newState === 'open') {
-            this.startAutoUpdate();
+    onToggle(event) {
+        if (event.newState === 'open') {
             this.opened.emit();
         }
         else {
-            this.stopAutoUpdate();
             this.closed.emit();
         }
-    };
-    updatePosition() {
-        const trigger = this.triggerElement;
-        const dropdown = this.dropdownElement;
-        if (!trigger || !dropdown)
-            return;
-        computePosition(trigger, dropdown, {
-            placement: this.dropdownPlacement,
-            strategy: 'fixed',
-            middleware: [
-                offset((data) => {
-                    const styles = getComputedStyle(data.elements.floating, '::before');
-                    return parseFloat(styles.height) || 12;
-                }),
-                ...(this.autoPlacement ? [flip({ fallbackAxisSideDirection: 'start' }), shift()] : []),
-            ],
-        }).then(({ x, y }) => {
-            dropdown.style.translate = `${x}px ${y}px`;
-        });
-    }
-    startAutoUpdate() {
-        this.stopAutoUpdate();
-        const trigger = this.triggerElement;
-        const popover = this.dropdownElement;
-        if (!trigger || !popover)
-            return;
-        this.cleanupAutoUpdate = autoUpdate(trigger, popover, () => this.updatePosition());
     }
-    stopAutoUpdate() {
-        if (this.cleanupAutoUpdate) {
-            this.cleanupAutoUpdate();
-            this.cleanupAutoUpdate = undefined;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviDropdown, isStandalone: true, selector: "hvi-dropdown", inputs: { id: "id", variant: "variant", dropdownPlacement: "dropdownPlacement", autoPlacement: "autoPlacement" }, outputs: { opened: "opened", closed: "closed" }, host: { properties: { "attr.data-id": "id", "attr.data-variant": "variant" }, classAttribute: "ds-popover ds-dropdown" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviDropdown, isStandalone: true, selector: "hvi-dropdown", inputs: { id: "id", type: "type", variant: "variant", dropdownPlacement: "dropdownPlacement", autoPlacement: "autoPlacement" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "toggle": "onToggle($event)" }, properties: { "id": "id", "attr.popover": "type", "attr.data-variant": "variant", "attr.data-placement": "dropdownPlacement", "attr.data-autoplacement": "autoPlacement ? \"\" : null" }, classAttribute: "ds-popover ds-dropdown" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviDropdown, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-dropdown',
@@ -875,12 +778,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     template: '<ng-content />',
                     host: {
                         class: 'ds-popover ds-dropdown',
-                        '[attr.data-id]': 'id',
+                        '[id]': 'id',
+                        '[attr.popover]': 'type',
                         '[attr.data-variant]': 'variant',
+                        '[attr.data-placement]': 'dropdownPlacement',
+                        '[attr.data-autoplacement]': 'autoPlacement ? "" : null',
                     },
                 }]
         }], propDecorators: { id: [{
                 type: Input
+            }], type: [{
+                type: Input
             }], variant: [{
                 type: Input
             }], dropdownPlacement: [{
@@ -891,21 +799,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Output
             }], closed: [{
                 type: Output
+            }], onToggle: [{
+                type: HostListener,
+                args: ['toggle', ['$event']]
             }] } });
 
 /**
- * @summary
- * Adds submit handling for Angular reactive forms:
- * - Tracks submitted state
- * - Marks all controls as touched on submit
- * - Optionally focuses an ErrorSummary when invalid
+ * Analyserer en FormGroup og returnerer required-modus.
+ *
+ * Alle controls telles – også de uten validators (de regnes som optional).
+ *
+ * - `'all-required'` – alle controls har required/requiredTrue
+ * - `'mixed'` – noen controls er required, noen ikke
+ * - `'none'` – ingen controls har required
+ */
+function analyzeFormRequired(formGroup) {
+    const controls = Object.values(formGroup.controls);
+    if (controls.length === 0)
+        return 'none';
+    let requiredCount = 0;
+    for (const control of controls) {
+        if (control.hasValidator(Validators.required) ||
+            control.hasValidator(Validators.requiredTrue)) {
+            requiredCount++;
+        }
+    }
+    if (requiredCount === 0)
+        return 'none';
+    if (requiredCount === controls.length)
+        return 'all-required';
+    return 'mixed';
+}
+/**
+ * Legges på `<form>` for å gi submit-håndtering og automatisk required-tag-analyse
+ * for Angular reactive forms.
+ *
+ * - Tracker submitted-state
+ * - Marker alle controls som touched ved submit
+ * - Analyserer FormGroup og eksponerer `requiredMode()` som child-komponenter
+ *   (f.eks. `HviTextfield`) kan injisere for automatisk required/optional-tagging
+ * - Sett `[showRequiredTags]="false"` for å skru av automatisk tagging
  *
  * @example
  * ```html
- * <[hviForm]></[hviForm]>
+ * <form hviForm [formGroup]="myForm">
+ *   @if (myHviForm.requiredMode() === 'all-required') {
+ *     <hvi-required-tag mode="all-required" />
+ *   }
+ *   <hvi-textfield label="Navn" formControlName="name" />
+ * </form>
  * ```
- *
- * Documentation: https://designsystemet.no/en/components/docs/form/code
  */
 class HviForm {
     /** Emits when the form has been submitted */
@@ -914,8 +857,31 @@ class HviForm {
     submitted = false;
     /** Optional focus target (e.g. HviErrorSummaryComponent) */
     focusOnInvalid;
+    /**
+     * Skru av/på automatisk required-tag-visning for child-komponenter.
+     * Default `true`. Sett til `false` for manuell kontroll.
+     */
+    showRequiredTags = true;
     // Optional injection: present when the form uses [formGroup] and ReactiveFormsModule is in scope
     formGroupDir = inject(FormGroupDirective, { optional: true });
+    /** Internal signal som oppdateres ved submit og init */
+    _requiredMode = signal('none', ...(ngDevMode ? [{ debugName: "_requiredMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Analysert required-modus for FormGroup-en.
+     * - `'all-required'` – alle validerte controls er required
+     * - `'mixed'` – blanding av required og optional
+     * - `'none'` – ingen required-validering
+     */
+    requiredMode = computed(() => this._requiredMode(), ...(ngDevMode ? [{ debugName: "requiredMode" }] : /* istanbul ignore next */ []));
+    /** Oppdater required-analyse. Kalles automatisk ved submit, men kan kalles manuelt. */
+    refreshRequiredMode() {
+        const form = this.formGroupDir?.form;
+        if (!form) {
+            this._requiredMode.set('none');
+            return;
+        }
+        this._requiredMode.set(analyzeFormRequired(form));
+    }
     onSubmit(event) {
         this.submitted = true;
         this.hviSubmitted.emit();
@@ -928,19 +894,26 @@ class HviForm {
             queueMicrotask(() => this.focusOnInvalid?.focus?.());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviForm, isStandalone: true, selector: "form[hviForm]", inputs: { focusOnInvalid: "focusOnInvalid" }, outputs: { hviSubmitted: "hviSubmitted" }, host: { listeners: { "submit": "onSubmit($event)" } }, ngImport: i0 });
+    ngOnInit() {
+        this.refreshRequiredMode();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: HviForm, isStandalone: true, selector: "form[hviForm]", inputs: { focusOnInvalid: "focusOnInvalid", showRequiredTags: ["showRequiredTags", "showRequiredTags", booleanAttribute] }, outputs: { hviSubmitted: "hviSubmitted" }, host: { listeners: { "submit": "onSubmit($event)" } }, exportAs: ["hviForm"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviForm, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[hviForm]',
                     standalone: true,
+                    exportAs: 'hviForm',
                 }]
         }], propDecorators: { hviSubmitted: [{
                 type: Output
             }], focusOnInvalid: [{
                 type: Input
+            }], showRequiredTags: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onSubmit: [{
                 type: HostListener,
                 args: ['submit', ['$event']]
@@ -955,8 +928,6 @@ const DEFAULT_ERROR_PRIORITY$1 = [
     'min',
     'max',
 ];
-let errorSummaryIdCounter = 0;
-const nextErrorSummaryHeadingId = () => `hvi-error-summary-heading-${++errorSummaryIdCounter}`;
 /**
  * @summary
  * ErrorSummary lists blocking validation errors so users can quickly find and fix them.
@@ -1023,6 +994,7 @@ const nextErrorSummaryHeadingId = () => `hvi-error-summary-heading-${++errorSumm
  * Documentation: https://designsystemet.no/en/components/docs/error-summary/code
  */
 class HviErrorSummary {
+    el = inject((ElementRef));
     /** Heading text shown above the list */
     heading = 'For å gå videre må du rette opp følgende feil:';
     /** Heading level for the heading element (1-6). Defaults to 2 per DS */
@@ -1050,13 +1022,10 @@ class HviErrorSummary {
     idMap;
     /** Auto mode: error key priority (first match wins) */
     errorPriority = DEFAULT_ERROR_PRIORITY$1;
-    /** Used for aria-labelledby on the container */
-    headingId = nextErrorSummaryHeadingId();
     /** When to show errors from the form controls */
     showWhen = 'submitted';
-    container;
     focus() {
-        this.container?.nativeElement.focus();
+        this.el.nativeElement.querySelector('ds-error-summary')?.focus();
     }
     /**
      * Handles click on error links to prevent Angular Router navigation
@@ -1132,33 +1101,27 @@ class HviErrorSummary {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviErrorSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HviErrorSummary, isStandalone: true, selector: "hvi-error-summary", inputs: { heading: "heading", headingLevel: "headingLevel", errors: "errors", form: "form", messages: "messages", idMap: "idMap", errorPriority: "errorPriority", headingId: "headingId", showWhen: "showWhen" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: `
-    <div
-      #container
-      class="ds-error-summary"
-      tabindex="-1"
-      [attr.aria-labelledby]="headingId"
-      [hidden]="!shouldShow"
-    >
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviErrorSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: HviErrorSummary, isStandalone: true, selector: "hvi-error-summary", inputs: { heading: "heading", headingLevel: "headingLevel", errors: "errors", form: "form", messages: "messages", idMap: "idMap", errorPriority: "errorPriority", showWhen: "showWhen" }, ngImport: i0, template: `
+    <ds-error-summary class="ds-error-summary" [hidden]="!shouldShow">
       @switch (headingLevel) {
         @case (1) {
-          <h1 class="ds-heading" [id]="headingId">{{ heading }}</h1>
-        }
-        @case (2) {
-          <h2 class="ds-heading" [id]="headingId">{{ heading }}</h2>
+          <h1 class="ds-heading">{{ heading }}</h1>
         }
         @case (3) {
-          <h3 class="ds-heading" [id]="headingId">{{ heading }}</h3>
+          <h3 class="ds-heading">{{ heading }}</h3>
         }
         @case (4) {
-          <h4 class="ds-heading" [id]="headingId">{{ heading }}</h4>
+          <h4 class="ds-heading">{{ heading }}</h4>
         }
         @case (5) {
-          <h5 class="ds-heading" [id]="headingId">{{ heading }}</h5>
+          <h5 class="ds-heading">{{ heading }}</h5>
+        }
+        @case (6) {
+          <h6 class="ds-heading">{{ heading }}</h6>
         }
         @default {
-          <h6 class="ds-heading" [id]="headingId">{{ heading }}</h6>
+          <h2 class="ds-heading">{{ heading }}</h2>
         }
       }
 
@@ -1175,40 +1138,31 @@ class HviErrorSummary {
           </li>
         }
       </ul>
-    </div>
-  `, isInline: true });
+    </ds-error-summary>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviErrorSummary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviErrorSummary, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'hvi-error-summary',
-                    standalone: true,
-                    template: `
-    <div
-      #container
-      class="ds-error-summary"
-      tabindex="-1"
-      [attr.aria-labelledby]="headingId"
-      [hidden]="!shouldShow"
-    >
+            args: [{ selector: 'hvi-error-summary', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: `
+    <ds-error-summary class="ds-error-summary" [hidden]="!shouldShow">
       @switch (headingLevel) {
         @case (1) {
-          <h1 class="ds-heading" [id]="headingId">{{ heading }}</h1>
-        }
-        @case (2) {
-          <h2 class="ds-heading" [id]="headingId">{{ heading }}</h2>
+          <h1 class="ds-heading">{{ heading }}</h1>
         }
         @case (3) {
-          <h3 class="ds-heading" [id]="headingId">{{ heading }}</h3>
+          <h3 class="ds-heading">{{ heading }}</h3>
         }
         @case (4) {
-          <h4 class="ds-heading" [id]="headingId">{{ heading }}</h4>
+          <h4 class="ds-heading">{{ heading }}</h4>
         }
         @case (5) {
-          <h5 class="ds-heading" [id]="headingId">{{ heading }}</h5>
+          <h5 class="ds-heading">{{ heading }}</h5>
+        }
+        @case (6) {
+          <h6 class="ds-heading">{{ heading }}</h6>
         }
         @default {
-          <h6 class="ds-heading" [id]="headingId">{{ heading }}</h6>
+          <h2 class="ds-heading">{{ heading }}</h2>
         }
       }
 
@@ -1225,9 +1179,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
           </li>
         }
       </ul>
-    </div>
-  `,
-                }]
+    </ds-error-summary>
+  `, styles: [":host{display:contents}\n"] }]
         }], propDecorators: { heading: [{
                 type: Input
             }], headingLevel: [{
@@ -1242,129 +1195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Input
             }], errorPriority: [{
                 type: Input
-            }], headingId: [{
-                type: Input
             }], showWhen: [{
                 type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ['container', { static: true }]
             }] } });
 
-// Copied from https://github.com/digdir/designsystemet/blob/main/packages/react/src/components/field/field-observer.ts
-function fieldObserver(fieldElement) {
-    if (!fieldElement)
-        return;
-    const elements = new Map();
-    const typeCounter = new Map(); // Track count for each data-field type
-    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-    let input = null;
-    let describedby = '';
-    const process = (mutations) => {
-        const changed = [];
-        const removed = [];
-        // Merge MutationRecords
-        for (const mutation of mutations) {
-            if (mutation.attributeName)
-                changed.push(mutation.target ?? fieldElement);
-            changed.push(...(mutation.addedNodes || []));
-            removed.push(...(mutation.removedNodes || []));
-        }
-        // Register elements
-        for (const el of changed) {
-            if (!isElement(el))
-                continue;
-            if (isLabel(el))
-                elements.set(el, el.htmlFor);
-            else if (el.hasAttribute('data-field'))
-                elements.set(el, el.id);
-            else if (isInputLike(el) && !el.hidden) {
-                input = el;
-                describedby = el.getAttribute('aria-describedby') || '';
-            }
-        }
-        // Reset removed elements
-        for (const el of removed) {
-            if (!isElement(el))
-                continue;
-            if (input === el)
-                input = null;
-            if (elements.has(el)) {
-                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
-                elements.delete(el);
-            }
-        }
-        // Connect elements
-        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
-        const inputId = input?.id || uuid;
-        // Reset type counters since we reprocess all elements
-        typeCounter.clear();
-        for (const [el, value] of elements) {
-            const descriptionType = el.getAttribute('data-field');
-            let id;
-            if (descriptionType) {
-                // Increment type counter for this type
-                const count = (typeCounter.get(descriptionType) || 0) + 1;
-                typeCounter.set(descriptionType, count);
-                id = `${inputId}:${descriptionType}:${count}`;
-            }
-            else {
-                id = inputId;
-            }
-            if (!value)
-                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (!describedbyIds.includes(el.id)) {
-                if (descriptionType === 'validation')
-                    describedbyIds.unshift(el.id); // Validations to the front
-                else if (descriptionType)
-                    describedbyIds.push(el.id); // Other descriptions to the back
-            }
-        }
-        // Prune aria-describedby so it does not reference removed elements
-        const prunedDescribedbyIds = describedbyIds.filter((id) => {
-            if (!id)
-                return false;
-            if (id === inputId)
-                return true;
-            // Keep if it still exists anywhere in the document.
-            // This preserves "original aria-describedby" entries that live outside the field subtree.
-            return !!fieldElement.ownerDocument?.getElementById(id);
-        });
-        setAttr(input, 'id', inputId);
-        setAttr(input, 'aria-describedby', prunedDescribedbyIds.join(' ').trim());
-    };
-    const observer = createOptimizedMutationObserver(process);
-    observer.observe(fieldElement, {
-        attributeFilter: ['id', 'for', 'aria-describedby'],
-        attributes: true,
-        childList: true,
-        subtree: true,
-    });
-    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
-    observer.takeRecords(); // Clear initial setup queue
-    return () => observer.disconnect();
-}
-// Utilities
-const isElement = (node) => node instanceof Element;
-const isLabel = (node) => node instanceof HTMLLabelElement;
-const isInputLike = (node) => node instanceof HTMLElement && 'validity' in node && !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
-const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
-// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
-function createOptimizedMutationObserver(callback) {
-    const queue = [];
-    const observer = new MutationObserver((mutations) => {
-        if (!queue.length)
-            requestAnimationFrame(process);
-        queue.push(...mutations);
-    });
-    const process = () => {
-        callback(queue, observer);
-        queue.length = 0; // Reset queue
-        observer.takeRecords(); // Clear queue due to DOM changes in callback
-    };
-    return observer;
-}
-
 /**
  * Decorative affix container displayed alongside a text input.
  *
@@ -1383,10 +1217,10 @@ function createOptimizedMutationObserver(callback) {
  * Documentation: https://designsystemet.no/en/components/docs/field/code#prefixsuffix
  */
 class HviFieldAffix {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldAffix, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviFieldAffix, isStandalone: true, selector: "hvi-field-affix", host: { properties: { "aria-hidden": "true" }, classAttribute: "ds-field-affix" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldAffix, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviFieldAffix, isStandalone: true, selector: "hvi-field-affix", host: { properties: { "aria-hidden": "true" }, classAttribute: "ds-field-affix" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldAffix, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldAffix, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-field-affix',
@@ -1416,10 +1250,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Documentation: https://designsystemet.no/en/components/docs/field/code#prefixsuffix
  */
 class HviFieldAffixes {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldAffixes, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviFieldAffixes, isStandalone: true, selector: "hvi-field-affixes", host: { classAttribute: "ds-field-affixes" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldAffixes, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviFieldAffixes, isStandalone: true, selector: "hvi-field-affixes", host: { classAttribute: "ds-field-affixes" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldAffixes, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldAffixes, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-field-affixes',
@@ -1431,129 +1265,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 
 /**
- * Counter component that displays remaining/exceeded character count for a field.
+ * Counter that displays remaining/exceeded character count for a field.
  *
- * @remarks
- * Shows a visual counter and provides accessible announcements via aria-live.
  * Must be used inside a `hvi-field` component alongside a textarea or input.
- *
- * The component automatically finds and tracks the input/textarea in the same field,
+ * The ds-field web component automatically tracks the input/textarea,
  * so you only need to provide the `limit` property.
  *
  * @example
- * Simple usage (auto-tracking):
  * ```html
  * <hvi-field>
  *   <label hviLabel for="description" weight="medium">Beskrivelse</label>
- *   <textarea hviInput id="description" rows="3" maxlength="100"></textarea>
+ *   <textarea hviInput id="description" rows="3"></textarea>
  *   <hvi-field-counter [limit]="100" />
  * </hvi-field>
  * ```
  *
- * @example
- * Manual tracking (for custom scenarios):
- * ```html
- * <hvi-field>
- *   <label hviLabel for="description" weight="medium">Beskrivelse</label>
- *   <textarea hviInput id="description" rows="3" #textarea></textarea>
- *   <hvi-field-counter [limit]="100" [count]="textarea.value.length" />
- * </hvi-field>
- * ```
- *
  * Documentation: https://designsystemet.no/en/components/docs/field/code
  */
 class HviFieldCounter {
-    el = inject((ElementRef));
-    destroyRef = inject(DestroyRef);
-    /** Auto-tracked character count from the input/textarea in the same field */
-    autoCount = signal(0, ...(ngDevMode ? [{ debugName: "autoCount" }] : []));
-    /**
-     * Current character count. If not provided, the component will
-     * automatically track the input/textarea in the same hvi-field.
-     */
-    count = input(...(ngDevMode ? [undefined, { debugName: "count" }] : []));
     /** Maximum allowed characters */
-    limit = input.required(...(ngDevMode ? [{ debugName: "limit" }] : []));
+    limit = input.required(...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
     /** Label template when limit is exceeded. Use %d for the count. */
-    over = input('%d tegn for mye', ...(ngDevMode ? [{ debugName: "over" }] : []));
+    over = input(...(ngDevMode ? [undefined, { debugName: "over" }] : /* istanbul ignore next */ []));
     /** Label template for remaining characters. Use %d for the count. */
-    under = input('%d tegn igjen', ...(ngDevMode ? [{ debugName: "under" }] : []));
-    /** Hint text for screen readers about max characters. Use %d for the limit. */
-    hint = input('Maks %d tegn tillatt.', ...(ngDevMode ? [{ debugName: "hint" }] : []));
-    /** Effective count - uses manual count if provided, otherwise auto-tracked */
-    effectiveCount = computed(() => this.count() ?? this.autoCount(), ...(ngDevMode ? [{ debugName: "effectiveCount" }] : []));
-    /** Computed difference between limit and current count */
-    remaining = computed(() => this.limit() - this.effectiveCount(), ...(ngDevMode ? [{ debugName: "remaining" }] : []));
-    /** Whether the limit has been exceeded */
-    isOver = computed(() => this.remaining() < 0, ...(ngDevMode ? [{ debugName: "isOver" }] : []));
-    /** The formatted message to display */
-    message = computed(() => {
-        const diff = Math.abs(this.remaining());
-        const template = this.isOver() ? this.over() : this.under();
-        return template.replace('%d', String(diff));
-    }, ...(ngDevMode ? [{ debugName: "message" }] : []));
-    /** The formatted hint for screen readers */
-    formattedHint = computed(() => this.hint().replace('%d', String(this.limit())), ...(ngDevMode ? [{ debugName: "formattedHint" }] : []));
-    ngAfterViewInit() {
-        // Only auto-track if count is not manually provided
-        if (this.count() !== undefined)
-            return;
-        // Find the parent hvi-field
-        const field = this.el.nativeElement.closest('.ds-field');
-        if (!field)
-            return;
-        // Find input or textarea in the field
-        const inputEl = field.querySelector('input, textarea');
-        if (!inputEl)
-            return;
-        // Set initial count
-        this.autoCount.set(inputEl.value.length);
-        // Listen for input events
-        const onInput = () => this.autoCount.set(inputEl.value.length);
-        inputEl.addEventListener('input', onInput);
-        this.destroyRef.onDestroy(() => {
-            inputEl.removeEventListener('input', onInput);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldCounter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: HviFieldCounter, isStandalone: true, selector: "hvi-field-counter", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, over: { classPropertyName: "over", publicName: "over", isSignal: true, isRequired: false, transformFunction: null }, under: { classPropertyName: "under", publicName: "under", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <!-- Screen reader live region for dynamic updates -->
-    <div class="ds-sr-only" aria-live="polite">{{ message() }}</div>
-
-    <!-- Visible counter text -->
-    <p class="ds-paragraph" data-variant="default" aria-hidden="true">{{ message() }}</p>
-
-    <!-- Screen reader hint (read when entering field) -->
-    <div class="ds-sr-only" aria-hidden="true" data-field="description">
-      {{ formattedHint() }}
-    </div>
-  `, isInline: true });
+    under = input(...(ngDevMode ? [undefined, { debugName: "under" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldCounter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: HviFieldCounter, isStandalone: true, selector: "hvi-field-counter", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, over: { classPropertyName: "over", publicName: "over", isSignal: true, isRequired: false, transformFunction: null }, under: { classPropertyName: "under", publicName: "under", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<p
+    class="ds-validation-message"
+    data-field="counter"
+    [attr.data-limit]="limit()"
+    [attr.data-over]="over() ?? null"
+    [attr.data-under]="under() ?? null"
+  ></p>`, isInline: true, styles: [":host{display:contents}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldCounter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldCounter, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'hvi-field-counter',
-                    standalone: true,
-                    template: `
-    <!-- Screen reader live region for dynamic updates -->
-    <div class="ds-sr-only" aria-live="polite">{{ message() }}</div>
-
-    <!-- Visible counter text -->
-    <p class="ds-paragraph" data-variant="default" aria-hidden="true">{{ message() }}</p>
-
-    <!-- Screen reader hint (read when entering field) -->
-    <div class="ds-sr-only" aria-hidden="true" data-field="description">
-      {{ formattedHint() }}
-    </div>
-  `,
-                }]
-        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: true }] }], over: [{ type: i0.Input, args: [{ isSignal: true, alias: "over", required: false }] }], under: [{ type: i0.Input, args: [{ isSignal: true, alias: "under", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+            args: [{ selector: 'hvi-field-counter', standalone: true, template: `<p
+    class="ds-validation-message"
+    data-field="counter"
+    [attr.data-limit]="limit()"
+    [attr.data-over]="over() ?? null"
+    [attr.data-under]="under() ?? null"
+  ></p>`, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: true }] }], over: [{ type: i0.Input, args: [{ isSignal: true, alias: "over", required: false }] }], under: [{ type: i0.Input, args: [{ isSignal: true, alias: "under", required: false }] }] } });
 
 class HviFieldDescription {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviFieldDescription, isStandalone: true, selector: "[hviFieldDescription]", host: { attributes: { "data-field": "description" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviFieldDescription, isStandalone: true, selector: "[hviFieldDescription]", host: { attributes: { "data-field": "description" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviFieldDescription]',
@@ -1565,10 +1325,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 
 class HviFieldOptional {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldOptional, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviFieldOptional, isStandalone: true, selector: "[hviFieldOptional]", host: { attributes: { "data-field": "optional" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldOptional, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviFieldOptional, isStandalone: true, selector: "[hviFieldOptional]", host: { attributes: { "data-field": "optional" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldOptional, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldOptional, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviFieldOptional]',
@@ -1580,10 +1340,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 
 class HviFieldValidation {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldValidation, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviFieldValidation, isStandalone: true, selector: "[hviFieldValidation]", host: { attributes: { "data-field": "validation" }, classAttribute: "ds-validation-message" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldValidation, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviFieldValidation, isStandalone: true, selector: "[hviFieldValidation]", host: { attributes: { "data-field": "validation" }, classAttribute: "ds-validation-message" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldValidation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldValidation, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviFieldValidation]',
@@ -1596,7 +1356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 
 /**
- * Field is a helper component to automatically associate a field with hviLabel, hviFieldDescription and hviFieldValidation.
+ * @summary
+ * Field kobler automatisk sammen label, beskrivelse, validering og input via ds-field web component.
  *
  * @example
  * ```html
@@ -1608,31 +1369,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * </hvi-field>
  * ```
  *
- * Documentation: https://designsystemet.no/en/components/docs/field/overview
+ * @see {@link https://designsystemet.no/en/components/docs/field/overview}
  */
 class HviField {
     /** Position of toggle inputs (radio, checkbox, switch) in field */
     position;
-    el = inject((ElementRef));
-    destroyRef = inject(DestroyRef);
-    ngAfterViewInit() {
-        const stop = fieldObserver(this.el.nativeElement);
-        this.destroyRef.onDestroy(() => stop?.());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviField, isStandalone: true, selector: "hvi-field", inputs: { position: "position" }, host: { properties: { "attr.data-position": "position ?? null" }, classAttribute: "ds-field" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviField, isStandalone: true, selector: "hvi-field", inputs: { position: "position" }, ngImport: i0, template: '<ds-field class="ds-field" [attr.data-position]="position ?? null"><ng-content /></ds-field>', isInline: true, styles: [":host{display:contents}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviField, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'hvi-field',
-                    standalone: true,
-                    template: '<ng-content />',
-                    host: {
-                        class: 'ds-field',
-                        '[attr.data-position]': 'position ?? null',
-                    },
-                }]
+            args: [{ selector: 'hvi-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: '<ds-field class="ds-field" [attr.data-position]="position ?? null"><ng-content /></ds-field>', styles: [":host{display:contents}\n"] }]
         }], propDecorators: { position: [{
                 type: Input
             }] } });
@@ -1664,10 +1411,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Documentation: https://designsystemet.no/en/components/docs/fieldset/overview
  */
 class HviFieldset {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldset, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviFieldset, isStandalone: true, selector: "fieldset[hviFieldset]", host: { classAttribute: "ds-fieldset" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldset, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviFieldset, isStandalone: true, selector: "fieldset[hviFieldset]", host: { classAttribute: "ds-fieldset" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviFieldset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviFieldset, decorators: [{
             type: Directive,
             args: [{
                     selector: 'fieldset[hviFieldset]',
@@ -1728,10 +1475,10 @@ class HviInput {
             event.stopImmediatePropagation();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.1", type: HviInput, isStandalone: true, selector: "input[hviInput], textarea[hviInput]", inputs: { type: "type", size: "size", role: "role", disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "change": "onChange($event)", "keydown": "onKeydown($event)" }, properties: { "attr.type": "type ?? null", "attr.size": "size ?? null", "attr.disabled": "_disabled ? \"\" : null", "attr.readonly": "_readOnly ? \"\" : null", "attr.role": "role ?? null" }, classAttribute: "ds-input" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: HviInput, isStandalone: true, selector: "input[hviInput], textarea[hviInput]", inputs: { type: "type", size: "size", role: "role", disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "change": "onChange($event)", "keydown": "onKeydown($event)" }, properties: { "attr.type": "type ?? null", "attr.size": "size ?? null", "attr.disabled": "_disabled ? \"\" : null", "attr.readonly": "_readOnly ? \"\" : null", "attr.role": "role ?? null" }, classAttribute: "ds-input" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[hviInput], textarea[hviInput]',
@@ -1791,10 +1538,10 @@ class HviControlInvalid {
         const show = control.invalid && (control.touched || submitted);
         return show ? 'true' : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviControlInvalid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviControlInvalid, isStandalone: true, selector: "[hviControlInvalid]", host: { properties: { "attr.aria-invalid": "this.ariaInvalid" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviControlInvalid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviControlInvalid, isStandalone: true, selector: "[hviControlInvalid]", host: { properties: { "attr.aria-invalid": "this.ariaInvalid" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviControlInvalid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviControlInvalid, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviControlInvalid]',
@@ -1857,10 +1604,10 @@ class HviValidationMessage {
         }
         return 'Ugyldig verdi';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviValidationMessage, isStandalone: true, selector: "[hviValidationMessage]", inputs: { controlName: ["hviValidationMessage", "controlName"], messages: "messages", errorPriority: "errorPriority" }, host: { properties: { "textContent": "message", "hidden": "!message" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviValidationMessage, isStandalone: true, selector: "[hviValidationMessage]", inputs: { controlName: ["hviValidationMessage", "controlName"], messages: "messages", errorPriority: "errorPriority" }, host: { properties: { "textContent": "message", "hidden": "!message" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviValidationMessage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviValidationMessage, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviValidationMessage]',
@@ -2033,6 +1780,119 @@ function hviNullValidator() {
     return { validator: Validators.nullValidator, key: 'null', message: '' };
 }
 
+/**
+ * @summary
+ * Tag is a label that can be used to categorize items or communicate progress, status, or process. Tags can provide users with a quicker overview of content.
+ *
+ * @example
+ * ```html
+ * <hvi-tag variant="outline" size="sm" color="info">Small info tag</hvi-tag>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/tag/code
+ */
+class HviTag {
+    /** The variants of the tag */
+    variant;
+    /** The sizes of the tag */
+    size;
+    /** The color theme of the tag */
+    color;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviTag, isStandalone: true, selector: "hvi-tag", inputs: { variant: "variant", size: "size", color: "color" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-size": "size ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-tag" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTag, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-tag',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-tag',
+                        '[attr.data-variant]': 'variant ?? null',
+                        '[attr.data-size]': 'size ?? null',
+                        '[attr.data-color]': 'color ?? null',
+                    },
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+/**
+ * RequiredTag brukes sammen med labels i skjema for å indikere om et felt er
+ * påkrevd, valgfritt, eller om alle felt må fylles ut.
+ *
+ * Komponenten wrapper `HviTag` med forhåndsdefinerte tekster og farger basert på mode.
+ * Bruker `display: contents` slik at den fungerer inline i `<label>` og frittstående.
+ *
+ * Kan brukes manuelt, eller automatisk via `HviForm` som analyserer FormGroup
+ * og lar child-komponenter som `HviTextfield` vise riktig tag.
+ *
+ * @example
+ * ```html
+ * <hvi-required-tag />
+ * <hvi-required-tag mode="optional" />
+ * <hvi-required-tag mode="all-required" />
+ * ```
+ */
+class HviRequiredTag {
+    /**
+     * Bestemmer tekst og farge på taggen.
+     * - `required` (default): "Må fylles ut" (warning)
+     * - `optional`: "Valgfritt" (info)
+     * - `all-required`: "Alle felt må fylles ut" (warning)
+     */
+    mode = 'required';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviRequiredTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: HviRequiredTag, isStandalone: true, selector: "hvi-required-tag", inputs: { mode: "mode" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    <hvi-tag variant="default" size="sm" [color]="mode === 'optional' ? 'info' : 'warning'">
+      @switch (mode) {
+        @case ('all-required') {
+          Alle felt må fylles ut
+        }
+        @case ('required') {
+          Må fylles ut
+        }
+        @case ('optional') {
+          Valgfritt
+        }
+      }
+    </hvi-tag>
+  `, isInline: true, dependencies: [{ kind: "component", type: HviTag, selector: "hvi-tag", inputs: ["variant", "size", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviRequiredTag, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-required-tag',
+                    standalone: true,
+                    imports: [HviTag],
+                    template: `
+    <hvi-tag variant="default" size="sm" [color]="mode === 'optional' ? 'info' : 'warning'">
+      @switch (mode) {
+        @case ('all-required') {
+          Alle felt må fylles ut
+        }
+        @case ('required') {
+          Må fylles ut
+        }
+        @case ('optional') {
+          Valgfritt
+        }
+      }
+    </hvi-tag>
+  `,
+                    host: {
+                        style: 'display: contents',
+                    },
+                }]
+        }], propDecorators: { mode: [{
+                type: Input
+            }] } });
+
 // 1) Bare field-byggesteiner
 const HviFieldKit = [
     HviField,
@@ -2042,6 +1902,7 @@ const HviFieldKit = [
     HviFieldAffix,
     HviFieldAffixes,
     HviFieldCounter,
+    HviRequiredTag,
 ];
 // 2) Reactive forms + invalid/validation glue + submit behavior
 const HviValidationKit = [
@@ -2072,10 +1933,10 @@ const HviForms = [
 class HviHeading {
     /** The size of the heading */
     size;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviHeading, isStandalone: true, selector: "h1[hviHeading], h2[hviHeading], h3[hviHeading], h4[hviHeading], h5[hviHeading], h6[hviHeading]", inputs: { size: "size" }, host: { properties: { "attr.data-size": "size" }, classAttribute: "ds-heading" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviHeading, isStandalone: true, selector: "h1[hviHeading], h2[hviHeading], h3[hviHeading], h4[hviHeading], h5[hviHeading], h6[hviHeading]", inputs: { size: "size" }, host: { properties: { "attr.data-size": "size" }, classAttribute: "ds-heading" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviHeading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviHeading, decorators: [{
             type: Directive,
             args: [{
                     selector: 'h1[hviHeading], h2[hviHeading], h3[hviHeading], h4[hviHeading], h5[hviHeading], h6[hviHeading]',
@@ -2089,55 +1950,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Input
             }] } });
 
-class HviIcon {
-    icon;
-    color;
-    size = 'md';
-    ariaHidden = false;
-    http = inject(HttpClient);
-    elementRef = inject(ElementRef);
-    cdr = inject(ChangeDetectorRef);
-    ngOnChanges() {
-        this.loadIcon();
-    }
-    loadIcon() {
-        this.http
-            .get(`/assets/icons/${this.icon}.svg`, {
-            responseType: 'text',
-        })
-            .subscribe({
-            next: (svg) => {
-                this.elementRef.nativeElement.innerHTML = svg;
-                this.cdr.markForCheck();
-            },
-            error: (err) => {
-                console.error('Failed to load icon:', this.icon, err);
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: HviIcon, isStandalone: true, selector: "hvi-icon", inputs: { icon: "icon", color: "color", size: "size", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute] }, host: { properties: { "attr.data-size": "size", "attr.data-color": "color", "attr.aria-hidden": "ariaHidden" }, classAttribute: "hvi-icon" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: ["hvi-icon{display:inline-block}svg{display:inline-block}hvi-icon[data-size=sm] svg{width:16px;height:16px}hvi-icon[data-size=md] svg{width:24px;height:24px}hvi-icon[data-size=lg] svg{width:32px;height:32px}hvi-icon[data-size=xl] svg{width:40px;height:40px}hvi-icon svg path{fill:currentColor}hvi-icon[data-color=danger] svg path{fill:var(--ds-color-danger-base-default)}\n"], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviIcon, decorators: [{
-            type: Component,
-            args: [{ selector: 'hvi-icon', standalone: true, template: '', encapsulation: ViewEncapsulation.None, host: {
-                        class: 'hvi-icon',
-                        '[attr.data-size]': 'size',
-                        '[attr.data-color]': 'color',
-                        '[attr.aria-hidden]': 'ariaHidden',
-                    }, styles: ["hvi-icon{display:inline-block}svg{display:inline-block}hvi-icon[data-size=sm] svg{width:16px;height:16px}hvi-icon[data-size=md] svg{width:24px;height:24px}hvi-icon[data-size=lg] svg{width:32px;height:32px}hvi-icon[data-size=xl] svg{width:40px;height:40px}hvi-icon svg path{fill:currentColor}hvi-icon[data-color=danger] svg path{fill:var(--ds-color-danger-base-default)}\n"] }]
-        }], propDecorators: { icon: [{
-                type: Input,
-                args: [{ required: true }]
-            }], color: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], ariaHidden: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
-
 /**
  * Label functions as a clear and accessible text label that tells the user what an associated form element is about.
  *
@@ -2151,10 +1963,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class HviLabel {
     /** The font weight of the label */
     weight;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviLabel, isStandalone: true, selector: "label[hviLabel], legend[hviLabel]", inputs: { weight: "weight" }, host: { properties: { "attr.data-weight": "weight ?? null" }, classAttribute: "ds-label" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviLabel, isStandalone: true, selector: "label[hviLabel], legend[hviLabel]", inputs: { weight: "weight" }, host: { properties: { "attr.data-weight": "weight ?? null" }, classAttribute: "ds-label" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: 'label[hviLabel], legend[hviLabel]',
@@ -2181,10 +1993,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class HviLink {
     /** Used to change the appearance of the link. */
     color = 'default';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviLink, isStandalone: true, selector: "a[hviLink]", inputs: { color: "color" }, host: { properties: { "attr.data-color": "color" }, classAttribute: "ds-link" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviLink, isStandalone: true, selector: "a[hviLink]", inputs: { color: "color" }, host: { properties: { "attr.data-color": "color" }, classAttribute: "ds-link" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviLink, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[hviLink]',
@@ -2220,10 +2032,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Documentation: https://designsystemet.no/en/components/docs/input/code
  */
 class HviList {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviList, isStandalone: true, selector: "ol[hviList], ul[hviList]", host: { classAttribute: "ds-list" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviList, isStandalone: true, selector: "ol[hviList], ul[hviList]", host: { classAttribute: "ds-list" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviList, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ol[hviList], ul[hviList]',
@@ -3168,14 +2980,14 @@ const LOGOS = {
  */
 class HviLogo {
     /** Which company logo to display */
-    company = input.required(...(ngDevMode ? [{ debugName: "company" }] : []));
+    company = input.required(...(ngDevMode ? [{ debugName: "company" }] : /* istanbul ignore next */ []));
     /** Logo size — sm (40px), md (65px, default), lg (82px) height */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Override the default accessible label */
-    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    logo = computed(() => LOGOS[this.company()], ...(ngDevMode ? [{ debugName: "logo" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviLogo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HviLogo, isStandalone: true, selector: "hvi-logo", inputs: { company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" }, classAttribute: "hvi-logo" }, ngImport: i0, template: `
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    logo = computed(() => LOGOS[this.company()], ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviLogo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: HviLogo, isStandalone: true, selector: "hvi-logo", inputs: { company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" }, classAttribute: "hvi-logo" }, ngImport: i0, template: `
     <svg
       [attr.viewBox]="logo().viewBox"
       [attr.aria-label]="ariaLabel() ?? logo().label"
@@ -3188,7 +3000,7 @@ class HviLogo {
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;color:#003087}:host-context([data-color-scheme=\"dark\"]){color:#fff}svg{display:block;height:100%;width:auto}:host([data-size=\"sm\"]){height:46px}:host([data-size=\"md\"]){height:52px}:host([data-size=\"lg\"]){height:60px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviLogo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviLogo, decorators: [{
             type: Component,
             args: [{ selector: 'hvi-logo', standalone: true, template: `
     <svg
@@ -3253,17 +3065,17 @@ class HviPagination {
     /** Event som emitteres med mer detaljer om sideendring */
     pageChange = new EventEmitter();
     // Internal signals
-    _totalItems = signal(0, ...(ngDevMode ? [{ debugName: "_totalItems" }] : []));
-    _pageSize = signal(10, ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
-    _currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
+    _totalItems = signal(0, ...(ngDevMode ? [{ debugName: "_totalItems" }] : /* istanbul ignore next */ []));
+    _pageSize = signal(10, ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ []));
+    _currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : /* istanbul ignore next */ []));
     /** Beregnet totalt antall sider */
     totalPages = computed(() => {
         return Math.max(1, Math.ceil(this._totalItems() / this._pageSize()));
-    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     /** Er vi på første side? */
-    isFirstPage = computed(() => this._currentPage() <= 1, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : []));
+    isFirstPage = computed(() => this._currentPage() <= 1, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : /* istanbul ignore next */ []));
     /** Er vi på siste side? */
-    isLastPage = computed(() => this._currentPage() >= this.totalPages(), ...(ngDevMode ? [{ debugName: "isLastPage" }] : []));
+    isLastPage = computed(() => this._currentPage() >= this.totalPages(), ...(ngDevMode ? [{ debugName: "isLastPage" }] : /* istanbul ignore next */ []));
     /** Beregner hvilke elementer som skal vises i pagineringen */
     paginationItems = computed(() => {
         const current = this._currentPage();
@@ -3296,7 +3108,7 @@ class HviPagination {
             items.push({ type: 'page', page: total });
         }
         return items;
-    }, ...(ngDevMode ? [{ debugName: "paginationItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "paginationItems" }] : /* istanbul ignore next */ []));
     /** Gå til en spesifikk side */
     goToPage(page) {
         const previousPage = this._currentPage();
@@ -3327,8 +3139,8 @@ class HviPagination {
     goToLast() {
         this.goToPage(this.totalPages());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HviPagination, isStandalone: true, selector: "hvi-pagination", inputs: { totalItems: ["totalItems", "totalItems", numberAttribute], pageSize: ["pageSize", "pageSize", numberAttribute], currentPage: ["currentPage", "currentPage", numberAttribute], siblingCount: ["siblingCount", "siblingCount", numberAttribute], showEdges: ["showEdges", "showEdges", booleanAttribute], showPreviousNextLabels: ["showPreviousNextLabels", "showPreviousNextLabels", booleanAttribute], ariaLabel: "ariaLabel", previousLabel: "previousLabel", nextLabel: "nextLabel" }, outputs: { currentPageChange: "currentPageChange", pageChange: "pageChange" }, host: { classAttribute: "hvi-pagination" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: HviPagination, isStandalone: true, selector: "hvi-pagination", inputs: { totalItems: ["totalItems", "totalItems", numberAttribute], pageSize: ["pageSize", "pageSize", numberAttribute], currentPage: ["currentPage", "currentPage", numberAttribute], siblingCount: ["siblingCount", "siblingCount", numberAttribute], showEdges: ["showEdges", "showEdges", booleanAttribute], showPreviousNextLabels: ["showPreviousNextLabels", "showPreviousNextLabels", booleanAttribute], ariaLabel: "ariaLabel", previousLabel: "previousLabel", nextLabel: "nextLabel" }, outputs: { currentPageChange: "currentPageChange", pageChange: "pageChange" }, host: { classAttribute: "hvi-pagination" }, ngImport: i0, template: `
     <nav [attr.aria-label]="ariaLabel" class="ds-pagination">
       <ul>
         <!-- Forrige -->
@@ -3382,7 +3194,7 @@ class HviPagination {
     </nav>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviPagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviPagination, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-pagination',
@@ -3491,10 +3303,10 @@ class HviParagraph {
     variant;
     /** Paragraph is available in several text sizes to suit different needs */
     size;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviParagraph, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviParagraph, isStandalone: true, selector: "p[hviParagraph]", inputs: { variant: "variant", size: "size" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-size": "size ?? null" }, classAttribute: "ds-paragraph" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviParagraph, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviParagraph, isStandalone: true, selector: "p[hviParagraph]", inputs: { variant: "variant", size: "size" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-size": "size ?? null" }, classAttribute: "ds-paragraph" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviParagraph, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviParagraph, decorators: [{
             type: Directive,
             args: [{
                     selector: 'p[hviParagraph]',
@@ -3511,38 +3323,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Input
             }] } });
 
-const arrowPseudoElement = {
-    name: 'ArrowPseudoElement',
-    fn(data) {
-        const { elements, rects, placement } = data;
-        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
-        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
-        if (rects.reference.width > rects.floating.width) {
-            arrowX = `${Math.round(rects.floating.width / 2)}px`;
-        }
-        if (rects.reference.height > rects.floating.height) {
-            arrowY = `${Math.round(rects.floating.height / 2)}px`;
-        }
-        switch (placement.split('-')[0]) {
-            case 'top':
-                arrowY = '100%';
-                break;
-            case 'right':
-                arrowX = '0';
-                break;
-            case 'bottom':
-                arrowY = '0';
-                break;
-            case 'left':
-                arrowX = '100%';
-                break;
-        }
-        elements.floating.setAttribute('data-placement', placement.split('-')[0]);
-        elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
-        elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
-        return data;
-    },
-};
 /**
  * @summary
  * Popover vises over andre elementer i grensesnittet og er koblet til et spesifikt element.
@@ -3557,12 +3337,8 @@ const arrowPseudoElement = {
  * @see {@link https://designsystemet.no/en/components/docs/popover/code}
  */
 class HviPopover {
-    el = inject((ElementRef));
-    cleanupAutoUpdate;
-    boundHandleClick;
-    boundHandleKeydown;
-    /** Popover type - 'manual' krever manuell lukking, 'auto' lukkes ved klikk utenfor */
-    type = 'manual';
+    /** Popover type - 'auto' lukkes ved klikk utenfor eller Escape, 'manual' krever manuell lukking */
+    type = 'auto';
     /** Visuell variant */
     variant = 'default';
     /** Farge-tema */
@@ -3575,113 +3351,18 @@ class HviPopover {
     opened = new EventEmitter();
     /** Event når popover lukkes */
     closed = new EventEmitter();
-    get popoverElement() {
-        return this.el.nativeElement;
-    }
-    get triggerElement() {
-        const id = this.popoverElement.id;
-        return id ? document.querySelector(`[popovertarget="${id}"]`) : null;
-    }
-    ngOnInit() {
-        this.setupEventListeners();
-    }
-    ngOnDestroy() {
-        this.stopAutoUpdate();
-        this.removeEventListeners();
-    }
-    setupEventListeners() {
-        const popover = this.popoverElement;
-        // Click utenfor lukker popover
-        this.boundHandleClick = (event) => {
-            const el = event.target;
-            const isTrigger = el?.closest?.(`[popovertarget="${popover.id}"]`);
-            const isOutside = !isTrigger && !popover.contains(el);
-            if (isTrigger) {
-                event.preventDefault();
-                popover.togglePopover?.();
-            }
-            if (isOutside && popover.matches(':popover-open')) {
-                popover.togglePopover?.();
-            }
-        };
-        // Escape lukker popover
-        this.boundHandleKeydown = (event) => {
-            if (event.key !== 'Escape' || !popover.matches(':popover-open'))
-                return;
-            event.preventDefault();
-            popover.togglePopover?.();
-        };
-        addEventListener('click', this.boundHandleClick);
-        addEventListener('keydown', this.boundHandleKeydown);
-        // Toggle events
-        popover.addEventListener('beforetoggle', this.handleBeforeToggle);
-        popover.addEventListener('toggle', this.handleToggle);
-    }
-    removeEventListeners() {
-        if (this.boundHandleClick) {
-            removeEventListener('click', this.boundHandleClick);
-        }
-        if (this.boundHandleKeydown) {
-            removeEventListener('keydown', this.boundHandleKeydown);
-        }
-        this.popoverElement.removeEventListener('beforetoggle', this.handleBeforeToggle);
-        this.popoverElement.removeEventListener('toggle', this.handleToggle);
-    }
-    handleBeforeToggle = (event) => {
-        const toggleEvent = event;
-        if (toggleEvent.newState === 'open') {
-            this.updatePosition();
-        }
-    };
-    handleToggle = (event) => {
-        const toggleEvent = event;
-        if (toggleEvent.newState === 'open') {
-            this.startAutoUpdate();
+    onToggle(event) {
+        if (event.newState === 'open') {
             this.opened.emit();
         }
         else {
-            this.stopAutoUpdate();
             this.closed.emit();
         }
-    };
-    updatePosition() {
-        const trigger = this.triggerElement;
-        const popover = this.popoverElement;
-        if (!trigger || !popover)
-            return;
-        computePosition(trigger, popover, {
-            placement: this.placement,
-            strategy: 'fixed',
-            middleware: [
-                offset((data) => {
-                    const styles = getComputedStyle(data.elements.floating, '::before');
-                    return parseFloat(styles.height) || 12;
-                }),
-                ...(this.autoPlacement ? [flip({ fallbackAxisSideDirection: 'start' }), shift()] : []),
-                arrowPseudoElement,
-            ],
-        }).then(({ x, y }) => {
-            popover.style.translate = `${x}px ${y}px`;
-        });
-    }
-    startAutoUpdate() {
-        this.stopAutoUpdate();
-        const trigger = this.triggerElement;
-        const popover = this.popoverElement;
-        if (!trigger || !popover)
-            return;
-        this.cleanupAutoUpdate = autoUpdate(trigger, popover, () => this.updatePosition());
     }
-    stopAutoUpdate() {
-        if (this.cleanupAutoUpdate) {
-            this.cleanupAutoUpdate();
-            this.cleanupAutoUpdate = undefined;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviPopover, isStandalone: true, selector: "hvi-popover", inputs: { type: "type", variant: "variant", color: "color", placement: "placement", autoPlacement: "autoPlacement" }, outputs: { opened: "opened", closed: "closed" }, host: { properties: { "attr.popover": "type", "attr.data-variant": "variant", "attr.data-color": "color" }, classAttribute: "ds-popover" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviPopover, isStandalone: true, selector: "hvi-popover", inputs: { type: "type", variant: "variant", color: "color", placement: "placement", autoPlacement: "autoPlacement" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "toggle": "onToggle($event)" }, properties: { "attr.popover": "type", "attr.data-variant": "variant", "attr.data-color": "color", "attr.data-placement": "placement", "attr.data-autoplacement": "autoPlacement ? \"\" : null" }, classAttribute: "ds-popover" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviPopover, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-popover',
@@ -3692,6 +3373,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         '[attr.popover]': 'type',
                         '[attr.data-variant]': 'variant',
                         '[attr.data-color]': 'color',
+                        '[attr.data-placement]': 'placement',
+                        '[attr.data-autoplacement]': 'autoPlacement ? "" : null',
                     },
                 }]
         }], propDecorators: { type: [{
@@ -3708,112 +3391,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Output
             }], closed: [{
                 type: Output
-            }] } });
-
-/**
- * @summary
- * Tag is a label that can be used to categorize items or communicate progress, status, or process. Tags can provide users with a quicker overview of content.
- *
- * @example
- * ```html
- * <hvi-tag variant="outline" size="sm" color="info">Small info tag</hvi-tag>
- * ```
- *
- * Documentation: https://designsystemet.no/en/components/docs/tag/code
- */
-class HviTag {
-    /** The variants of the tag */
-    variant;
-    /** The sizes of the tag */
-    size;
-    /** The color theme of the tag */
-    color;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviTag, isStandalone: true, selector: "hvi-tag", inputs: { variant: "variant", size: "size", color: "color" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-size": "size ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-tag" }, ngImport: i0, template: '<ng-content />', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTag, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'hvi-tag',
-                    standalone: true,
-                    template: '<ng-content />',
-                    host: {
-                        class: 'ds-tag',
-                        '[attr.data-variant]': 'variant ?? null',
-                        '[attr.data-size]': 'size ?? null',
-                        '[attr.data-color]': 'color ?? null',
-                    },
-                }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-/**
- * RequiredTag brukes sammen med labels i skjema for å indikere om et felt er
- * påkrevd, valgfritt, eller om alle felt må fylles ut.
- *
- * Komponenten wrapper `HviTag` med forhåndsdefinerte tekster og farger basert på mode.
- *
- * @example
- * ```html
- * <hvi-required-tag />
- * <hvi-required-tag mode="optional" />
- * <hvi-required-tag mode="all-required" />
- * ```
- */
-class HviRequiredTag {
-    /**
-     * Bestemmer tekst og farge på taggen.
-     * - `required` (default): "Må fylles ut" (warning)
-     * - `optional`: "Valgfritt" (info)
-     * - `all-required`: "Alle felt må fylles ut" (warning)
-     */
-    mode = 'required';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviRequiredTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HviRequiredTag, isStandalone: true, selector: "hvi-required-tag", inputs: { mode: "mode" }, ngImport: i0, template: `
-    <hvi-tag variant="default" size="sm" [color]="mode === 'optional' ? 'info' : 'warning'">
-      @switch (mode) {
-        @case ('all-required') {
-          Alle felt må fylles ut
-        }
-        @case ('required') {
-          Må fylles ut
-        }
-        @case ('optional') {
-          Valgfritt
-        }
-      }
-    </hvi-tag>
-  `, isInline: true, dependencies: [{ kind: "component", type: HviTag, selector: "hvi-tag", inputs: ["variant", "size", "color"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviRequiredTag, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'hvi-required-tag',
-                    standalone: true,
-                    imports: [HviTag],
-                    template: `
-    <hvi-tag variant="default" size="sm" [color]="mode === 'optional' ? 'info' : 'warning'">
-      @switch (mode) {
-        @case ('all-required') {
-          Alle felt må fylles ut
-        }
-        @case ('required') {
-          Må fylles ut
-        }
-        @case ('optional') {
-          Valgfritt
-        }
-      }
-    </hvi-tag>
-  `,
-                }]
-        }], propDecorators: { mode: [{
-                type: Input
+            }], onToggle: [{
+                type: HostListener,
+                args: ['toggle', ['$event']]
             }] } });
 
 /**
@@ -3847,10 +3427,10 @@ class HviSearchClear {
             input.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSearchClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviSearchClear, isStandalone: true, selector: "button[hviSearchClear]", host: { attributes: { "type": "reset" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-icon": "\"true\"", "attr.data-variant": "\"tertiary\"" }, classAttribute: "ds-button" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSearchClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviSearchClear, isStandalone: true, selector: "button[hviSearchClear]", host: { attributes: { "type": "reset" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-icon": "\"true\"", "attr.data-variant": "\"tertiary\"" }, classAttribute: "ds-button" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSearchClear, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSearchClear, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hviSearchClear]',
@@ -3913,10 +3493,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * @see {@link https://designsystemet.no/no/components/search}
  */
 class HviSearch {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviSearch, isStandalone: true, selector: "hvi-search", host: { classAttribute: "ds-search" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviSearch, isStandalone: true, selector: "hvi-search", host: { classAttribute: "ds-search" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSearch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSearch, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-search',
@@ -3982,10 +3562,10 @@ class HviSelect {
             event.stopImmediatePropagation();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.1", type: HviSelect, isStandalone: true, selector: "select[hviSelect]", inputs: { width: "width", disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)", "change": "onChange($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-width": "width", "attr.readonly": "_readOnly ? \"\" : null", "attr.disabled": "_disabled ? \"\" : null" }, classAttribute: "ds-select ds-input" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: HviSelect, isStandalone: true, selector: "select[hviSelect]", inputs: { width: "width", disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)", "change": "onChange($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-width": "width", "attr.readonly": "_readOnly ? \"\" : null", "attr.disabled": "_disabled ? \"\" : null" }, classAttribute: "ds-select ds-input" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSelect, decorators: [{
             type: Directive,
             args: [{
                     selector: 'select[hviSelect]',
@@ -4031,10 +3611,10 @@ class HviSkeleton {
     variant = 'rectangle';
     width;
     height;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviSkeleton, isStandalone: true, selector: "hvi-skeleton", inputs: { variant: "variant", width: "width", height: "height" }, host: { properties: { "attr.aria-hidden": "true", "attr.data-variant": "variant", "style.width": "width", "style.height": "height" }, classAttribute: "ds-skeleton" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviSkeleton, isStandalone: true, selector: "hvi-skeleton", inputs: { variant: "variant", width: "width", height: "height" }, host: { properties: { "attr.aria-hidden": "true", "attr.data-variant": "variant", "style.width": "width", "style.height": "height" }, classAttribute: "ds-skeleton" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSkeleton, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-skeleton',
@@ -4090,10 +3670,10 @@ class HviSkipLink {
             target.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSkipLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviSkipLink, isStandalone: true, selector: "a[hviSkipLink]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "ds-skip-link" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSkipLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviSkipLink, isStandalone: true, selector: "a[hviSkipLink]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "ds-skip-link" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSkipLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSkipLink, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[hviSkipLink]',
@@ -4125,8 +3705,8 @@ class HviSpinner {
     label;
     /** Size of the spinner */
     size;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviSpinner, isStandalone: true, selector: "hvi-spinner", inputs: { label: "label", size: "size" }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviSpinner, isStandalone: true, selector: "hvi-spinner", inputs: { label: "label", size: "size" }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
     <svg
       [attr.aria-label]="label"
       class="ds-spinner"
@@ -4139,7 +3719,7 @@ class HviSpinner {
     </svg>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSpinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSpinner, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-spinner',
@@ -4242,22 +3822,22 @@ class HviTable {
     /** Event som emitteres med nåværende side (1-basert, for two-way binding) */
     currentPageChange = new EventEmitter();
     // Internal signals
-    _value = signal([], ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    _sortField = signal(null, ...(ngDevMode ? [{ debugName: "_sortField" }] : []));
-    _sortOrder = signal(0, ...(ngDevMode ? [{ debugName: "_sortOrder" }] : [])); // 0 = none, 1 = asc, -1 = desc
-    _globalFilter = signal(null, ...(ngDevMode ? [{ debugName: "_globalFilter" }] : []));
-    _rows = signal(10, ...(ngDevMode ? [{ debugName: "_rows" }] : []));
-    _first = signal(0, ...(ngDevMode ? [{ debugName: "_first" }] : []));
+    _value = signal([], ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _sortField = signal(null, ...(ngDevMode ? [{ debugName: "_sortField" }] : /* istanbul ignore next */ []));
+    _sortOrder = signal(0, ...(ngDevMode ? [{ debugName: "_sortOrder" }] : /* istanbul ignore next */ [])); // 0 = none, 1 = asc, -1 = desc
+    _globalFilter = signal(null, ...(ngDevMode ? [{ debugName: "_globalFilter" }] : /* istanbul ignore next */ []));
+    _rows = signal(10, ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
+    _first = signal(0, ...(ngDevMode ? [{ debugName: "_first" }] : /* istanbul ignore next */ []));
     /** Kun sortert data (uten søk) - for bakoverkompatibilitet */
     sortedValue = computed(() => {
         return this.applySorting(this._value());
-    }, ...(ngDevMode ? [{ debugName: "sortedValue" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "sortedValue" }] : /* istanbul ignore next */ []));
     /** Filtrert og sortert data - bruk denne i template */
     filteredValue = computed(() => {
         const data = this._value();
         const filtered = this.applyGlobalFilter(data);
         return this.applySorting(filtered);
-    }, ...(ngDevMode ? [{ debugName: "filteredValue" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filteredValue" }] : /* istanbul ignore next */ []));
     /** Paginert, filtrert og sortert data - bruk denne når paginator er aktivert */
     paginatedValue = computed(() => {
         const data = this.filteredValue();
@@ -4266,29 +3846,29 @@ class HviTable {
         const first = this._first();
         const rows = this._rows();
         return data.slice(first, first + rows);
-    }, ...(ngDevMode ? [{ debugName: "paginatedValue" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "paginatedValue" }] : /* istanbul ignore next */ []));
     /** Antall rader etter søk */
-    totalFilteredRecords = computed(() => this.filteredValue().length, ...(ngDevMode ? [{ debugName: "totalFilteredRecords" }] : []));
+    totalFilteredRecords = computed(() => this.filteredValue().length, ...(ngDevMode ? [{ debugName: "totalFilteredRecords" }] : /* istanbul ignore next */ []));
     /** Antall rader totalt (før søk) */
-    totalRecords = computed(() => this._value().length, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+    totalRecords = computed(() => this._value().length, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
     /** Totalt antall sider */
     pageCount = computed(() => {
         if (!this.paginator)
             return 1;
         return Math.max(1, Math.ceil(this.totalFilteredRecords() / this._rows()));
-    }, ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
     /** Nåværende side (1-basert) */
     currentPage = computed(() => {
         return Math.floor(this._first() / this._rows()) + 1;
-    }, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     /** Er vi på første side? */
-    isFirstPage = computed(() => this._first() === 0, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : []));
+    isFirstPage = computed(() => this._first() === 0, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : /* istanbul ignore next */ []));
     /** Er vi på siste side? */
     isLastPage = computed(() => {
         return this._first() + this._rows() >= this.totalFilteredRecords();
-    }, ...(ngDevMode ? [{ debugName: "isLastPage" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "isLastPage" }] : /* istanbul ignore next */ []));
     /** Nåværende sorteringsfelt */
-    currentSortField = computed(() => this._sortField(), ...(ngDevMode ? [{ debugName: "currentSortField" }] : []));
+    currentSortField = computed(() => this._sortField(), ...(ngDevMode ? [{ debugName: "currentSortField" }] : /* istanbul ignore next */ []));
     /** Nåværende sorteringsretning som SortDirection */
     currentSortDirection = computed(() => {
         const order = this._sortOrder();
@@ -4297,9 +3877,9 @@ class HviTable {
         if (order === -1)
             return 'descending';
         return 'none';
-    }, ...(ngDevMode ? [{ debugName: "currentSortDirection" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "currentSortDirection" }] : /* istanbul ignore next */ []));
     /** Nåværende søkeverdi */
-    currentGlobalFilter = computed(() => this._globalFilter(), ...(ngDevMode ? [{ debugName: "currentGlobalFilter" }] : []));
+    currentGlobalFilter = computed(() => this._globalFilter(), ...(ngDevMode ? [{ debugName: "currentGlobalFilter" }] : /* istanbul ignore next */ []));
     /**
      * Global søk - søker på tvers av alle felt i globalFilterFields.
      * @param value Søkeverdi
@@ -4480,10 +4060,10 @@ class HviTable {
         }
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.1", type: HviTable, isStandalone: true, selector: "[hviTable]", inputs: { zebra: ["zebra", "zebra", booleanAttribute], border: ["border", "border", booleanAttribute], hover: ["hover", "hover", booleanAttribute], stickyHeader: ["stickyHeader", "stickyHeader", booleanAttribute], value: "value", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], first: ["first", "first", numberAttribute] }, outputs: { sortChange: "sortChange", pageChange: "pageChange", currentPageChange: "currentPageChange" }, host: { properties: { "attr.data-zebra": "zebra || null", "attr.data-border": "border || null", "attr.data-hover": "hover || null", "attr.data-sticky-header": "stickyHeader || null" }, classAttribute: "ds-table" }, exportAs: ["hviTable"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: HviTable, isStandalone: true, selector: "[hviTable]", inputs: { zebra: ["zebra", "zebra", booleanAttribute], border: ["border", "border", booleanAttribute], hover: ["hover", "hover", booleanAttribute], stickyHeader: ["stickyHeader", "stickyHeader", booleanAttribute], value: "value", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], first: ["first", "first", numberAttribute] }, outputs: { sortChange: "sortChange", pageChange: "pageChange", currentPageChange: "currentPageChange" }, host: { properties: { "attr.data-zebra": "zebra || null", "attr.data-border": "border || null", "attr.data-hover": "hover || null", "attr.data-sticky-header": "stickyHeader || null" }, classAttribute: "ds-table" }, exportAs: ["hviTable"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTable, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviTable]',
@@ -4583,10 +4163,10 @@ class HviSortableColumn {
             this.table?.sort(this.field);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSortableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviSortableColumn, isStandalone: true, selector: "th[hviSortableColumn]", inputs: { field: ["hviSortableColumn", "field"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-sort": "sortDirection" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSortableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviSortableColumn, isStandalone: true, selector: "th[hviSortableColumn]", inputs: { field: ["hviSortableColumn", "field"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-sort": "sortDirection" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviSortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: 'th[hviSortableColumn]',
@@ -4617,14 +4197,14 @@ class HviTabPanel {
     templateRef;
     /** When this value is selected, render this TabPanel. Must match the value of a Tab. */
     value;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviTabPanel, isStandalone: true, selector: "hvi-tab-panel", inputs: { value: "value" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviTabPanel, isStandalone: true, selector: "hvi-tab-panel", inputs: { value: "value" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template #content>
       <ng-content />
     </ng-template>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTabPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-tab-panel',
@@ -4655,14 +4235,14 @@ class HviTab {
     templateRef;
     /** Unique value that will be set in the Tabs components state when the tab is activated */
     value;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviTab, isStandalone: true, selector: "hvi-tab", inputs: { value: "value" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviTab, isStandalone: true, selector: "hvi-tab", inputs: { value: "value" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template #content>
       <ng-content />
     </ng-template>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-tab',
@@ -4736,8 +4316,8 @@ class HviTabs {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HviTabs, isStandalone: true, selector: "hvi-tabs", inputs: { value: "value", defaultValue: "defaultValue" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "tabs", predicate: HviTab }, { propertyName: "panels", predicate: HviTabPanel }], viewQueries: [{ propertyName: "uTabsRef", first: true, predicate: ["uTabsRef"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: HviTabs, isStandalone: true, selector: "hvi-tabs", inputs: { value: "value", defaultValue: "defaultValue" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "tabs", predicate: HviTab }, { propertyName: "panels", predicate: HviTabPanel }], viewQueries: [{ propertyName: "uTabsRef", first: true, predicate: ["uTabsRef"], descendants: true }], ngImport: i0, template: `
     <u-tabs #uTabsRef class="ds-tabs">
       <u-tablist>
         @for (tab of tabs; track tab.value) {
@@ -4758,7 +4338,7 @@ class HviTabs {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTabs, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-tabs',
@@ -4842,12 +4422,46 @@ class HviTextfield {
     /** Character counter limit. Displays a counter below the field. */
     counterLimit;
     /**
-     * Label text shown in a warning Tag next to the label when the field is required.
-     * E.g. "Må fylles ut". Also sets the `required` attribute on the input.
+     * Manuell overstyring av required-tag-mode.
+     * Når satt, vises taggen uavhengig av HviForm-kontekst.
+     * - `'required'`: "Må fylles ut" (warning)
+     * - `'optional'`: "Valgfritt" (info)
+     *
+     * Når IKKE satt og feltet er inne i en `<form hviForm>`, bestemmes mode automatisk:
+     * - Form er `'all-required'` → ingen tag per felt (vis `all-required` øverst i form)
+     * - Form er `'mixed'` → `'required'` hvis feltet er required, `'optional'` hvis ikke
+     * - Form er `'none'` → ingen tag
      */
-    requiredLabel;
+    requiredMode;
     /** Autocomplete attribute for the input, e.g. 'given-name', 'email'. */
     autocomplete;
+    /** Injisert HviForm for automatisk required-tag-beregning */
+    hviForm = inject(HviForm, { optional: true });
+    /**
+     * Beregnet required-tag-mode basert på manuell overstyring eller HviForm-kontekst.
+     * Returnerer `null` hvis ingen tag skal vises.
+     */
+    get effectiveRequiredMode() {
+        // Manuell overstyring vinner alltid
+        if (this.requiredMode)
+            return this.requiredMode;
+        // Uten HviForm-kontekst eller med tags skrudd av: ingen automatikk
+        const form = this.hviForm;
+        if (!form || !form.showRequiredTags)
+            return null;
+        const formMode = form.requiredMode();
+        switch (formMode) {
+            case 'all-required':
+                // Alle er required – vis ingen tag per felt (all-required vises øverst i form)
+                return null;
+            case 'mixed':
+                // Blanding – vis required eller optional basert på feltets required-state
+                return this._required ? 'required' : 'optional';
+            case 'none':
+            default:
+                return null;
+        }
+    }
     /** Render a textarea instead of input for multiline support */
     multiline = false;
     /** Supported input types */
@@ -4905,8 +4519,8 @@ class HviTextfield {
     setDisabledState(isDisabled) {
         this._disabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTextfield, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HviTextfield, isStandalone: true, selector: "hvi-textfield", inputs: { label: "label", description: "description", prefix: "prefix", suffix: "suffix", error: "error", counterLimit: "counterLimit", requiredLabel: "requiredLabel", autocomplete: "autocomplete", multiline: ["multiline", "multiline", booleanAttribute], type: "type", rows: "rows", size: "size", placeholder: "placeholder", name: "name", id: "id", maxLength: "maxLength", value: "value", required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute] }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTextfield, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: HviTextfield, isStandalone: true, selector: "hvi-textfield", inputs: { label: "label", description: "description", prefix: "prefix", suffix: "suffix", error: "error", counterLimit: "counterLimit", requiredMode: "requiredMode", autocomplete: "autocomplete", multiline: ["multiline", "multiline", booleanAttribute], type: "type", rows: "rows", size: "size", placeholder: "placeholder", name: "name", id: "id", maxLength: "maxLength", value: "value", required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute] }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => HviTextfield),
@@ -4916,13 +4530,8 @@ class HviTextfield {
     <hvi-field>
       <label hviLabel [attr.for]="inputId" weight="medium">
         {{ label }}
-        @if (requiredLabel) {
-          <hvi-tag
-            variant="default"
-            color="warning"
-            style="margin-inline-start: var(--ds-size-2)"
-            >{{ requiredLabel }}</hvi-tag
-          >
+        @if (effectiveRequiredMode; as mode) {
+          <hvi-required-tag [mode]="mode" />
         }
       </label>
       @if (description) {
@@ -4979,14 +4588,11 @@ class HviTextfield {
         <span hviFieldValidation>{{ error }}</span>
       }
     </hvi-field>
-  `, isInline: true, dependencies: [{ kind: "component", type: HviField, selector: "hvi-field", inputs: ["position"] }, { kind: "directive", type: HviLabel, selector: "label[hviLabel], legend[hviLabel]", inputs: ["weight"] }, { kind: "directive", type: HviInput, selector: "input[hviInput], textarea[hviInput]", inputs: ["type", "size", "role", "disabled", "readOnly", "readonly"] }, { kind: "component", type: HviFieldAffixes, selector: "hvi-field-affixes" }, { kind: "component", type: HviFieldAffix, selector: "hvi-field-affix" }, { kind: "component", type: HviFieldCounter, selector: "hvi-field-counter", inputs: ["count", "limit", "over", "under", "hint"] }, { kind: "directive", type: HviFieldDescription, selector: "[hviFieldDescription]" }, { kind: "directive", type: HviFieldValidation, selector: "[hviFieldValidation]" }, { kind: "component", type: HviTag, selector: "hvi-tag", inputs: ["variant", "size", "color"] }] });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: HviField, selector: "hvi-field", inputs: ["position"] }, { kind: "directive", type: HviLabel, selector: "label[hviLabel], legend[hviLabel]", inputs: ["weight"] }, { kind: "directive", type: HviInput, selector: "input[hviInput], textarea[hviInput]", inputs: ["type", "size", "role", "disabled", "readOnly", "readonly"] }, { kind: "component", type: HviFieldAffixes, selector: "hvi-field-affixes" }, { kind: "component", type: HviFieldAffix, selector: "hvi-field-affix" }, { kind: "component", type: HviFieldCounter, selector: "hvi-field-counter", inputs: ["limit", "over", "under"] }, { kind: "directive", type: HviFieldDescription, selector: "[hviFieldDescription]" }, { kind: "directive", type: HviFieldValidation, selector: "[hviFieldValidation]" }, { kind: "component", type: HviRequiredTag, selector: "hvi-required-tag", inputs: ["mode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTextfield, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTextfield, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'hvi-textfield',
-                    standalone: true,
-                    imports: [
+            args: [{ selector: 'hvi-textfield', standalone: true, imports: [
                         HviField,
                         HviLabel,
                         HviInput,
@@ -4995,26 +4601,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         HviFieldCounter,
                         HviFieldDescription,
                         HviFieldValidation,
-                        HviTag,
-                    ],
-                    providers: [
+                        HviRequiredTag,
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => HviTextfield),
                             multi: true,
                         },
-                    ],
-                    template: `
+                    ], template: `
     <hvi-field>
       <label hviLabel [attr.for]="inputId" weight="medium">
         {{ label }}
-        @if (requiredLabel) {
-          <hvi-tag
-            variant="default"
-            color="warning"
-            style="margin-inline-start: var(--ds-size-2)"
-            >{{ requiredLabel }}</hvi-tag
-          >
+        @if (effectiveRequiredMode; as mode) {
+          <hvi-required-tag [mode]="mode" />
         }
       </label>
       @if (description) {
@@ -5071,8 +4670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         <span hviFieldValidation>{{ error }}</span>
       }
     </hvi-field>
-  `,
-                }]
+  `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], description: [{
@@ -5085,7 +4683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Input
             }], counterLimit: [{
                 type: Input
-            }], requiredLabel: [{
+            }], requiredMode: [{
                 type: Input
             }], autocomplete: [{
                 type: Input
@@ -5149,11 +4747,11 @@ class HviToggleGroup {
     items;
     registeredItems = [];
     /** The variant of the toggle group */
-    _variant = signal('primary', ...(ngDevMode ? [{ debugName: "_variant" }] : []));
+    _variant = signal('primary', ...(ngDevMode ? [{ debugName: "_variant" }] : /* istanbul ignore next */ []));
     /** Form element name */
-    _name = signal(`togglegroup-name-${++nextGroupId}`, ...(ngDevMode ? [{ debugName: "_name" }] : []));
+    _name = signal(`togglegroup-name-${++nextGroupId}`, ...(ngDevMode ? [{ debugName: "_name" }] : /* istanbul ignore next */ []));
     /** The currently selected value */
-    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     /** Event emitted when value changes */
     valueChange = new EventEmitter();
     // ControlValueAccessor callbacks
@@ -5245,8 +4843,8 @@ class HviToggleGroup {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: HviToggleGroup, isStandalone: true, selector: "hvi-toggle-group", inputs: { value: "value", variant: "variant", name: "name" }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.data-variant": "_variant()", "tabindex": "0" }, classAttribute: "ds-toggle-group" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviToggleGroup, isStandalone: true, selector: "hvi-toggle-group", inputs: { value: "value", variant: "variant", name: "name" }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.data-variant": "_variant()", "tabindex": "0" }, classAttribute: "ds-toggle-group" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => HviToggleGroup),
@@ -5254,7 +4852,7 @@ class HviToggleGroup {
             },
         ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => HviToggleGroupItemToken) }], ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviToggleGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviToggleGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'hvi-toggle-group',
@@ -5314,13 +4912,13 @@ class HviToggleGroupItem {
     /** Toggle icon-only styling */
     icon = false;
     /** Internal signal for tracking selection state */
-    _isSelected = signal(false, ...(ngDevMode ? [{ debugName: "_isSelected" }] : []));
+    _isSelected = signal(false, ...(ngDevMode ? [{ debugName: "_isSelected" }] : /* istanbul ignore next */ []));
     /** Whether this item is currently selected */
     isSelected = this._isSelected.asReadonly();
     /** Computed variant based on selection state */
     computedVariant = computed(() => {
         return this._isSelected() ? this.group._variant() : 'tertiary';
-    }, ...(ngDevMode ? [{ debugName: "computedVariant" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "computedVariant" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.group.registerItem(this);
     }
@@ -5341,10 +4939,10 @@ class HviToggleGroupItem {
     onKeydown(event) {
         this.group.handleKeydown(event, this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviToggleGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.1", type: HviToggleGroupItem, isStandalone: true, selector: "button[hviToggleGroupItem]", inputs: { value: "value", icon: ["icon", "icon", booleanAttribute] }, host: { attributes: { "type": "button", "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "id": "id", "attr.value": "value", "attr.name": "group._name()", "attr.aria-checked": "isSelected()", "attr.aria-current": "isSelected()", "attr.data-variant": "computedVariant()", "attr.data-icon": "icon ? \"\" : null", "attr.data-roving-tabindex-item": "\"true\"", "tabindex": "isSelected() ? 0 : -1" }, classAttribute: "ds-button" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviToggleGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: HviToggleGroupItem, isStandalone: true, selector: "button[hviToggleGroupItem]", inputs: { value: "value", icon: ["icon", "icon", booleanAttribute] }, host: { attributes: { "type": "button", "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "id": "id", "attr.value": "value", "attr.name": "group._name()", "attr.aria-checked": "isSelected()", "attr.aria-current": "isSelected()", "attr.data-variant": "computedVariant()", "attr.data-icon": "icon ? \"\" : null", "attr.data-roving-tabindex-item": "\"true\"", "tabindex": "isSelected() ? 0 : -1" }, classAttribute: "ds-button" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviToggleGroupItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviToggleGroupItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hviToggleGroupItem]',
@@ -5374,41 +4972,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 args: [{ transform: booleanAttribute }]
             }] } });
 
-/** Plugin for positioning the tooltip arrow pseudo-element */
-const tooltipArrowPlugin = {
-    name: 'TooltipArrowPlugin',
-    fn(data) {
-        const { elements, rects, placement } = data;
-        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
-        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
-        if (rects.reference.width > rects.floating.width) {
-            arrowX = `${Math.round(rects.floating.width / 2)}px`;
-        }
-        if (rects.reference.height > rects.floating.height) {
-            arrowY = `${Math.round(rects.floating.height / 2)}px`;
-        }
-        const basePlacement = placement.split('-')[0];
-        switch (basePlacement) {
-            case 'top':
-                arrowY = '100%';
-                break;
-            case 'right':
-                arrowX = '0';
-                break;
-            case 'bottom':
-                arrowY = '0';
-                break;
-            case 'left':
-                arrowX = '100%';
-                break;
-        }
-        elements.floating.setAttribute('data-placement', basePlacement);
-        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
-        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
-        return data;
-    },
-};
-let tooltipIdCounter = 0;
 /**
  * @summary
  * Tooltip viser kort informasjon når brukeren holder musepekeren over
@@ -5424,212 +4987,25 @@ let tooltipIdCounter = 0;
  * @see {@link https://designsystemet.no/en/components/docs/tooltip/code}
  */
 class HviTooltip {
-    el = inject((ElementRef));
-    renderer = inject(Renderer2);
-    tooltipElement = null;
-    tooltipId = `hvi-tooltip-${++tooltipIdCounter}`;
-    cleanupAutoUpdate;
-    showTimeout;
-    hideTimeout;
-    isOpen = false;
-    // Event listener cleanup functions
-    listeners = [];
     /** Tooltip content */
     hviTooltip = '';
     /** Placement of the tooltip relative to the trigger */
     tooltipPlacement = 'top';
     /** Enable auto placement when there's not enough space */
     tooltipAutoPlacement = true;
-    /**
-     * Override ARIA attribute type.
-     * - 'describedby': tooltip describes the element (default for elements with text)
-     * - 'labelledby': tooltip labels the element (default for icon-only buttons)
-     */
-    tooltipType;
-    /** Delay before showing tooltip (ms) */
-    tooltipShowDelay = 150;
-    /** Delay before hiding tooltip (ms) */
-    tooltipHideDelay = 0;
-    get hostElement() {
-        return this.el.nativeElement;
-    }
-    ngOnInit() {
-        this.createTooltipElement();
-        this.setupTriggerAttributes();
-        this.setupEventListeners();
-    }
-    ngOnDestroy() {
-        this.cleanup();
-    }
-    createTooltipElement() {
-        this.tooltipElement = this.renderer.createElement('span');
-        if (!this.tooltipElement)
-            return;
-        this.renderer.setAttribute(this.tooltipElement, 'id', this.tooltipId);
-        this.renderer.setAttribute(this.tooltipElement, 'role', 'tooltip');
-        this.renderer.setAttribute(this.tooltipElement, 'popover', 'manual');
-        this.renderer.addClass(this.tooltipElement, 'ds-tooltip');
-        this.renderer.setStyle(this.tooltipElement, 'opacity', '0');
-        // Set initial content
-        this.tooltipElement.textContent = this.hviTooltip;
-        // Append to body to avoid overflow issues
-        this.renderer.appendChild(document.body, this.tooltipElement);
-    }
-    setupTriggerAttributes() {
-        const host = this.hostElement;
-        // Set popovertarget attributes
-        this.renderer.setAttribute(host, 'popovertarget', this.tooltipId);
-        this.renderer.setAttribute(host, 'popovertargetaction', 'show');
-        // Determine ARIA attribute type
-        const ariaType = this.tooltipType ?? this.detectAriaType();
-        if (ariaType === 'labelledby') {
-            this.renderer.setAttribute(host, 'aria-labelledby', this.tooltipId);
-        }
-        else {
-            this.renderer.setAttribute(host, 'aria-describedby', this.tooltipId);
-        }
-    }
-    detectAriaType() {
-        const host = this.hostElement;
-        const hasText = host.textContent?.trim();
-        const hasAriaLabel = host.hasAttribute('aria-label');
-        // If element has no visible text and no aria-label, use labelledby
-        if (!hasText && !hasAriaLabel) {
-            return 'labelledby';
-        }
-        return 'describedby';
-    }
-    setupEventListeners() {
-        const host = this.hostElement;
-        // Mouse events
-        this.listeners.push(this.renderer.listen(host, 'mouseenter', () => this.scheduleShow()), this.renderer.listen(host, 'mouseleave', () => this.scheduleHide()), 
-        // Focus events
-        this.renderer.listen(host, 'focusin', () => this.scheduleShow()), this.renderer.listen(host, 'focusout', () => this.scheduleHide()), 
-        // Keyboard events
-        this.renderer.listen(host, 'keydown', (event) => {
-            if (event.key === 'Escape' && this.isOpen) {
-                this.hide();
-            }
-        }));
-        // Global escape handler
-        this.listeners.push(this.renderer.listen('document', 'keydown', (event) => {
-            if (event.key === 'Escape' && this.isOpen) {
-                this.hide();
-            }
-        }));
-    }
-    scheduleShow() {
-        this.clearTimeouts();
-        if (this.tooltipShowDelay > 0) {
-            this.showTimeout = setTimeout(() => this.show(), this.tooltipShowDelay);
-        }
-        else {
-            this.show();
-        }
-    }
-    scheduleHide() {
-        this.clearTimeouts();
-        if (this.tooltipHideDelay > 0) {
-            this.hideTimeout = setTimeout(() => this.hide(), this.tooltipHideDelay);
-        }
-        else {
-            this.hide();
-        }
-    }
-    clearTimeouts() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = undefined;
-        }
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = undefined;
-        }
-    }
-    show() {
-        if (!this.tooltipElement || this.isOpen)
-            return;
-        // Update content in case it changed
-        this.tooltipElement.textContent = this.hviTooltip;
-        // Show the popover
-        this.tooltipElement.showPopover?.();
-        this.isOpen = true;
-        // Position and show
-        this.updatePosition();
-        this.startAutoUpdate();
-        // Fade in
-        requestAnimationFrame(() => {
-            if (this.tooltipElement) {
-                this.renderer.setStyle(this.tooltipElement, 'opacity', '1');
-            }
-        });
-    }
-    hide() {
-        if (!this.tooltipElement || !this.isOpen)
-            return;
-        // Fade out
-        this.renderer.setStyle(this.tooltipElement, 'opacity', '0');
-        // Hide after transition
-        setTimeout(() => {
-            this.tooltipElement?.hidePopover?.();
-            this.isOpen = false;
-            this.stopAutoUpdate();
-        }, 150); // Match CSS transition duration
-    }
-    updatePosition() {
-        const trigger = this.hostElement;
-        const tooltip = this.tooltipElement;
-        if (!trigger || !tooltip)
-            return;
-        computePosition(trigger, tooltip, {
-            placement: this.tooltipPlacement,
-            strategy: 'fixed',
-            middleware: [
-                offset(8), // Arrow size + small gap
-                ...(this.tooltipAutoPlacement ? [flip(), shift({ padding: 8 })] : []),
-                tooltipArrowPlugin,
-            ],
-        }).then(({ x, y }) => {
-            if (this.tooltipElement) {
-                this.renderer.setStyle(this.tooltipElement, 'translate', `${x}px ${y}px`);
-            }
-        });
-    }
-    startAutoUpdate() {
-        this.stopAutoUpdate();
-        const trigger = this.hostElement;
-        const tooltip = this.tooltipElement;
-        if (!trigger || !tooltip)
-            return;
-        this.cleanupAutoUpdate = autoUpdate(trigger, tooltip, () => this.updatePosition());
-    }
-    stopAutoUpdate() {
-        if (this.cleanupAutoUpdate) {
-            this.cleanupAutoUpdate();
-            this.cleanupAutoUpdate = undefined;
-        }
-    }
-    cleanup() {
-        this.clearTimeouts();
-        this.stopAutoUpdate();
-        // Remove event listeners
-        this.listeners.forEach((unlisten) => unlisten());
-        this.listeners = [];
-        // Remove tooltip element
-        if (this.tooltipElement) {
-            this.tooltipElement.hidePopover?.();
-            this.tooltipElement.remove();
-            this.tooltipElement = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HviTooltip, isStandalone: true, selector: "[hviTooltip]", inputs: { hviTooltip: "hviTooltip", tooltipPlacement: "tooltipPlacement", tooltipAutoPlacement: "tooltipAutoPlacement", tooltipType: "tooltipType", tooltipShowDelay: "tooltipShowDelay", tooltipHideDelay: "tooltipHideDelay" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: HviTooltip, isStandalone: true, selector: "[hviTooltip]", inputs: { hviTooltip: "hviTooltip", tooltipPlacement: "tooltipPlacement", tooltipAutoPlacement: "tooltipAutoPlacement" }, host: { properties: { "attr.data-tooltip": "hviTooltip", "attr.data-placement": "tooltipPlacement", "attr.data-autoplacement": "tooltipAutoPlacement ? \"true\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HviTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hviTooltip]',
                     standalone: true,
+                    host: {
+                        '[attr.data-tooltip]': 'hviTooltip',
+                        '[attr.data-placement]': 'tooltipPlacement',
+                        '[attr.data-autoplacement]': 'tooltipAutoPlacement ? "true" : null',
+                    },
                 }]
         }], propDecorators: { hviTooltip: [{
                 type: Input,
@@ -5638,12 +5014,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Input
             }], tooltipAutoPlacement: [{
                 type: Input
-            }], tooltipType: [{
-                type: Input
-            }], tooltipShowDelay: [{
-                type: Input
-            }], tooltipHideDelay: [{
-                type: Input
             }] } });
 
 /*
@@ -5654,5 +5024,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HviAlert, HviAvatar, HviAvatarStack, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviDropdown, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldCounter, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviList, HviLogo, HviPagination, HviParagraph, HviPopover, HviRequiredTag, HviSearch, HviSearchClear, HviSelect, HviSkeleton, HviSkipLink, HviSortableColumn, HviSpinner, HviTab, HviTabPanel, HviTable, HviTabs, HviTag, HviTextfield, HviToggleGroup, HviToggleGroupItem, HviToggleGroupItemToken, HviTooltip, HviValidationKit, HviValidationMessage, LOGOS, buildLogo, fieldObserver, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators, isElement, isInputLike, isLabel };
+export { HviAlert, HviAvatar, HviAvatarStack, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviDropdown, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldCounter, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviInput, HviLabel, HviLink, HviList, HviLogo, HviPagination, HviParagraph, HviPopover, HviRequiredTag, HviSearch, HviSearchClear, HviSelect, HviSkeleton, HviSkipLink, HviSortableColumn, HviSpinner, HviTab, HviTabPanel, HviTable, HviTabs, HviTag, HviTextfield, HviToggleGroup, HviToggleGroupItem, HviToggleGroupItemToken, HviTooltip, HviValidationKit, HviValidationMessage, LOGOS, analyzeFormRequired, buildLogo, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators };
 //# sourceMappingURL=helsevestikt-hviktor-angular.mjs.map