@oslokommune/punkt-elements 16.7.7 → 16.8.2

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.8.2](https://github.com/oslokommune/punkt/compare/16.8.1...16.8.2) (2026-04-21)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.7.7](https://github.com/oslokommune/punkt/compare/16.7.6...16.7.7) (2026-04-16)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -471,6 +471,7 @@ declare interface IPktSelect {
 
 export declare interface IPktTabItem {
     active?: boolean;
+    disabled?: boolean;
     href?: string;
     icon?: string;
     controls?: string;
@@ -1685,6 +1686,7 @@ declare class PktShadowElement<T = {}> extends LitElement {
 
 export declare class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktTabItem {
     active: boolean;
+    disabled: boolean;
     href: string;
     icon: string;
     controls: string;
@@ -1695,8 +1697,9 @@ export declare class PktTabItem extends PktElementWithSlot<IPktTabItem> implemen
     elementRef: Ref<HTMLAnchorElement | HTMLButtonElement>;
     constructor();
     connectedCallback(): void;
+    updated(): void;
     private handleClick;
-    private handleKeyUp;
+    private handleKeyDown;
     render(): TemplateResult<1>;
 }
 
@@ -1704,11 +1707,14 @@ export declare class PktTabs extends PktElementWithSlot<IPktTabs> implements IPk
     arrowNav: boolean;
     disableArrowNav: boolean;
     private tabRefs;
+    private disabledMap;
     private tabCount;
     private get useArrowNav();
     private context;
     updated(changedProperties: PropertyValues): void;
     private registerTab;
+    private isTabDisabled;
+    private findEnabledIndex;
     private handleClick;
     private handleKeyUp;
     render(): TemplateResult<1>;
@@ -1864,7 +1870,7 @@ declare interface TabsContext {
     /**
      * Register a tab item with the parent tabs container
      */
-    registerTab: (element: HTMLElement, index: number) => void;
+    registerTab: (element: HTMLElement, index: number, disabled?: boolean) => void;
     /**
      * Handle click event from a tab item
      */

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-D8nL9rWx.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-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;

package/dist/pkt-index.js

@@ -23,7 +23,7 @@ import { n as T } from "./messagebox-Cwlg5sOr.js";
 import { n as E } from "./modal-C_wtsh9m.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-Y7utmJi9.js";
+import { n as k, r as A } from "./tabs-C0DWPmn2.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-tabs.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./tabs-D8nL9rWx.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-COwm9b3n.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-Y7utmJi9.js";
+import { n as e, r as t, t as n } from "./tabs-C0DWPmn2.js";
 export { e as PktTabItem, t as PktTabs, n as default };

package/dist/{tabs-Y7utmJi9.js → tabs-C0DWPmn2.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.tabCount = 0, this.context = {
+		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),
@@ -187,22 +187,41 @@ var v = d(Symbol("pkt-tabs-context")), y = class extends o {
 			useArrowNav: this.useArrowNav
 		});
 	}
-	registerTab(e, t) {
-		this.tabRefs[t] = e, this.tabCount = Math.max(this.tabCount, t + 1);
+	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.dispatchEvent(new CustomEvent("tab-selected", {
+		this.isTabDisabled(e) || this.dispatchEvent(new CustomEvent("tab-selected", {
 			detail: { index: e },
 			bubbles: !0,
 			composed: !0
 		}));
 	}
 	handleKeyUp(e, t) {
-		this.useArrowNav && (e.code === "ArrowLeft" && t !== 0 && this.tabRefs[t - 1]?.focus(), e.code === "ArrowRight" && t < this.tabCount - 1 && this.tabRefs[t + 1]?.focus(), (e.code === "ArrowDown" || e.code === "Space") && this.dispatchEvent(new CustomEvent("tab-selected", {
-			detail: { index: t },
-			bubbles: !0,
-			composed: !0
-		})));
+		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 t`
@@ -220,7 +239,7 @@ 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, "tabCount", void 0), r([g({ context: v }), n()], y.prototype, "context", void 0);
+})], 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);
 try {
 	e("pkt-tabs")(y);
 } catch {
@@ -230,21 +249,32 @@ try {
 //#region src/components/tabs/tabitem.ts
 var b = class extends o {
 	constructor() {
-		super(), this.active = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = l();
+		super(), this.active = !1, this.disabled = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = l();
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.updateComplete.then(() => {
-			this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index);
+			this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index, this.disabled);
 		});
 	}
-	handleClick() {
+	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);
 	}
-	handleKeyUp(e) {
+	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 e = this.context?.useArrowNav ?? !0, n = this.active ? "active" : "", r = e ? "tab" : void 0, i = e ? this.active : void 0, o = this.active || !e ? void 0 : -1, l = t`
+		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>` : ""}
       <span>${a(this)}</span>
       ${this.tag ? t`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
@@ -252,30 +282,33 @@ var b = class extends o {
 		return this.href ? t`
         <a
           ${c(this.elementRef)}
-          href=${this.href}
-          class="pkt-tabs__link ${n}"
-          role=${s(r)}
-          aria-selected=${s(i)}
+          href=${s(this.disabled ? void 0 : this.href)}
+          class="pkt-tabs__link ${r}"
+          role=${s(i)}
+          aria-selected=${s(o)}
+          aria-disabled=${s(this.disabled ? "true" : void 0)}
           aria-controls=${s(this.controls || void 0)}
-          tabindex=${s(o)}
+          tabindex=${s(l)}
           @click=${this.handleClick}
-          @keyup=${this.handleKeyUp}
+          @keydown=${this.handleKeyDown}
         >
-          ${l}
+          ${u}
         </a>
       ` : t`
       <button
         ${c(this.elementRef)}
         type="button"
-        class="pkt-tabs__button pkt-link-button ${n}"
-        role=${s(r)}
-        aria-selected=${s(i)}
+        class="pkt-tabs__button pkt-link-button ${r}"
+        ?disabled=${this.disabled}
+        aria-disabled=${s(this.disabled ? "true" : void 0)}
+        role=${s(i)}
+        aria-selected=${s(o)}
         aria-controls=${s(this.controls || void 0)}
-        tabindex=${s(o)}
+        tabindex=${s(l)}
         @click=${this.handleClick}
-        @keyup=${this.handleKeyUp}
+        @keydown=${this.handleKeyDown}
       >
-        ${l}
+        ${u}
       </button>
     `;
 	}
@@ -284,6 +317,9 @@ r([i({
 	type: Boolean,
 	reflect: !0
 })], b.prototype, "active", void 0), r([i({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "disabled", void 0), r([i({
 	type: String,
 	reflect: !0
 })], b.prototype, "href", void 0), r([i({

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

@@ -1,37 +1,40 @@
-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.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){this.tabRefs[t]=e,this.tabCount=Math.max(this.tabCount,t+1)}handleClick(e){this.dispatchEvent(new CustomEvent(`tab-selected`,{detail:{index:e},bubbles:!0,composed:!0}))}handleKeyUp(e,t){this.useArrowNav&&(e.code===`ArrowLeft`&&t!==0&&this.tabRefs[t-1]?.focus(),e.code===`ArrowRight`&&t<this.tabCount-1&&this.tabRefs[t+1]?.focus(),(e.code===`ArrowDown`||e.code===`Space`)&&this.dispatchEvent(new CustomEvent(`tab-selected`,{detail:{index:t},bubbles:!0,composed:!0})))}render(){return e.d`
+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>
       </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,`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.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)})}handleClick(){this.context&&this.context.handleClick(this.index)}handleKeyUp(e){this.context&&this.context.handleKeyUp(e,this.index)}render(){let i=this.context?.useArrowNav??!0,a=this.active?`active`:``,o=i?`tab`:void 0,s=i?this.active:void 0,c=this.active||!i?void 0:-1,l=e.d`
+    `}};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>`:``}
       <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`
         <a
           ${r.n(this.elementRef)}
-          href=${this.href}
-          class="pkt-tabs__link ${a}"
-          role=${n.t(o)}
-          aria-selected=${n.t(s)}
+          href=${n.t(this.disabled?void 0:this.href)}
+          class="pkt-tabs__link ${o}"
+          role=${n.t(s)}
+          aria-selected=${n.t(c)}
+          aria-disabled=${n.t(this.disabled?`true`:void 0)}
           aria-controls=${n.t(this.controls||void 0)}
-          tabindex=${n.t(c)}
+          tabindex=${n.t(l)}
           @click=${this.handleClick}
-          @keyup=${this.handleKeyUp}
+          @keydown=${this.handleKeyDown}
         >
-          ${l}
+          ${u}
         </a>
       `:e.d`
       <button
         ${r.n(this.elementRef)}
         type="button"
-        class="pkt-tabs__button pkt-link-button ${a}"
-        role=${n.t(o)}
-        aria-selected=${n.t(s)}
+        class="pkt-tabs__button pkt-link-button ${o}"
+        ?disabled=${this.disabled}
+        aria-disabled=${n.t(this.disabled?`true`:void 0)}
+        role=${n.t(s)}
+        aria-selected=${n.t(c)}
         aria-controls=${n.t(this.controls||void 0)}
-        tabindex=${n.t(c)}
+        tabindex=${n.t(l)}
         @click=${this.handleClick}
-        @keyup=${this.handleKeyUp}
+        @keydown=${this.handleKeyDown}
       >
-        ${l}
+        ${u}
       </button>
-    `}};e.r([e.s({type:Boolean,reflect:!0})],m.prototype,`active`,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}});
+    `}};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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.7.7",
+  "version": "16.8.2",
   "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": "691a4f7a2b9bc006ed99257fdfea1dbc02ef9fb9"
+  "gitHead": "1ff7d19b9d19c3b3e810dcee4bc3bd1d3fcc3610"
 }

package/src/components/tabs/tabitem.ts

@@ -11,6 +11,7 @@ export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gr
 
 export interface IPktTabItem {
   active?: boolean
+  disabled?: boolean
   href?: string
   icon?: string
   controls?: string
@@ -21,6 +22,7 @@ export interface IPktTabItem {
 
 export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktTabItem {
   @property({ type: Boolean, reflect: true }) active: boolean = false
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false
   @property({ type: String, reflect: true }) href: string = ''
   @property({ type: String, reflect: true }) icon: string = ''
   @property({ type: String, reflect: true }) controls: string = ''
@@ -44,18 +46,36 @@ export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktT
     // Wait for element to be fully initialized
     this.updateComplete.then(() => {
       if (this.elementRef.value && this.context) {
-        this.context.registerTab(this.elementRef.value, this.index)
+        this.context.registerTab(this.elementRef.value, this.index, this.disabled)
       }
     })
   }
 
-  private handleClick() {
+  updated() {
+    if (this.elementRef.value && this.context) {
+      this.context.registerTab(this.elementRef.value, this.index, this.disabled)
+    }
+  }
+
+  private handleClick(event: Event) {
+    if (this.disabled) {
+      event.preventDefault()
+      event.stopPropagation()
+      return
+    }
+
     if (this.context) {
       this.context.handleClick(this.index)
     }
   }
 
-  private handleKeyUp(event: KeyboardEvent) {
+  private handleKeyDown(event: KeyboardEvent) {
+    if (this.disabled && (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar')) {
+      event.preventDefault()
+      event.stopPropagation()
+      return
+    }
+
     if (this.context) {
       this.context.handleKeyUp(event, this.index)
     }
@@ -63,10 +83,13 @@ export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktT
 
   render() {
     const useArrowNav = this.context?.useArrowNav ?? true
-    const commonClasses = this.active ? 'active' : ''
+    const isActive = this.active && !this.disabled
+    const commonClasses = [isActive ? 'active' : '', this.disabled ? 'pkt-tabs__item--disabled' : '']
+      .filter(Boolean)
+      .join(' ')
     const role = useArrowNav ? 'tab' : undefined
-    const ariaSelected = useArrowNav ? this.active : undefined
-    const tabIndex = this.active || !useArrowNav ? undefined : -1
+    const ariaSelected = useArrowNav ? isActive : undefined
+    const tabIndex = this.disabled ? -1 : isActive || !useArrowNav ? undefined : -1
 
     const content = html`
       ${this.icon ? html`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ''}
@@ -78,14 +101,15 @@ export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktT
       return html`
         <a
           ${ref(this.elementRef)}
-          href=${this.href}
+          href=${ifDefined(this.disabled ? undefined : this.href)}
           class="pkt-tabs__link ${commonClasses}"
           role=${ifDefined(role)}
           aria-selected=${ifDefined(ariaSelected)}
+          aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}
           aria-controls=${ifDefined(this.controls || undefined)}
           tabindex=${ifDefined(tabIndex)}
           @click=${this.handleClick}
-          @keyup=${this.handleKeyUp}
+          @keydown=${this.handleKeyDown}
         >
           ${content}
         </a>
@@ -97,12 +121,14 @@ export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktT
         ${ref(this.elementRef)}
         type="button"
         class="pkt-tabs__button pkt-link-button ${commonClasses}"
+        ?disabled=${this.disabled}
+        aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}
         role=${ifDefined(role)}
         aria-selected=${ifDefined(ariaSelected)}
         aria-controls=${ifDefined(this.controls || undefined)}
         tabindex=${ifDefined(tabIndex)}
         @click=${this.handleClick}
-        @keyup=${this.handleKeyUp}
+        @keydown=${this.handleKeyDown}
       >
         ${content}
       </button>

package/src/components/tabs/tabs-context.ts

@@ -9,7 +9,7 @@ export interface TabsContext {
   /**
    * Register a tab item with the parent tabs container
    */
-  registerTab: (element: HTMLElement, index: number) => void
+  registerTab: (element: HTMLElement, index: number, disabled?: boolean) => void
 
   /**
    * Handle click event from a tab item

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

@@ -216,7 +216,7 @@ describe('PktTabs', () => {
       expect(document.activeElement).toBe(firstButton)
 
       // Simulate ArrowRight key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
       firstButton.dispatchEvent(keyEvent)
 
       // Wait for focus to change
@@ -236,7 +236,7 @@ describe('PktTabs', () => {
       expect(document.activeElement).toBe(secondButton)
 
       // Simulate ArrowLeft key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowLeft', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true })
       secondButton.dispatchEvent(keyEvent)
 
       // Wait for focus to change
@@ -255,7 +255,7 @@ describe('PktTabs', () => {
       expect(document.activeElement).toBe(thirdButton)
 
       // Simulate ArrowRight key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
       thirdButton.dispatchEvent(keyEvent)
 
       // Wait
@@ -275,7 +275,7 @@ describe('PktTabs', () => {
       expect(document.activeElement).toBe(firstButton)
 
       // Simulate ArrowLeft key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowLeft', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true })
       firstButton.dispatchEvent(keyEvent)
 
       // Wait
@@ -296,7 +296,7 @@ describe('PktTabs', () => {
       const button = secondTabItem.querySelector('button') as HTMLButtonElement
 
       // Simulate Space key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'Space', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: ' ', bubbles: true })
       button.dispatchEvent(keyEvent)
 
       // Wait
@@ -317,7 +317,7 @@ describe('PktTabs', () => {
       const button = secondTabItem.querySelector('button') as HTMLButtonElement
 
       // Simulate ArrowDown key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowDown', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
       button.dispatchEvent(keyEvent)
 
       // Wait
@@ -340,7 +340,7 @@ describe('PktTabs', () => {
       expect(document.activeElement).toBe(firstButton)
 
       // Simulate ArrowRight key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
       firstButton.dispatchEvent(keyEvent)
 
       // Wait
@@ -360,7 +360,7 @@ describe('PktTabs', () => {
       expect(document.activeElement).toBe(firstButton)
 
       // Simulate ArrowRight key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
       firstButton.dispatchEvent(keyEvent)
 
       // Wait
@@ -379,7 +379,7 @@ describe('PktTabs', () => {
       firstButton.focus()
 
       // Simulate ArrowRight key
-      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
       firstButton.dispatchEvent(keyEvent)
 
       // Wait
@@ -388,6 +388,83 @@ describe('PktTabs', () => {
       // Should NOT move to second tab (disableArrowNav overrides arrowNav)
       expect(document.activeElement).toBe(firstButton)
     })
+
+    test('skips disabled tabs during ArrowRight navigation', async () => {
+      const container = await createTabs(
+        '',
+        `
+        <pkt-tab-item index="0" active>Tab 1</pkt-tab-item>
+        <pkt-tab-item index="1" disabled>Tab 2</pkt-tab-item>
+        <pkt-tab-item index="2">Tab 3</pkt-tab-item>
+      `,
+      )
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+      const firstButton = tabItems[0].querySelector('button') as HTMLButtonElement
+      const thirdButton = tabItems[2].querySelector('button') as HTMLButtonElement
+
+      firstButton.focus()
+      const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
+      firstButton.dispatchEvent(keyEvent)
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      expect(document.activeElement).toBe(thirdButton)
+    })
+  })
+
+  describe('Disabled tabs', () => {
+    test('does not dispatch tab-selected for disabled button tab', async () => {
+      const container = await createTabs(
+        '',
+        `
+        <pkt-tab-item index="0" active>Tab 1</pkt-tab-item>
+        <pkt-tab-item index="1" disabled>Tab 2</pkt-tab-item>
+      `,
+      )
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      const eventListener = vi.fn()
+      tabs.addEventListener('tab-selected', eventListener)
+
+      const disabledButton = container.querySelectorAll('pkt-tab-item')[1].querySelector('button')
+      disabledButton?.click()
+
+      expect(disabledButton).toHaveAttribute('disabled')
+      expect(eventListener).not.toHaveBeenCalled()
+    })
+
+    test('disabled link tab has aria-disabled and does not dispatch event', async () => {
+      const container = await createTabs(
+        '',
+        `
+        <pkt-tab-item index="0" href="/enabled" active>Enabled</pkt-tab-item>
+        <pkt-tab-item index="1" href="/disabled" disabled>Disabled</pkt-tab-item>
+      `,
+      )
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      const eventListener = vi.fn()
+      tabs.addEventListener('tab-selected', eventListener)
+
+      const disabledLink = container.querySelectorAll('pkt-tab-item')[1].querySelector('a') as HTMLAnchorElement
+      disabledLink.click()
+      disabledLink.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+
+      expect(disabledLink).toHaveAttribute('aria-disabled', 'true')
+      expect(disabledLink).toHaveAttribute('tabindex', '-1')
+      expect(disabledLink).not.toHaveAttribute('href')
+      expect(eventListener).not.toHaveBeenCalled()
+    })
+
+    test('disabled active tab is not exposed as selected', async () => {
+      const container = await createTabs(
+        '',
+        `
+        <pkt-tab-item index="0" active disabled>Disabled active</pkt-tab-item>
+        <pkt-tab-item index="1">Enabled</pkt-tab-item>
+      `,
+      )
+      const disabledButton = container.querySelector('pkt-tab-item button')
+
+      expect(disabledButton).toHaveAttribute('aria-selected', 'false')
+    })
   })
 
   describe('Accessibility', () => {
@@ -483,7 +560,7 @@ describe('PktTabs', () => {
 
       // Navigate through all tabs
       for (let i = 0; i < 4; i++) {
-        const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+        const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
         ;(document.activeElement as HTMLElement).dispatchEvent(keyEvent)
         await new Promise((resolve) => setTimeout(resolve, 50))
       }

package/src/components/tabs/tabs.ts

@@ -16,6 +16,7 @@ export class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
   disableArrowNav: boolean = false
 
   @state() private tabRefs: Array<HTMLAnchorElement | HTMLButtonElement | null> = []
+  @state() private disabledMap: Record<number, boolean> = {}
   @state() private tabCount: number = 0
 
   private get useArrowNav(): boolean {
@@ -42,12 +43,30 @@ export class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
     }
   }
 
-  private registerTab(element: HTMLElement, index: number) {
+  private registerTab(element: HTMLElement, index: number, disabled = false) {
     this.tabRefs[index] = element as HTMLAnchorElement | HTMLButtonElement
+    this.disabledMap[index] = disabled
     this.tabCount = Math.max(this.tabCount, index + 1)
   }
 
+  private isTabDisabled(index: number): boolean {
+    return !!this.disabledMap[index]
+  }
+
+  private findEnabledIndex(startIndex: number, direction: -1 | 1): number | null {
+    let current = startIndex + direction
+
+    while (current >= 0 && current < this.tabCount) {
+      if (!this.isTabDisabled(current)) return current
+      current += direction
+    }
+
+    return null
+  }
+
   private handleClick(index: number) {
+    if (this.isTabDisabled(index)) return
+
     this.dispatchEvent(
       new CustomEvent('tab-selected', {
         detail: { index },
@@ -60,22 +79,26 @@ export class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
   private handleKeyUp(keyEvent: KeyboardEvent, index: number) {
     if (!this.useArrowNav) return
 
-    if (keyEvent.code === 'ArrowLeft' && index !== 0) {
-      this.tabRefs[index - 1]?.focus()
+    if (keyEvent.key === 'ArrowLeft') {
+      keyEvent.preventDefault()
+      const previousEnabled = this.findEnabledIndex(index, -1)
+      if (previousEnabled !== null) this.tabRefs[previousEnabled]?.focus()
     }
 
-    if (keyEvent.code === 'ArrowRight' && index < this.tabCount - 1) {
-      this.tabRefs[index + 1]?.focus()
+    if (keyEvent.key === 'ArrowRight') {
+      keyEvent.preventDefault()
+      const nextEnabled = this.findEnabledIndex(index, 1)
+      if (nextEnabled !== null) this.tabRefs[nextEnabled]?.focus()
     }
 
-    if (keyEvent.code === 'ArrowDown' || keyEvent.code === 'Space') {
-      this.dispatchEvent(
-        new CustomEvent('tab-selected', {
-          detail: { index },
-          bubbles: true,
-          composed: true,
-        }),
-      )
+    if (
+      keyEvent.key === 'Enter' ||
+      keyEvent.key === ' ' ||
+      keyEvent.key === 'Spacebar' ||
+      keyEvent.key === 'ArrowDown'
+    ) {
+      keyEvent.preventDefault()
+      this.handleClick(index)
     }
   }