@oslokommune/punkt-elements 13.7.0 → 13.9.0

package/CHANGELOG.md

@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.9.0](https://github.com/oslokommune/punkt/compare/13.8.1...13.9.0) (2025-10-17)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [13.8.0](https://github.com/oslokommune/punkt/compare/13.7.0...13.8.0) (2025-10-15)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.7.0](https://github.com/oslokommune/punkt/compare/13.6.16...13.7.0) (2025-10-14)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -308,6 +308,21 @@ declare interface IPktSelect {
     value: string;
 }
 
+export declare interface IPktTabItem {
+    active?: boolean;
+    href?: string;
+    icon?: string;
+    controls?: string;
+    tag?: string;
+    tagSkin?: TTabItemSkin;
+    index?: number;
+}
+
+export declare interface IPktTabs {
+    arrowNav?: boolean;
+    disableArrowNav?: boolean;
+}
+
 declare interface IPktTag {
     closeTag?: boolean;
     size?: TPktSize;
@@ -1051,12 +1066,12 @@ declare class PktListbox extends PktElement implements IPktListbox {
     updated(changedProperties: PropertyValues): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     render(): TemplateResult<1>;
-    renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number): TemplateResult<1> | typeof nothing;
+    renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number): typeof nothing | TemplateResult<1>;
     renderList(): TemplateResult<1>;
-    renderNewOptionBanner(): TemplateResult<1> | typeof nothing;
-    renderMaximumReachedBanner(): TemplateResult<1> | typeof nothing;
-    renderUserMessage(): TemplateResult<1> | typeof nothing;
-    renderSearch(): TemplateResult<1> | typeof nothing;
+    renderNewOptionBanner(): typeof nothing | TemplateResult<1>;
+    renderMaximumReachedBanner(): typeof nothing | TemplateResult<1>;
+    renderUserMessage(): typeof nothing | TemplateResult<1>;
+    renderSearch(): typeof nothing | TemplateResult<1>;
     handleSearchInput(e: InputEvent): void;
     handleSearchKeydown(e: KeyboardEvent): void;
     handleOptionKeydown(e: KeyboardEvent): void;
@@ -1251,6 +1266,42 @@ declare class PktSlotController implements ReactiveController {
     private handleSlotMutations;
 }
 
+export declare class PktTabItem extends PktElement<IPktTabItem> implements IPktTabItem {
+    active: boolean;
+    href: string;
+    icon: string;
+    controls: string;
+    tag: string;
+    tagSkin: TTabItemSkin;
+    index: number;
+    context?: TabsContext;
+    elementRef: Ref<HTMLAnchorElement | HTMLButtonElement>;
+    defaultSlot: Ref<HTMLElement>;
+    slotController: PktSlotController;
+    constructor();
+    connectedCallback(): void;
+    private handleClick;
+    private handleKeyUp;
+    render(): TemplateResult<1>;
+}
+
+export declare class PktTabs extends PktElement<IPktTabs> implements IPktTabs {
+    arrowNav: boolean;
+    disableArrowNav: boolean;
+    private tabRefs;
+    private tabCount;
+    private get useArrowNav();
+    defaultSlot: Ref<HTMLElement>;
+    slotController: PktSlotController;
+    constructor();
+    private context;
+    updated(changedProperties: PropertyValues): void;
+    private registerTab;
+    private handleClick;
+    private handleKeyUp;
+    render(): TemplateResult<1>;
+}
+
 export declare class PktTag extends PktElement<IPktTag> implements IPktTag {
     slotController: PktSlotController;
     defaultSlot: Ref<HTMLElement>;
@@ -1330,6 +1381,25 @@ declare type Props_8 = ElementProps<PktTextarea, 'autocomplete' | 'rows'>;
 
 declare type Props_9 = ElementProps<PktTextinput, 'value' | 'type' | 'size' | 'autocomplete' | 'iconNameRight' | 'prefix' | 'suffix' | 'omitSearchIcon'>;
 
+declare interface TabsContext {
+    /**
+     * Whether arrow navigation is enabled (computed from arrowNav && !disableArrowNav)
+     */
+    useArrowNav: boolean;
+    /**
+     * Register a tab item with the parent tabs container
+     */
+    registerTab: (element: HTMLElement, index: number) => void;
+    /**
+     * Handle click event from a tab item
+     */
+    handleClick: (index: number) => void;
+    /**
+     * Handle keyboard event from a tab item
+     */
+    handleKeyUp: (event: KeyboardEvent, index: number) => void;
+}
+
 declare type TAlertSkin = 'error' | 'success' | 'warning' | 'info';
 
 declare type TAriaAutoComplete = 'none' | 'inline' | 'list' | 'both';
@@ -1430,6 +1500,8 @@ export declare type TSelectOption = {
     hidden?: boolean;
 };
 
+export declare type TTabItemSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
+
 export declare type TTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey';
 
 export declare type TTagType = 'button' | 'reset' | 'submit';

package/dist/pkt-index.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-Ci7WvRXi.cjs"),l=require("./accordionitem-DCZrHVNR.cjs"),b=require("./backlink-BzEvli8m.cjs"),m=require("./button-CXJQ_Wgl.cjs"),P=require("./calendar-BaMrdMDZ.cjs"),g=require("./card-Cf-UcGAP.cjs"),h=require("./combobox-BJ1gA0f0.cjs"),f=require("./consent-BeOjxQdR.cjs"),y=require("./checkbox-CTxc8wQe.cjs"),t=require("./element-CJ_QKaki.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BFa5Utho.cjs"),j=require("./class-map-C_erArZz.cjs"),k=require("./datepicker-DVqmQAOe.cjs"),q=require("./helptext-CVQP3pis.cjs"),x=require("./heading--JKFppLS.cjs"),C=require("./icon-BGuizDwk.cjs"),v=require("./input-wrapper-BsQ7oFMd.cjs"),S=require("./link-Da3pZ_CW.cjs"),$=require("./linkcard-BM23gzhS.cjs"),L=require("./loader-Bo8RCbCJ.cjs"),T=require("./messagebox-C76IcXTl.cjs"),_=require("./modal-Cdz9JcCX.cjs"),A=require("./progressbar-CazcIzVT.cjs"),p=require("./radiobutton-D1fihs8R.cjs"),B=require("./tag-EFUKrc8q.cjs"),I=require("./textarea-aUG3S7C2.cjs"),D=require("./textinput-mUERucRy.cjs"),M=require("./select-D-m1PhpA.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
-      <div class="${j.e(e)}">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./alert-Ci7WvRXi.cjs"),l=require("./accordionitem-DCZrHVNR.cjs"),m=require("./backlink-BzEvli8m.cjs"),g=require("./button-CXJQ_Wgl.cjs"),P=require("./calendar-BaMrdMDZ.cjs"),h=require("./card-Cf-UcGAP.cjs"),f=require("./combobox-BJ1gA0f0.cjs"),y=require("./consent-BeOjxQdR.cjs"),O=require("./checkbox-CTxc8wQe.cjs"),t=require("./element-CJ_QKaki.cjs"),j=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BFa5Utho.cjs"),q=require("./class-map-C_erArZz.cjs"),k=require("./datepicker-DVqmQAOe.cjs"),x=require("./helptext-CVQP3pis.cjs"),C=require("./heading--JKFppLS.cjs"),v=require("./icon-BGuizDwk.cjs"),S=require("./input-wrapper-BsQ7oFMd.cjs"),T=require("./link-Da3pZ_CW.cjs"),$=require("./linkcard-BM23gzhS.cjs"),L=require("./loader-Bo8RCbCJ.cjs"),_=require("./messagebox-C76IcXTl.cjs"),I=require("./modal-Cdz9JcCX.cjs"),A=require("./progressbar-CazcIzVT.cjs"),p=require("./radiobutton-D1fihs8R.cjs"),B=require("./tag-EFUKrc8q.cjs"),d=require("./tabitem-D5zyipN1.cjs"),D=require("./textarea-aUG3S7C2.cjs"),M=require("./textinput-mUERucRy.cjs"),R=require("./select-D-m1PhpA.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new j.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+      <div class="${q.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
         <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:P.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>d.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>b.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>m.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>P.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>g.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>h.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>f.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>y.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>k.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>k.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>q.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>x.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>C.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>v.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>S.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>$.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>T.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>_.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>A.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>B.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>I.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>D.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>M.PktSelect});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:P.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>b.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>m.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>g.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>P.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>h.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>f.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>y.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>O.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>k.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>k.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>x.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>C.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>v.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>S.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>T.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>$.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>_.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>I.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>A.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>B.PktTag});exports.PktTabItem=d.PktTabItem;exports.PktTabs=d.PktTabs;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>D.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>M.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>R.PktSelect});

package/dist/pkt-index.js

@@ -1,14 +1,14 @@
-import { P as A } from "./alert-Dh1YhaBq.js";
-import { P as w, a as B } from "./accordionitem-C_URrDjP.js";
-import { P as E } from "./backlink-CI_jMGzZ.js";
+import { P as T } from "./alert-Dh1YhaBq.js";
+import { P as I, a as w } from "./accordionitem-C_URrDjP.js";
+import { P as D } from "./backlink-CI_jMGzZ.js";
 import { P as O } from "./button-CCFAUJa0.js";
-import { c as d } from "./calendar-DtJh7UYD.js";
+import { c as f } from "./calendar-DtJh7UYD.js";
 import { P as j } from "./calendar-DtJh7UYD.js";
 import { P as G } from "./card-M1X36b6i.js";
 import { P as K } from "./combobox-Ct0NNY1p.js";
 import { P as U } from "./consent-B2hIQh4b.js";
 import { P as q } from "./checkbox-_5LbXU7N.js";
-import { P as f, t as h, x as P, n, a as c } from "./element-CRDRygXu.js";
+import { P as d, t as h, x as P, n, a as c } from "./element-CRDRygXu.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as m, n as k } from "./ref-Xa5dbh--.js";
 import { e as u } from "./class-map-wy7PUk0P.js";
@@ -22,18 +22,19 @@ import { P as nt } from "./linkcard-RIK5xqbd.js";
 import { P as pt } from "./loader-BVvBzaPI.js";
 import { P as Pt } from "./messagebox-DwdMXoAe.js";
 import { P as kt } from "./modal-BGXk3f9u.js";
-import { P as ft } from "./progressbar-BbVei20_.js";
+import { P as dt } from "./progressbar-BbVei20_.js";
 import { P as ct, P as xt } from "./radiobutton-DODROIBF.js";
 import { P as gt } from "./tag-CqMgt01I.js";
-import { P as St } from "./textarea-DCKKhs1B.js";
-import { P as Ct } from "./textinput-B5Ai5R8L.js";
-import { P as yt } from "./select-BG2MBQbh.js";
+import { a as bt, P as St } from "./tabitem-NV2fzs_-.js";
+import { P as $t } from "./textarea-DCKKhs1B.js";
+import { P as _t } from "./textinput-B5Ai5R8L.js";
+import { P as Tt } from "./select-BG2MBQbh.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
   return a && r && g(e, i, r), r;
 };
-let o = class extends f {
+let o = class extends d {
   constructor() {
     super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
@@ -108,7 +109,7 @@ s([
   n({ type: String })
 ], o.prototype, "string", 2);
 s([
-  n({ converter: d })
+  n({ converter: f })
 ], o.prototype, "strings", 2);
 s([
   n({ type: Boolean })
@@ -120,10 +121,10 @@ o = s([
   c("pkt-component")
 ], o);
 export {
-  w as PktAccordion,
-  B as PktAccordionItem,
-  A as PktAlert,
-  E as PktBackLink,
+  I as PktAccordion,
+  w as PktAccordionItem,
+  T as PktAlert,
+  D as PktBackLink,
   O as PktButton,
   j as PktCalendar,
   G as PktCard,
@@ -142,11 +143,13 @@ export {
   pt as PktLoader,
   Pt as PktMessagebox,
   kt as PktModal,
-  ft as PktProgressbar,
+  dt as PktProgressbar,
   ct as PktRadioButton,
   xt as PktRadiobutton,
-  yt as PktSelect,
+  Tt as PktSelect,
+  bt as PktTabItem,
+  St as PktTabs,
   gt as PktTag,
-  St as PktTextarea,
-  Ct as PktTextinput
+  $t as PktTextarea,
+  _t as PktTextinput
 };

package/dist/pkt-tabs.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tabitem-D5zyipN1.cjs");exports.PktTabItem=e.PktTabItem;exports.PktTabs=e.PktTabs;exports.default=e.PktTabs;

package/dist/pkt-tabs.js

@@ -0,0 +1,7 @@
+import { P as t } from "./tabitem-NV2fzs_-.js";
+import { a as e } from "./tabitem-NV2fzs_-.js";
+export {
+  e as PktTabItem,
+  t as PktTabs,
+  t as default
+};

package/dist/tabitem-D5zyipN1.cjs

@@ -0,0 +1,65 @@
+"use strict";const a=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),v=require("./state-DSjcvzDN.cjs"),p=require("./ref-BFa5Utho.cjs"),u=require("./if-defined-Bc9-_I01.cjs");/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let C=class extends Event{constructor(t,s,i,e){super("context-request",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=s,this.callback=i,this.subscribe=e??!1}};/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ *//**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let k=class{constructor(t,s,i,e){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(n,r)=>{this.unsubscribe&&(this.unsubscribe!==r&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=n,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(n,r)),this.unsubscribe=r},this.host=t,s.context!==void 0){const n=s;this.context=n.context,this.callback=n.callback,this.subscribe=n.subscribe??!1}else this.context=s,this.callback=i,this.subscribe=e??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new C(this.context,this.host,this.t,this.subscribe))}};/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class ${get value(){return this.o}set value(t){this.setValue(t)}setValue(t,s=!1){const i=s||!Object.is(t,this.o);this.o=t,i&&this.updateObservers()}constructor(t){this.subscriptions=new Map,this.updateObservers=()=>{for(const[s,{disposer:i}]of this.subscriptions)s(this.o,i)},t!==void 0&&(this.value=t)}addCallback(t,s,i){if(!i)return void t(this.value);this.subscriptions.has(t)||this.subscriptions.set(t,{disposer:()=>{this.subscriptions.delete(t)},consumerHost:s});const{disposer:e}=this.subscriptions.get(t);t(this.value,e)}clearCallbacks(){this.subscriptions.clear()}}/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let m=class extends Event{constructor(t,s){super("context-provider",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=s}};class w extends ${constructor(t,s,i){var e,n;super(s.context!==void 0?s.initialValue:i),this.onContextRequest=r=>{if(r.context!==this.context)return;const c=r.contextTarget??r.composedPath()[0];c!==this.host&&(r.stopPropagation(),this.addCallback(r.callback,c,r.subscribe))},this.onProviderRequest=r=>{if(r.context!==this.context||(r.contextTarget??r.composedPath()[0])===this.host)return;const c=new Set;for(const[f,{consumerHost:x}]of this.subscriptions)c.has(f)||(c.add(f),x.dispatchEvent(new C(this.context,x,f,!0)));r.stopPropagation()},this.host=t,s.context!==void 0?this.context=s.context:this.context=s,this.attachListeners(),(n=(e=this.host).addController)==null||n.call(e,this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new m(this.context,this.host))}}/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function P({context:o}){return(t,s)=>{const i=new WeakMap;if(typeof s=="object")return{get(){return t.get.call(this)},set(e){return i.get(this).setValue(e),t.set.call(this,e)},init(e){return i.set(this,new w(this,{context:o,initialValue:e})),e}};{t.constructor.addInitializer((r=>{i.set(r,new w(r,{context:o}))}));const e=Object.getOwnPropertyDescriptor(t,s);let n;if(e===void 0){const r=new WeakMap;n={get(){return r.get(this)},set(c){i.get(this).setValue(c),r.set(this,c)},configurable:!0,enumerable:!0}}else{const r=e.set;n={...e,set(c){i.get(this).setValue(c),r==null||r.call(this,c)}}}return void Object.defineProperty(t,s,n)}}}/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function S({context:o,subscribe:t}){return(s,i)=>{typeof i=="object"?i.addInitializer((function(){new k(this,{context:o,callback:e=>{s.set.call(this,e)},subscribe:t})})):s.constructor.addInitializer((e=>{new k(e,{context:o,callback:n=>{e[i]=n},subscribe:t})}))}}const y=Symbol("pkt-tabs-context");var N=Object.defineProperty,_=Object.getOwnPropertyDescriptor,d=(o,t,s,i)=>{for(var e=i>1?void 0:i?_(t,s):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(e=(i?r(t,s,e):r(e))||e);return i&&e&&N(t,s,e),e};let b=class extends a.PktElement{constructor(){super(),this.arrowNav=!0,this.disableArrowNav=!1,this.tabRefs=[],this.tabCount=0,this.defaultSlot=p.e(),this.context={useArrowNav:this.useArrowNav,registerTab:this.registerTab.bind(this),handleClick:this.handleClick.bind(this),handleKeyUp:this.handleKeyUp.bind(this)},this.slotController=new g.PktSlotController(this,this.defaultSlot)}get useArrowNav(){return this.arrowNav&&!this.disableArrowNav}updated(o){(o.has("arrowNav")||o.has("disableArrowNav"))&&(this.context={...this.context,useArrowNav:this.useArrowNav})}registerTab(o,t){this.tabRefs[t]=o,this.tabCount=Math.max(this.tabCount,t+1)}handleClick(o){this.dispatchEvent(new CustomEvent("tab-selected",{detail:{index:o},bubbles:!0,composed:!0}))}handleKeyUp(o,t){var s,i;this.useArrowNav&&(o.code==="ArrowLeft"&&t!==0&&((s=this.tabRefs[t-1])==null||s.focus()),o.code==="ArrowRight"&&t<this.tabCount-1&&((i=this.tabRefs[t+1])==null||i.focus()),(o.code==="ArrowDown"||o.code==="Space")&&this.dispatchEvent(new CustomEvent("tab-selected",{detail:{index:t},bubbles:!0,composed:!0})))}render(){const o=this.useArrowNav?"tablist":"navigation";return a.x`
+      <div class="pkt-tabs">
+        <div class="pkt-tabs__list" role=${o} ${p.n(this.defaultSlot)}></div>
+      </div>
+    `}};d([a.n({type:Boolean,reflect:!0,attribute:"arrow-nav"})],b.prototype,"arrowNav",2);d([a.n({type:Boolean,reflect:!0,attribute:"disable-arrow-nav"})],b.prototype,"disableArrowNav",2);d([v.r()],b.prototype,"tabRefs",2);d([v.r()],b.prototype,"tabCount",2);d([P({context:y}),v.r()],b.prototype,"context",2);b=d([a.t("pkt-tabs")],b);const R=b;var A=Object.defineProperty,q=Object.getOwnPropertyDescriptor,l=(o,t,s,i)=>{for(var e=i>1?void 0:i?q(t,s):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(e=(i?r(t,s,e):r(e))||e);return i&&e&&A(t,s,e),e};let h=class extends a.PktElement{constructor(){super(),this.active=!1,this.href="",this.icon="",this.controls="",this.tag="",this.tagSkin="blue",this.index=0,this.elementRef=p.e(),this.defaultSlot=p.e(),this.slotController=new g.PktSlotController(this,this.defaultSlot)}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(o){this.context&&this.context.handleKeyUp(o,this.index)}render(){var r;const o=((r=this.context)==null?void 0:r.useArrowNav)??!0,t=this.active?"active":"",s=o?"tab":void 0,i=o?this.active:void 0,e=this.active||!o?void 0:-1,n=a.x`
+      ${this.icon?a.x`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>`:""}
+      <span ${p.n(this.defaultSlot)}></span>
+      ${this.tag?a.x`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>`:""}
+    `;return this.href?a.x`
+        <a
+          ${p.n(this.elementRef)}
+          href=${this.href}
+          class="pkt-tabs__link ${t}"
+          role=${u.o(s)}
+          aria-selected=${u.o(i)}
+          aria-controls=${u.o(this.controls||void 0)}
+          tabindex=${u.o(e)}
+          @click=${this.handleClick}
+          @keyup=${this.handleKeyUp}
+        >
+          ${n}
+        </a>
+      `:a.x`
+      <button
+        ${p.n(this.elementRef)}
+        type="button"
+        class="pkt-tabs__button pkt-link-button ${t}"
+        role=${u.o(s)}
+        aria-selected=${u.o(i)}
+        aria-controls=${u.o(this.controls||void 0)}
+        tabindex=${u.o(e)}
+        @click=${this.handleClick}
+        @keyup=${this.handleKeyUp}
+      >
+        ${n}
+      </button>
+    `}};l([a.n({type:Boolean,reflect:!0})],h.prototype,"active",2);l([a.n({type:String,reflect:!0})],h.prototype,"href",2);l([a.n({type:String,reflect:!0})],h.prototype,"icon",2);l([a.n({type:String,reflect:!0})],h.prototype,"controls",2);l([a.n({type:String,reflect:!0})],h.prototype,"tag",2);l([a.n({type:String,reflect:!0,attribute:"tag-skin"})],h.prototype,"tagSkin",2);l([a.n({type:Number,reflect:!0})],h.prototype,"index",2);l([S({context:y,subscribe:!0}),a.n({attribute:!1})],h.prototype,"context",2);h=l([a.t("pkt-tab-item")],h);const O=h;exports.PktTabItem=O;exports.PktTabs=R;