@oslokommune/punkt-elements 16.9.1 → 16.11.0

package/CHANGELOG.md

@@ -5,6 +5,41 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.11.0](https://github.com/oslokommune/punkt/compare/16.10.0...16.11.0) (2026-04-29)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [16.10.0](https://github.com/oslokommune/punkt/compare/16.9.1...16.10.0) (2026-04-22)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Legger til støtte for "fit-content" som størrelse på modal (#3433). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.9.1](https://github.com/oslokommune/punkt/compare/16.9.0...16.9.1) (2026-04-22)
 
 ### ⚠ BREAKING CHANGES

package/dist/components/modal/modal.d.ts

@@ -2,6 +2,7 @@ import { PropertyValues } from 'lit';
 import { PktElementWithSlot } from '../../base-elements/element-with-slot';
 import { Ref } from 'lit/directives/ref.js';
 import { TPktSize } from '../../types/size';
+type ModalSize = TPktSize | 'fit-content';
 export interface IPktModal {
     open?: boolean;
     headingText?: string;
@@ -9,7 +10,7 @@ export interface IPktModal {
     hideCloseButton?: boolean;
     closeOnBackdropClick?: boolean;
     closeButtonSkin?: 'blue' | 'yellow-filled';
-    size?: TPktSize;
+    size?: ModalSize;
     variant?: 'dialog' | 'drawer';
     drawerPosition?: 'left' | 'right';
     transparentBackdrop?: boolean;
@@ -21,7 +22,7 @@ export declare class PktModal extends PktElementWithSlot implements IPktModal {
     hideCloseButton?: boolean;
     closeOnBackdropClick?: boolean;
     closeButtonSkin?: 'blue' | 'yellow-filled';
-    size?: TPktSize;
+    size?: ModalSize;
     variant?: 'dialog' | 'drawer';
     drawerPosition?: 'left' | 'right';
     transparentBackdrop?: boolean;
@@ -39,3 +40,4 @@ export declare class PktModal extends PktElementWithSlot implements IPktModal {
     showModal: (event?: Event | null) => void;
     render(): import('lit-html').TemplateResult<1>;
 }
+export {};

package/dist/components/tabs/tabs.d.ts

@@ -3,16 +3,21 @@ import { PropertyValues } from 'lit';
 export interface IPktTabs {
     arrowNav?: boolean;
     disableArrowNav?: boolean;
+    separatorIconName?: string;
+    separatorIconPath?: string;
 }
 export declare class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
     arrowNav: boolean;
     disableArrowNav: boolean;
+    separatorIconName: string;
+    separatorIconPath: string;
     private tabRefs;
     private disabledMap;
     private tabCount;
     private get useArrowNav();
     private context;
     updated(changedProperties: PropertyValues): void;
+    private syncSeparators;
     private registerTab;
     private isTabDisabled;
     private findEnabledIndex;

package/dist/docs/components/tabs.d.ts

@@ -8,20 +8,24 @@ export declare class Tabs extends PktElement {
     private activeTab5;
     private activeTab6;
     private activeTab7;
+    private activeStepperTab;
+    private stepperTitles;
+    private stepperCompleted;
+    private stepperUnlocked;
+    private stepperSeparatorIconName;
+    private stepperRenderKey;
     private activeTabTest;
     private tabTitles;
     private disabledTabs;
     private skins;
     private tabNames;
     private content;
-    private handleTabSelected1;
-    private handleTabSelected2;
-    private handleTabSelected3;
-    private handleTabSelected4;
-    private handleTabSelected5;
-    private handleTabSelected6;
-    private handleTabSelected7;
+    private handleTabSelected;
     private handleTabTestSelected;
+    private handleStepperTabSelected;
+    private completeActiveStepperTab;
+    private resetStepperFlow;
+    private handleSeparatorIconNameChange;
     private updateTabTitle;
     private toggleDisabledTab;
     private addDynamicDisabledTab;

package/dist/modal-CBEWrAi2.cjs

@@ -0,0 +1,35 @@
+const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./ref-BaJ0mBT_.cjs`);var i={name:`pkt-modal`,react:`PktModal`,"css-class":`pkt-modal`,isElement:!0,isPureReact:!0,events:{"background-click":{description:`Event som trigges når bakgrunnen trykkes på`},close:{description:`Event som trigges når meldingsboksen lukkes`}},props:{open:{name:`Åpen`,description:`Deklarativ styring av modalens åpen/lukket-tilstand. Kan brukes i stedet for showModal()/close()-metodene.`,type:`boolean`,category:`tech`,default:!1},headingText:{name:`Heading text`,description:`Heading tekst på modalen`,type:`string`,category:`contents`},hideCloseButton:{name:`Gjem 'Lukk'-knapp`,description:`Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.`,type:`boolean`,category:`ui`,default:!1},closeOnBackdropClick:{name:`Lukk modalen når bakgrunnen trykkes på`,description:`Lukk modalen når bakgrunnen trykkes på`,type:`boolean`,category:`tech`,default:!1},closeButtonSkin:{name:`Stil på lukkeknappen`,description:`Stil på lukkeknappen`,type:[`blue`,`yellow-filled`],category:`ui`,default:`blue`},size:{name:`Størrelse`,description:`Størrelsen på modalen`,type:[`small`,`medium`,`large`,`fit-content`],category:`ui`,default:`medium`},variant:{name:`Variant`,description:`Standard dialog eller skuff`,type:[`dialog`,`drawer`],category:`ui`,default:`dialog`},drawerPosition:{name:`Skuffposisjon`,description:`Posisjonen til skuffen`,type:[`left`,`right`],category:`ui`,default:`right`},transparentBackdrop:{name:`Gjennomsiktig bakgrunn`,description:`Bakgrunnen er gjennomsiktig`,type:`boolean`,category:`ui`,default:!1},removePadding:{name:`Fjern padding`,description:`Fjerner paddingen rundt innholdet i modalen`,type:`boolean`,category:`ui`,default:!1}},slots:{default:{description:`Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen.`}}},a=class extends n.t{constructor(){super(),this.open=!1,this.headingText=``,this.removePadding=!1,this.hideCloseButton=i.props.hideCloseButton.default,this.closeOnBackdropClick=i.props.closeOnBackdropClick.default,this.closeButtonSkin=`blue`,this.size=i.props.size.default,this.variant=`dialog`,this.drawerPosition=`right`,this.transparentBackdrop=!1,this.dialogRef=r.t(),this._isOpen=!1,this.close=(e,t=!1)=>{if(!this._isOpen)return;this._isOpen=!1,this.open=!1,document.body.classList.remove(`pkt-modal--open`);let n=document.activeElement;n&&!this.isElementInViewport(n)&&n.scrollIntoView({behavior:`smooth`,block:`nearest`}),this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),t||this.dialogRef.value?.close(),this.requestUpdate()},this.showModal=(e=null)=>{this._isOpen=!0,this.open=!0,this.dialogRef.value?.showModal(),document.body.classList.add(`pkt-modal--open`),this.dispatchEvent(new CustomEvent(`showModal`,{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener(`keydown`,this.handleKeyDown.bind(this)),document.addEventListener(`click`,this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`click`,this.handleBackdropClick)}updated(e){super.updated(e),e.has(`open`)&&(this.open&&!this._isOpen?this.showModal():!this.open&&this._isOpen&&this.close(new Event(`close`),!1))}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&(`document`in window&&`createElement`in document&&(await Promise.resolve().then(()=>require(`./dialog-polyfill.esm-D3Oinvk0.cjs`)).then(e=>e.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener(`close`,()=>{this.close(new Event(`close`),!0)}))}handleKeyDown(e){e.key===`Escape`&&this.close(e)}handleBackdropClick(e){this.closeOnBackdropClick&&e.target===this.dialogRef?.value&&this.close(e)}isElementInViewport(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){let i={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===``||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin===`yellow-filled`,"pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant===`drawer`},a={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin===`blue`,c={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return e.d`
+      <dialog
+        class=${t.t(i)}
+        ${r.n(this.dialogRef)}
+        aria-labelledby=${this.headingText?`pkt-modal__headingText`:e.l}
+        aria-describedby="pkt-modal__content"
+        @close=${e=>this.close(e,!0)}
+      >
+        <div class="pkt-modal__wrapper">
+          ${this.headingText||!this.hideCloseButton?e.d`<div class="pkt-modal__header">
+                <div class="pkt-modal__header-background"></div>
+                ${this.headingText?e.d`<h1 id="pkt-modal__headingText" class=${t.t(a)}>
+                      ${this.headingText}
+                    </h1>`:e.d`<div class="pkt-modal__headingText"></div>`}
+                ${this.hideCloseButton?e.d`<div class="pkt-modal__noCloseButton"></div>`:e.d`<div class="${t.t(c)}">
+                      <pkt-button
+                        @click=${e=>this.close(e)}
+                        aria-label="close"
+                        iconname="close"
+                        variant="icon-only"
+                        size="medium"
+                        skin=${s?`tertiary`:`primary`}
+                      >
+                        Lukk
+                      </pkt-button>
+                    </div>`}
+              </div>`:e.l}
+          <div class="pkt-modal__container">
+            <div id="pkt-modal__content" class=${t.t(o)}>
+              ${n.n(this)}
+            </div>
+          </div>
+        </div>
+      </dialog>
+    `}};e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`open`,void 0),e.r([e.s({type:String})],a.prototype,`headingText`,void 0),e.r([e.s({type:Boolean})],a.prototype,`removePadding`,void 0),e.r([e.s({type:Boolean})],a.prototype,`hideCloseButton`,void 0),e.r([e.s({type:Boolean})],a.prototype,`closeOnBackdropClick`,void 0),e.r([e.s({type:String})],a.prototype,`closeButtonSkin`,void 0),e.r([e.s({type:String})],a.prototype,`size`,void 0),e.r([e.s({type:String})],a.prototype,`variant`,void 0),e.r([e.s({type:String})],a.prototype,`drawerPosition`,void 0),e.r([e.s({type:Boolean})],a.prototype,`transparentBackdrop`,void 0),e.r([e.o()],a.prototype,`_isOpen`,void 0);try{e.c(`pkt-modal`)(a)}catch{console.warn(`Forsøker å definere <pkt-modal>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});

package/dist/{modal-C_wtsh9m.js → modal-pPp8nia6.js}

@@ -54,7 +54,8 @@ var d = {
 			type: [
 				"small",
 				"medium",
-				"large"
+				"large",
+				"fit-content"
 			],
 			category: "ui",
 			default: "medium"
@@ -183,10 +184,9 @@ var d = {
                     </div>`}
               </div>` : n}
           <div class="pkt-modal__container">
-            <div
-              id="pkt-modal__content"
-              class=${o(i)}
-            >${s(this)}</div>
+            <div id="pkt-modal__content" class=${o(i)}>
+              ${s(this)}
+            </div>
           </div>
         </div>
       </dialog>

package/dist/pkt-index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./alert-BEEnTiCb.cjs`),t=require(`./icon-Dr8sfT2X.cjs`),n=require(`./button-D-TOBaJB.cjs`),r=require(`./accordion-BB1JrONI.cjs`),i=require(`./backlink-Ba03LlbB.cjs`),a=require(`./breadcrumbs-CD1zib3s.cjs`),o=require(`./calendar-E5jJLt8D.cjs`),s=require(`./card-CUFhMVim.cjs`),c=require(`./tag-DLthw5b4.cjs`),l=require(`./heading-BgSWIRii.cjs`),u=require(`./combobox-CGbFTWq_.cjs`),d=require(`./header-DWgPgGfS.cjs`),f=require(`./datepicker-DpmlsnH_.cjs`),p=require(`./helptext-D-3QfZv5.cjs`),m=require(`./input-wrapper-BRuVELpK.cjs`),h=require(`./consent-hwu7pp3S.cjs`),g=require(`./checkbox-BARDb9iV.cjs`),_=require(`./link-CyTCpI0k.cjs`),v=require(`./textinput-DFh8_9cx.cjs`),y=require(`./linkcard-BE4-FewK.cjs`),b=require(`./loader-CX2rsC01.cjs`),x=require(`./messagebox-Din9X53b.cjs`),S=require(`./modal-DS_wUOIv.cjs`),C=require(`./progressbar-CdXtmOBb.cjs`),w=require(`./radiobutton-GOnpUbCW.cjs`),T=require(`./tabs-COwm9b3n.cjs`),E=require(`./textarea-D7aGOyDf.cjs`),D=require(`./select-C2i8sOk5.cjs`),O=require(`./timepicker-BIfE7KKJ.cjs`);exports.PktAccordion=r.r,exports.PktAccordionItem=r.n,exports.PktAlert=e.n,exports.PktBackLink=i.n,exports.PktBreadcrumbs=a.t,exports.PktButton=n.n,exports.PktCalendar=o.n,exports.PktCard=s.n,exports.PktCheckbox=g.n,exports.PktCombobox=u.n,exports.PktConsent=h.n,exports.PktDateTags=f.a,exports.PktDatepicker=f.t,exports.PktHeader=d.t,exports.PktHeaderService=d.n,exports.PktHeaderUserMenu=d.r,exports.PktHeading=l.n,exports.PktHelptext=p.n,exports.PktIcon=t.n,exports.PktInputWrapper=m.n,exports.PktLink=_.n,exports.PktLinkCard=y.n,exports.PktLoader=b.n,exports.PktMessagebox=x.n,exports.PktModal=S.n,exports.PktProgressbar=C.n,exports.PktRadioButton=w.n,exports.PktRadiobutton=w.n,exports.PktSelect=D.n,exports.PktTabItem=T.n,exports.PktTabs=T.r,exports.PktTag=c.n,exports.PktTextarea=E.n,exports.PktTextinput=v.n,exports.PktTimepicker=O.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./alert-BEEnTiCb.cjs`),t=require(`./icon-Dr8sfT2X.cjs`),n=require(`./button-D-TOBaJB.cjs`),r=require(`./accordion-BB1JrONI.cjs`),i=require(`./backlink-Ba03LlbB.cjs`),a=require(`./breadcrumbs-CD1zib3s.cjs`),o=require(`./calendar-E5jJLt8D.cjs`),s=require(`./card-CUFhMVim.cjs`),c=require(`./tag-DLthw5b4.cjs`),l=require(`./heading-BgSWIRii.cjs`),u=require(`./combobox-CGbFTWq_.cjs`),d=require(`./header-DWgPgGfS.cjs`),f=require(`./datepicker-DpmlsnH_.cjs`),p=require(`./helptext-D-3QfZv5.cjs`),m=require(`./input-wrapper-BRuVELpK.cjs`),h=require(`./consent-hwu7pp3S.cjs`),g=require(`./checkbox-BARDb9iV.cjs`),_=require(`./link-CyTCpI0k.cjs`),v=require(`./textinput-DFh8_9cx.cjs`),y=require(`./linkcard-BE4-FewK.cjs`),b=require(`./loader-CX2rsC01.cjs`),x=require(`./messagebox-Din9X53b.cjs`),S=require(`./modal-CBEWrAi2.cjs`),C=require(`./progressbar-CdXtmOBb.cjs`),w=require(`./radiobutton-GOnpUbCW.cjs`),T=require(`./tabs-BfurI6C3.cjs`),E=require(`./textarea-D7aGOyDf.cjs`),D=require(`./select-C2i8sOk5.cjs`),O=require(`./timepicker-BIfE7KKJ.cjs`);exports.PktAccordion=r.r,exports.PktAccordionItem=r.n,exports.PktAlert=e.n,exports.PktBackLink=i.n,exports.PktBreadcrumbs=a.t,exports.PktButton=n.n,exports.PktCalendar=o.n,exports.PktCard=s.n,exports.PktCheckbox=g.n,exports.PktCombobox=u.n,exports.PktConsent=h.n,exports.PktDateTags=f.a,exports.PktDatepicker=f.t,exports.PktHeader=d.t,exports.PktHeaderService=d.n,exports.PktHeaderUserMenu=d.r,exports.PktHeading=l.n,exports.PktHelptext=p.n,exports.PktIcon=t.n,exports.PktInputWrapper=m.n,exports.PktLink=_.n,exports.PktLinkCard=y.n,exports.PktLoader=b.n,exports.PktMessagebox=x.n,exports.PktModal=S.n,exports.PktProgressbar=C.n,exports.PktRadioButton=w.n,exports.PktRadiobutton=w.n,exports.PktSelect=D.n,exports.PktTabItem=T.n,exports.PktTabs=T.r,exports.PktTag=c.n,exports.PktTextarea=E.n,exports.PktTextinput=v.n,exports.PktTimepicker=O.t;

package/dist/pkt-index.js

@@ -20,10 +20,10 @@ import { n as S } from "./textinput-BUgntXnM.js";
 import { n as C } from "./linkcard-B0KOGaGj.js";
 import { n as w } from "./loader-6kFZUErT.js";
 import { n as T } from "./messagebox-Cwlg5sOr.js";
-import { n as E } from "./modal-C_wtsh9m.js";
+import { n as E } from "./modal-pPp8nia6.js";
 import { n as D } from "./progressbar-Dy9AiYQz.js";
 import { n as O } from "./radiobutton-V_KPbup_.js";
-import { n as k, r as A } from "./tabs-C0DWPmn2.js";
+import { n as k, r as A } from "./tabs-Rc9N9HWa.js";
 import { n as j } from "./textarea-DYOBhJrN.js";
 import { n as M } from "./select-BSAFd8Wa.js";
 import { t as N } from "./timepicker-DaSwn1FA.js";

package/dist/pkt-modal.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./modal-DS_wUOIv.cjs`);exports.PktModal=e.n,exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./modal-CBEWrAi2.cjs`);exports.PktModal=e.n,exports.default=e.t;

package/dist/pkt-modal.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./modal-C_wtsh9m.js";
+import { n as e, t } from "./modal-pPp8nia6.js";
 export { e as PktModal, t as default };

package/dist/pkt-tabs.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./tabs-COwm9b3n.cjs`);exports.PktTabItem=e.n,exports.PktTabs=e.r,exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./tabs-BfurI6C3.cjs`);exports.PktTabItem=e.n,exports.PktTabs=e.r,exports.default=e.t;

package/dist/pkt-tabs.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./tabs-C0DWPmn2.js";
+import { n as e, r as t, t as n } from "./tabs-Rc9N9HWa.js";
 export { e as PktTabItem, t as PktTabs, n as default };

package/dist/{tabs-COwm9b3n.cjs → tabs-BfurI6C3.cjs}

@@ -1,9 +1,9 @@
-const e=require(`./element-DjtxO-1r.cjs`),t=require(`./element-with-slot-CWoTGA1B.cjs`),n=require(`./if-defined-XKOD_t_V.cjs`),r=require(`./ref-BaJ0mBT_.cjs`);var i=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};function a(e){return e}var o=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new i(this.context,this.host,this.t,this.subscribe))}},s=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},c=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},l=class extends s{constructor(e,t,n){super(t.context===void 0?n:t.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let t=new Set;for(let[e,{consumerHost:n}]of this.subscriptions)t.has(e)||(t.add(e),n.dispatchEvent(new i(this.context,n,e,!0)));e.stopPropagation()},this.host=e,t.context===void 0?this.context=t:this.context=t.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new c(this.context,this.host))}};function u({context:e}){return(t,n)=>{let r=new WeakMap;if(typeof n==`object`)return{get(){return t.get.call(this)},set(e){return r.get(this).setValue(e),t.set.call(this,e)},init(t){return r.set(this,new l(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new l(t,{context:e}))}));let i=Object.getOwnPropertyDescriptor(t,n),a;if(i===void 0){let e=new WeakMap;a={get(){return e.get(this)},set(t){r.get(this).setValue(t),e.set(this,t)},configurable:!0,enumerable:!0}}else{let e=i.set;a={...i,set(t){r.get(this).setValue(t),e?.call(this,t)}}}Object.defineProperty(t,n,a);return}}}function d({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new o(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new o(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}var f=a(Symbol(`pkt-tabs-context`)),p=class extends t.t{constructor(...e){super(...e),this.arrowNav=!0,this.disableArrowNav=!1,this.tabRefs=[],this.disabledMap={},this.tabCount=0,this.context={useArrowNav:this.useArrowNav,registerTab:this.registerTab.bind(this),handleClick:this.handleClick.bind(this),handleKeyUp:this.handleKeyUp.bind(this)}}get useArrowNav(){return this.arrowNav&&!this.disableArrowNav}updated(e){(e.has(`arrowNav`)||e.has(`disableArrowNav`))&&(this.context={...this.context,useArrowNav:this.useArrowNav})}registerTab(e,t,n=!1){this.tabRefs[t]=e,this.disabledMap[t]=n,this.tabCount=Math.max(this.tabCount,t+1)}isTabDisabled(e){return!!this.disabledMap[e]}findEnabledIndex(e,t){let n=e+t;for(;n>=0&&n<this.tabCount;){if(!this.isTabDisabled(n))return n;n+=t}return null}handleClick(e){this.isTabDisabled(e)||this.dispatchEvent(new CustomEvent(`tab-selected`,{detail:{index:e},bubbles:!0,composed:!0}))}handleKeyUp(e,t){if(this.useArrowNav){if(e.key===`ArrowLeft`){e.preventDefault();let n=this.findEnabledIndex(t,-1);n!==null&&this.tabRefs[n]?.focus()}if(e.key===`ArrowRight`){e.preventDefault();let n=this.findEnabledIndex(t,1);n!==null&&this.tabRefs[n]?.focus()}(e.key===`Enter`||e.key===` `||e.key===`Spacebar`||e.key===`ArrowDown`)&&(e.preventDefault(),this.handleClick(t))}}render(){return e.d`
-      <div class="pkt-tabs">
-        <div class="pkt-tabs__list" role=${this.useArrowNav?`tablist`:`navigation`}>${t.n(this)}</div>
+const e=require(`./element-DjtxO-1r.cjs`),t=require(`./element-with-slot-CWoTGA1B.cjs`),n=require(`./if-defined-XKOD_t_V.cjs`),r=require(`./ref-BaJ0mBT_.cjs`);var i=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};function a(e){return e}var o=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new i(this.context,this.host,this.t,this.subscribe))}},s=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},c=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},l=class extends s{constructor(e,t,n){super(t.context===void 0?n:t.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let t=new Set;for(let[e,{consumerHost:n}]of this.subscriptions)t.has(e)||(t.add(e),n.dispatchEvent(new i(this.context,n,e,!0)));e.stopPropagation()},this.host=e,t.context===void 0?this.context=t:this.context=t.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new c(this.context,this.host))}};function u({context:e}){return(t,n)=>{let r=new WeakMap;if(typeof n==`object`)return{get(){return t.get.call(this)},set(e){return r.get(this).setValue(e),t.set.call(this,e)},init(t){return r.set(this,new l(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new l(t,{context:e}))}));let i=Object.getOwnPropertyDescriptor(t,n),a;if(i===void 0){let e=new WeakMap;a={get(){return e.get(this)},set(t){r.get(this).setValue(t),e.set(this,t)},configurable:!0,enumerable:!0}}else{let e=i.set;a={...i,set(t){r.get(this).setValue(t),e?.call(this,t)}}}Object.defineProperty(t,n,a);return}}}function d({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new o(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new o(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}var f=a(Symbol(`pkt-tabs-context`)),p=class extends t.t{constructor(...e){super(...e),this.arrowNav=!0,this.disableArrowNav=!1,this.separatorIconName=``,this.separatorIconPath=``,this.tabRefs=[],this.disabledMap={},this.tabCount=0,this.context={useArrowNav:this.useArrowNav,registerTab:this.registerTab.bind(this),handleClick:this.handleClick.bind(this),handleKeyUp:this.handleKeyUp.bind(this)}}get useArrowNav(){return this.arrowNav&&!this.disableArrowNav}updated(e){(e.has(`arrowNav`)||e.has(`disableArrowNav`))&&(this.context={...this.context,useArrowNav:this.useArrowNav}),this.updateComplete.then(()=>this.syncSeparators())}syncSeparators(){let e=this.querySelector(`.pkt-tabs__list`);if(!e||(e.querySelectorAll(`.pkt-tabs__separator`).forEach(e=>e.remove()),!(this.separatorIconName||this.separatorIconPath)))return;let t=Array.from(e.children).filter(e=>!e.classList.contains(`pkt-tabs__separator`));for(let e=0;e<t.length-1;e++){let n=document.createElement(`span`);if(n.className=`pkt-tabs__separator`,n.setAttribute(`aria-hidden`,`true`),n.setAttribute(`role`,`presentation`),this.separatorIconPath){let e=document.createElement(`img`);e.setAttribute(`src`,this.separatorIconPath),e.setAttribute(`alt`,``),e.setAttribute(`aria-hidden`,`true`),n.appendChild(e)}else if(this.separatorIconName){let e=document.createElement(`pkt-icon`);e.setAttribute(`name`,this.separatorIconName),e.classList.add(`pkt-tabs__separator-icon`),n.appendChild(e)}t[e].after(n)}}registerTab(e,t,n=!1){this.tabRefs[t]=e,this.disabledMap[t]=n,this.tabCount=Math.max(this.tabCount,t+1)}isTabDisabled(e){return!!this.disabledMap[e]}findEnabledIndex(e,t){let n=e+t;for(;n>=0&&n<this.tabCount;){if(!this.isTabDisabled(n))return n;n+=t}return null}handleClick(e){this.isTabDisabled(e)||this.dispatchEvent(new CustomEvent(`tab-selected`,{detail:{index:e},bubbles:!0,composed:!0}))}handleKeyUp(e,t){if(this.useArrowNav){if(e.key===`ArrowLeft`){e.preventDefault();let n=this.findEnabledIndex(t,-1);n!==null&&this.tabRefs[n]?.focus()}if(e.key===`ArrowRight`){e.preventDefault();let n=this.findEnabledIndex(t,1);n!==null&&this.tabRefs[n]?.focus()}(e.key===`Enter`||e.key===` `||e.key===`Spacebar`||e.key===`ArrowDown`)&&(e.preventDefault(),this.handleClick(t))}}render(){let n=this.useArrowNav?`tablist`:`navigation`;return e.d`
+      <div class=${this.separatorIconName||this.separatorIconPath?`pkt-tabs pkt-tabs--with-separator`:`pkt-tabs`}>
+        <div class="pkt-tabs__list" role=${n}>${t.n(this)}</div>
       </div>
-    `}};e.r([e.s({type:Boolean,reflect:!0,attribute:`arrow-nav`})],p.prototype,`arrowNav`,void 0),e.r([e.s({type:Boolean,reflect:!0,attribute:`disable-arrow-nav`})],p.prototype,`disableArrowNav`,void 0),e.r([e.o()],p.prototype,`tabRefs`,void 0),e.r([e.o()],p.prototype,`disabledMap`,void 0),e.r([e.o()],p.prototype,`tabCount`,void 0),e.r([u({context:f}),e.o()],p.prototype,`context`,void 0);try{e.c(`pkt-tabs`)(p)}catch{console.warn(`Forsøker å definere <pkt-tabs>, men den er allerede definert`)}var m=class extends t.t{constructor(){super(),this.active=!1,this.disabled=!1,this.href=``,this.icon=``,this.controls=``,this.tag=``,this.tagSkin=`blue`,this.index=0,this.elementRef=r.t()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)})}updated(){this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)}handleClick(e){if(this.disabled){e.preventDefault(),e.stopPropagation();return}this.context&&this.context.handleClick(this.index)}handleKeyDown(e){if(this.disabled&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)){e.preventDefault(),e.stopPropagation();return}this.context&&this.context.handleKeyUp(e,this.index)}render(){let i=this.context?.useArrowNav??!0,a=this.active&&!this.disabled,o=[a?`active`:``,this.disabled?`pkt-tabs__item--disabled`:``].filter(Boolean).join(` `),s=i?`tab`:void 0,c=i?a:void 0,l=this.disabled?-1:a||!i?void 0:-1,u=e.d`
-      ${this.icon?e.d`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>`:``}
+    `}};e.r([e.s({type:Boolean,reflect:!0,attribute:`arrow-nav`})],p.prototype,`arrowNav`,void 0),e.r([e.s({type:Boolean,reflect:!0,attribute:`disable-arrow-nav`})],p.prototype,`disableArrowNav`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`separator-icon-name`})],p.prototype,`separatorIconName`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`separator-icon-path`})],p.prototype,`separatorIconPath`,void 0),e.r([e.o()],p.prototype,`tabRefs`,void 0),e.r([e.o()],p.prototype,`disabledMap`,void 0),e.r([e.o()],p.prototype,`tabCount`,void 0),e.r([u({context:f}),e.o()],p.prototype,`context`,void 0);try{e.c(`pkt-tabs`)(p)}catch{console.warn(`Forsøker å definere <pkt-tabs>, men den er allerede definert`)}var m=class extends t.t{constructor(){super(),this.active=!1,this.disabled=!1,this.href=``,this.icon=``,this.controls=``,this.tag=``,this.tagSkin=`blue`,this.index=0,this.elementRef=r.t()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)})}updated(){this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)}handleClick(e){if(this.disabled){e.preventDefault(),e.stopPropagation();return}this.context&&this.context.handleClick(this.index)}handleKeyDown(e){if(this.disabled&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)){e.preventDefault(),e.stopPropagation();return}this.context&&this.context.handleKeyUp(e,this.index)}render(){let i=this.context?.useArrowNav??!0,a=this.active&&!this.disabled,o=[a?`active`:``,this.disabled?`pkt-tabs__item--disabled`:``].filter(Boolean).join(` `),s=i?`tab`:void 0,c=i?a:void 0,l=this.disabled?-1:a||!i?void 0:-1,u=`pkt-icon--small ${this.icon===`check`?`pkt-tabs__status-icon`:``}`,d=e.d`
+      ${this.icon?e.d`<pkt-icon name=${this.icon} class=${u}></pkt-icon>`:``}
       <span>${t.n(this)}</span>
       ${this.tag?e.d`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>`:``}
     `;return this.href?e.d`
@@ -19,7 +19,7 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./element-with-slot-CWoTGA1
           @click=${this.handleClick}
           @keydown=${this.handleKeyDown}
         >
-          ${u}
+          ${d}
         </a>
       `:e.d`
       <button
@@ -35,6 +35,6 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./element-with-slot-CWoTGA1
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
       >
-        ${u}
+        ${d}
       </button>
     `}};e.r([e.s({type:Boolean,reflect:!0})],m.prototype,`active`,void 0),e.r([e.s({type:Boolean,reflect:!0})],m.prototype,`disabled`,void 0),e.r([e.s({type:String,reflect:!0})],m.prototype,`href`,void 0),e.r([e.s({type:String,reflect:!0})],m.prototype,`icon`,void 0),e.r([e.s({type:String,reflect:!0})],m.prototype,`controls`,void 0),e.r([e.s({type:String,reflect:!0})],m.prototype,`tag`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`tag-skin`})],m.prototype,`tagSkin`,void 0),e.r([e.s({type:Number,reflect:!0})],m.prototype,`index`,void 0),e.r([d({context:f,subscribe:!0}),e.s({attribute:!1})],m.prototype,`context`,void 0);try{e.c(`pkt-tab-item`)(m)}catch{console.warn(`Forsøker å definere <pkt-tab-item>, men den er allerede definert`)}var h=p;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});

package/dist/{tabs-C0DWPmn2.js → tabs-Rc9N9HWa.js}

@@ -171,7 +171,7 @@ function _({ context: e, subscribe: t }) {
 //#region src/components/tabs/tabs-context.ts
 var v = d(Symbol("pkt-tabs-context")), y = class extends o {
 	constructor(...e) {
-		super(...e), this.arrowNav = !0, this.disableArrowNav = !1, this.tabRefs = [], this.disabledMap = {}, this.tabCount = 0, this.context = {
+		super(...e), this.arrowNav = !0, this.disableArrowNav = !1, this.separatorIconName = "", this.separatorIconPath = "", this.tabRefs = [], this.disabledMap = {}, this.tabCount = 0, this.context = {
 			useArrowNav: this.useArrowNav,
 			registerTab: this.registerTab.bind(this),
 			handleClick: this.handleClick.bind(this),
@@ -185,7 +185,23 @@ var v = d(Symbol("pkt-tabs-context")), y = class extends o {
 		(e.has("arrowNav") || e.has("disableArrowNav")) && (this.context = {
 			...this.context,
 			useArrowNav: this.useArrowNav
-		});
+		}), this.updateComplete.then(() => this.syncSeparators());
+	}
+	syncSeparators() {
+		let e = this.querySelector(".pkt-tabs__list");
+		if (!e || (e.querySelectorAll(".pkt-tabs__separator").forEach((e) => e.remove()), !(this.separatorIconName || this.separatorIconPath))) return;
+		let t = Array.from(e.children).filter((e) => !e.classList.contains("pkt-tabs__separator"));
+		for (let e = 0; e < t.length - 1; e++) {
+			let n = document.createElement("span");
+			if (n.className = "pkt-tabs__separator", n.setAttribute("aria-hidden", "true"), n.setAttribute("role", "presentation"), this.separatorIconPath) {
+				let e = document.createElement("img");
+				e.setAttribute("src", this.separatorIconPath), e.setAttribute("alt", ""), e.setAttribute("aria-hidden", "true"), n.appendChild(e);
+			} else if (this.separatorIconName) {
+				let e = document.createElement("pkt-icon");
+				e.setAttribute("name", this.separatorIconName), e.classList.add("pkt-tabs__separator-icon"), n.appendChild(e);
+			}
+			t[e].after(n);
+		}
 	}
 	registerTab(e, t, n = !1) {
 		this.tabRefs[t] = e, this.disabledMap[t] = n, this.tabCount = Math.max(this.tabCount, t + 1);
@@ -224,9 +240,10 @@ var v = d(Symbol("pkt-tabs-context")), y = class extends o {
 		}
 	}
 	render() {
+		let e = this.useArrowNav ? "tablist" : "navigation";
 		return t`
-      <div class="pkt-tabs">
-        <div class="pkt-tabs__list" role=${this.useArrowNav ? "tablist" : "navigation"}>${a(this)}</div>
+      <div class=${this.separatorIconName || this.separatorIconPath ? "pkt-tabs pkt-tabs--with-separator" : "pkt-tabs"}>
+        <div class="pkt-tabs__list" role=${e}>${a(this)}</div>
       </div>
     `;
 	}
@@ -239,7 +256,15 @@ r([i({
 	type: Boolean,
 	reflect: !0,
 	attribute: "disable-arrow-nav"
-})], y.prototype, "disableArrowNav", void 0), r([n()], y.prototype, "tabRefs", void 0), r([n()], y.prototype, "disabledMap", void 0), r([n()], y.prototype, "tabCount", void 0), r([g({ context: v }), n()], y.prototype, "context", void 0);
+})], y.prototype, "disableArrowNav", void 0), r([i({
+	type: String,
+	reflect: !0,
+	attribute: "separator-icon-name"
+})], y.prototype, "separatorIconName", void 0), r([i({
+	type: String,
+	reflect: !0,
+	attribute: "separator-icon-path"
+})], y.prototype, "separatorIconPath", void 0), r([n()], y.prototype, "tabRefs", void 0), r([n()], y.prototype, "disabledMap", void 0), r([n()], y.prototype, "tabCount", void 0), r([g({ context: v }), n()], y.prototype, "context", void 0);
 try {
 	e("pkt-tabs")(y);
 } catch {
@@ -274,8 +299,8 @@ var b = class extends o {
 		this.context && this.context.handleKeyUp(e, this.index);
 	}
 	render() {
-		let e = this.context?.useArrowNav ?? !0, n = this.active && !this.disabled, r = [n ? "active" : "", this.disabled ? "pkt-tabs__item--disabled" : ""].filter(Boolean).join(" "), i = e ? "tab" : void 0, o = e ? n : void 0, l = this.disabled ? -1 : n || !e ? void 0 : -1, u = t`
-      ${this.icon ? t`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ""}
+		let e = this.context?.useArrowNav ?? !0, n = this.active && !this.disabled, r = [n ? "active" : "", this.disabled ? "pkt-tabs__item--disabled" : ""].filter(Boolean).join(" "), i = e ? "tab" : void 0, o = e ? n : void 0, l = this.disabled ? -1 : n || !e ? void 0 : -1, u = `pkt-icon--small ${this.icon === "check" ? "pkt-tabs__status-icon" : ""}`, d = t`
+      ${this.icon ? t`<pkt-icon name=${this.icon} class=${u}></pkt-icon>` : ""}
       <span>${a(this)}</span>
       ${this.tag ? t`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
     `;
@@ -292,7 +317,7 @@ var b = class extends o {
           @click=${this.handleClick}
           @keydown=${this.handleKeyDown}
         >
-          ${u}
+          ${d}
         </a>
       ` : t`
       <button
@@ -308,7 +333,7 @@ var b = class extends o {
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
       >
-        ${u}
+        ${d}
       </button>
     `;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.9.1",
+  "version": "16.11.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -78,5 +78,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "88ccfdd5b0afd0db0c4f18e93b772b578f3fd9d7"
+  "gitHead": "17f81f8bf2c3716c741327d6b4bcc2347994278e"
 }

package/src/components/modal/modal.ts

@@ -9,6 +9,8 @@ import { TPktSize } from '@/types/size'
 import specs from 'componentSpecs/modal.json'
 import '@/components/icon'
 
+type ModalSize = TPktSize | 'fit-content'
+
 export interface IPktModal {
   open?: boolean
   headingText?: string
@@ -16,7 +18,7 @@ export interface IPktModal {
   hideCloseButton?: boolean
   closeOnBackdropClick?: boolean
   closeButtonSkin?: 'blue' | 'yellow-filled'
-  size?: TPktSize
+  size?: ModalSize
   variant?: 'dialog' | 'drawer'
   drawerPosition?: 'left' | 'right'
   transparentBackdrop?: boolean
@@ -31,7 +33,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
   @property({ type: Boolean })
   closeOnBackdropClick?: boolean = specs.props.closeOnBackdropClick.default
   @property({ type: String }) closeButtonSkin?: 'blue' | 'yellow-filled' = 'blue'
-  @property({ type: String }) size?: TPktSize = specs.props.size.default as TPktSize
+  @property({ type: String }) size?: ModalSize = specs.props.size.default as ModalSize
   @property({ type: String }) variant?: 'dialog' | 'drawer' = 'dialog'
   @property({ type: String }) drawerPosition?: 'left' | 'right' = 'right'
   @property({ type: Boolean }) transparentBackdrop?: boolean = false
@@ -200,10 +202,9 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
               </div>`
             : nothing}
           <div class="pkt-modal__container">
-            <div
-              id="pkt-modal__content"
-              class=${classMap(contentClasses)}
-            >${slotContent(this)}</div>
+            <div id="pkt-modal__content" class=${classMap(contentClasses)}>
+              ${slotContent(this)}
+            </div>
           </div>
         </div>
       </dialog>

package/src/components/tabs/tabitem.ts

@@ -91,8 +91,9 @@ export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktT
     const ariaSelected = useArrowNav ? isActive : undefined
     const tabIndex = this.disabled ? -1 : isActive || !useArrowNav ? undefined : -1
 
+    const iconClasses = `pkt-icon--small ${this.icon === 'check' ? 'pkt-tabs__status-icon' : ''}`
     const content = html`
-      ${this.icon ? html`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ''}
+      ${this.icon ? html`<pkt-icon name=${this.icon} class=${iconClasses}></pkt-icon>` : ''}
       <span>${slotContent(this)}</span>
       ${this.tag ? html`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ''}
     `

package/src/components/tabs/tabs.test.ts

@@ -132,6 +132,20 @@ describe('PktTabs', () => {
 
       expect(tabs.disableArrowNav).toBe(true)
     })
+
+    test('applies separator class on tabs root when separator icon is provided', async () => {
+      const container = await createTabs('separator-icon-name="arrow-right"')
+      const tabsRoot = container.querySelector('.pkt-tabs')
+      expect(tabsRoot).toHaveClass('pkt-tabs--with-separator')
+    })
+
+    test('uses separator-icon-path when both separator props are provided', async () => {
+      const container = await createTabs(
+        'separator-icon-name="arrow-right" separator-icon-path="/custom.svg"',
+      )
+      const separatorImage = container.querySelector('.pkt-tabs__separator img')
+      expect(separatorImage?.getAttribute('src')).toBe('/custom.svg')
+    })
   })
 
   describe('Tab item props', () => {
@@ -536,6 +550,22 @@ describe('PktTabs', () => {
 
       expect(tabList).toHaveAttribute('role', 'navigation')
     })
+
+    test('keeps tab semantics when separators are enabled', async () => {
+      const container = await createTabs('separator-icon-name="arrow-right"')
+      const tabList = container.querySelector('.pkt-tabs__list')
+      const buttons = container.querySelectorAll('pkt-tab-item button')
+
+      expect(tabList).toHaveAttribute('role', 'tablist')
+      buttons.forEach((button) => {
+        expect(button).toHaveAttribute('role', 'tab')
+      })
+    })
+
+    test('renders decorative separators in DOM', async () => {
+      const container = await createTabs('separator-icon-name="arrow-right"')
+      expect(container.querySelectorAll('.pkt-tabs__separator')).toHaveLength(2)
+    })
   })
 
   describe('Multiple tab items', () => {

package/src/components/tabs/tabs.ts

@@ -8,12 +8,16 @@ import { tabsContext, type TabsContext } from './tabs-context'
 export interface IPktTabs {
   arrowNav?: boolean
   disableArrowNav?: boolean
+  separatorIconName?: string
+  separatorIconPath?: string
 }
 
 export class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
   @property({ type: Boolean, reflect: true, attribute: 'arrow-nav' }) arrowNav: boolean = true
   @property({ type: Boolean, reflect: true, attribute: 'disable-arrow-nav' })
   disableArrowNav: boolean = false
+  @property({ type: String, reflect: true, attribute: 'separator-icon-name' }) separatorIconName: string = ''
+  @property({ type: String, reflect: true, attribute: 'separator-icon-path' }) separatorIconPath: string = ''
 
   @state() private tabRefs: Array<HTMLAnchorElement | HTMLButtonElement | null> = []
   @state() private disabledMap: Record<number, boolean> = {}
@@ -41,6 +45,39 @@ export class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
         useArrowNav: this.useArrowNav,
       }
     }
+    this.updateComplete.then(() => this.syncSeparators())
+  }
+
+  private syncSeparators() {
+    // Slotted tab items require post-render DOM sync for decorative separators.
+    const list = this.querySelector('.pkt-tabs__list')
+    if (!list) return
+
+    list.querySelectorAll('.pkt-tabs__separator').forEach((separator) => separator.remove())
+    const hasSeparator = !!(this.separatorIconName || this.separatorIconPath)
+    if (!hasSeparator) return
+
+    const items = Array.from(list.children).filter((child) => !child.classList.contains('pkt-tabs__separator'))
+    for (let i = 0; i < items.length - 1; i++) {
+      const separator = document.createElement('span')
+      separator.className = 'pkt-tabs__separator'
+      separator.setAttribute('aria-hidden', 'true')
+      separator.setAttribute('role', 'presentation')
+
+      if (this.separatorIconPath) {
+        const img = document.createElement('img')
+        img.setAttribute('src', this.separatorIconPath)
+        img.setAttribute('alt', '')
+        img.setAttribute('aria-hidden', 'true')
+        separator.appendChild(img)
+      } else if (this.separatorIconName) {
+        const icon = document.createElement('pkt-icon')
+        icon.setAttribute('name', this.separatorIconName)
+        icon.classList.add('pkt-tabs__separator-icon')
+        separator.appendChild(icon)
+      }
+      items[i].after(separator)
+    }
   }
 
   private registerTab(element: HTMLElement, index: number, disabled = false) {
@@ -104,9 +141,11 @@ export class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
 
   render() {
     const role = this.useArrowNav ? 'tablist' : 'navigation'
+    const hasSeparator = !!(this.separatorIconName || this.separatorIconPath)
+    const tabsClass = hasSeparator ? 'pkt-tabs pkt-tabs--with-separator' : 'pkt-tabs'
 
     return html`
-      <div class="pkt-tabs">
+      <div class=${tabsClass}>
         <div class="pkt-tabs__list" role=${role}>${slotContent(this)}</div>
       </div>
     `

package/dist/modal-DS_wUOIv.cjs

@@ -1,36 +0,0 @@
-const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./ref-BaJ0mBT_.cjs`);var i={name:`pkt-modal`,react:`PktModal`,"css-class":`pkt-modal`,isElement:!0,isPureReact:!0,events:{"background-click":{description:`Event som trigges når bakgrunnen trykkes på`},close:{description:`Event som trigges når meldingsboksen lukkes`}},props:{open:{name:`Åpen`,description:`Deklarativ styring av modalens åpen/lukket-tilstand. Kan brukes i stedet for showModal()/close()-metodene.`,type:`boolean`,category:`tech`,default:!1},headingText:{name:`Heading text`,description:`Heading tekst på modalen`,type:`string`,category:`contents`},hideCloseButton:{name:`Gjem 'Lukk'-knapp`,description:`Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.`,type:`boolean`,category:`ui`,default:!1},closeOnBackdropClick:{name:`Lukk modalen når bakgrunnen trykkes på`,description:`Lukk modalen når bakgrunnen trykkes på`,type:`boolean`,category:`tech`,default:!1},closeButtonSkin:{name:`Stil på lukkeknappen`,description:`Stil på lukkeknappen`,type:[`blue`,`yellow-filled`],category:`ui`,default:`blue`},size:{name:`Størrelse`,description:`Størrelsen på modalen`,type:[`small`,`medium`,`large`],category:`ui`,default:`medium`},variant:{name:`Variant`,description:`Standard dialog eller skuff`,type:[`dialog`,`drawer`],category:`ui`,default:`dialog`},drawerPosition:{name:`Skuffposisjon`,description:`Posisjonen til skuffen`,type:[`left`,`right`],category:`ui`,default:`right`},transparentBackdrop:{name:`Gjennomsiktig bakgrunn`,description:`Bakgrunnen er gjennomsiktig`,type:`boolean`,category:`ui`,default:!1},removePadding:{name:`Fjern padding`,description:`Fjerner paddingen rundt innholdet i modalen`,type:`boolean`,category:`ui`,default:!1}},slots:{default:{description:`Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen.`}}},a=class extends n.t{constructor(){super(),this.open=!1,this.headingText=``,this.removePadding=!1,this.hideCloseButton=i.props.hideCloseButton.default,this.closeOnBackdropClick=i.props.closeOnBackdropClick.default,this.closeButtonSkin=`blue`,this.size=i.props.size.default,this.variant=`dialog`,this.drawerPosition=`right`,this.transparentBackdrop=!1,this.dialogRef=r.t(),this._isOpen=!1,this.close=(e,t=!1)=>{if(!this._isOpen)return;this._isOpen=!1,this.open=!1,document.body.classList.remove(`pkt-modal--open`);let n=document.activeElement;n&&!this.isElementInViewport(n)&&n.scrollIntoView({behavior:`smooth`,block:`nearest`}),this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),t||this.dialogRef.value?.close(),this.requestUpdate()},this.showModal=(e=null)=>{this._isOpen=!0,this.open=!0,this.dialogRef.value?.showModal(),document.body.classList.add(`pkt-modal--open`),this.dispatchEvent(new CustomEvent(`showModal`,{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener(`keydown`,this.handleKeyDown.bind(this)),document.addEventListener(`click`,this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`click`,this.handleBackdropClick)}updated(e){super.updated(e),e.has(`open`)&&(this.open&&!this._isOpen?this.showModal():!this.open&&this._isOpen&&this.close(new Event(`close`),!1))}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&(`document`in window&&`createElement`in document&&(await Promise.resolve().then(()=>require(`./dialog-polyfill.esm-D3Oinvk0.cjs`)).then(e=>e.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener(`close`,()=>{this.close(new Event(`close`),!0)}))}handleKeyDown(e){e.key===`Escape`&&this.close(e)}handleBackdropClick(e){this.closeOnBackdropClick&&e.target===this.dialogRef?.value&&this.close(e)}isElementInViewport(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){let i={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===``||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin===`yellow-filled`,"pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant===`drawer`},a={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin===`blue`,c={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return e.d`
-      <dialog
-        class=${t.t(i)}
-        ${r.n(this.dialogRef)}
-        aria-labelledby=${this.headingText?`pkt-modal__headingText`:e.l}
-        aria-describedby="pkt-modal__content"
-        @close=${e=>this.close(e,!0)}
-      >
-        <div class="pkt-modal__wrapper">
-          ${this.headingText||!this.hideCloseButton?e.d`<div class="pkt-modal__header">
-                <div class="pkt-modal__header-background"></div>
-                ${this.headingText?e.d`<h1 id="pkt-modal__headingText" class=${t.t(a)}>
-                      ${this.headingText}
-                    </h1>`:e.d`<div class="pkt-modal__headingText"></div>`}
-                ${this.hideCloseButton?e.d`<div class="pkt-modal__noCloseButton"></div>`:e.d`<div class="${t.t(c)}">
-                      <pkt-button
-                        @click=${e=>this.close(e)}
-                        aria-label="close"
-                        iconname="close"
-                        variant="icon-only"
-                        size="medium"
-                        skin=${s?`tertiary`:`primary`}
-                      >
-                        Lukk
-                      </pkt-button>
-                    </div>`}
-              </div>`:e.l}
-          <div class="pkt-modal__container">
-            <div
-              id="pkt-modal__content"
-              class=${t.t(o)}
-            >${n.n(this)}</div>
-          </div>
-        </div>
-      </dialog>
-    `}};e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`open`,void 0),e.r([e.s({type:String})],a.prototype,`headingText`,void 0),e.r([e.s({type:Boolean})],a.prototype,`removePadding`,void 0),e.r([e.s({type:Boolean})],a.prototype,`hideCloseButton`,void 0),e.r([e.s({type:Boolean})],a.prototype,`closeOnBackdropClick`,void 0),e.r([e.s({type:String})],a.prototype,`closeButtonSkin`,void 0),e.r([e.s({type:String})],a.prototype,`size`,void 0),e.r([e.s({type:String})],a.prototype,`variant`,void 0),e.r([e.s({type:String})],a.prototype,`drawerPosition`,void 0),e.r([e.s({type:Boolean})],a.prototype,`transparentBackdrop`,void 0),e.r([e.o()],a.prototype,`_isOpen`,void 0);try{e.c(`pkt-modal`)(a)}catch{console.warn(`Forsøker å definere <pkt-modal>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});