@oslokommune/punkt-elements 13.8.0 → 13.9.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ 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

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;
@@ -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;

package/dist/tabitem-NV2fzs_-.js

@@ -0,0 +1,332 @@
+import { P as $, x as p, n as h, a as y } from "./element-CRDRygXu.js";
+import { P as C } from "./pkt-slot-controller-BPGj-LC5.js";
+import { r as w } from "./state-DS_kr2Fy.js";
+import { e as x, n as f } from "./ref-Xa5dbh--.js";
+import { o as u } from "./if-defined-BWZGb3bh.js";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let P = 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 m = class {
+  constructor(t, s, i, e) {
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (a, r) => {
+      this.unsubscribe && (this.unsubscribe !== r && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = a, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(a, r)), this.unsubscribe = r;
+    }, this.host = t, s.context !== void 0) {
+      const a = s;
+      this.context = a.context, this.callback = a.callback, this.subscribe = a.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 P(this.context, this.host, this.t, this.subscribe));
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class N {
+  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 = /* @__PURE__ */ 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 _ = class extends Event {
+  constructor(t, s) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s;
+  }
+};
+class g extends N {
+  constructor(t, s, i) {
+    var e, a;
+    super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (r) => {
+      if (r.context !== this.context) return;
+      const n = r.contextTarget ?? r.composedPath()[0];
+      n !== this.host && (r.stopPropagation(), this.addCallback(r.callback, n, r.subscribe));
+    }, this.onProviderRequest = (r) => {
+      if (r.context !== this.context || (r.contextTarget ?? r.composedPath()[0]) === this.host) return;
+      const n = /* @__PURE__ */ new Set();
+      for (const [v, { consumerHost: k }] of this.subscriptions) n.has(v) || (n.add(v), k.dispatchEvent(new P(this.context, k, v, !0)));
+      r.stopPropagation();
+    }, this.host = t, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), (a = (e = this.host).addController) == null || a.call(e, this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new _(this.context, this.host));
+  }
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function R({ context: o }) {
+  return (t, s) => {
+    const i = /* @__PURE__ */ 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 g(this, { context: o, initialValue: e })), e;
+    } };
+    {
+      t.constructor.addInitializer(((r) => {
+        i.set(r, new g(r, { context: o }));
+      }));
+      const e = Object.getOwnPropertyDescriptor(t, s);
+      let a;
+      if (e === void 0) {
+        const r = /* @__PURE__ */ new WeakMap();
+        a = { get() {
+          return r.get(this);
+        }, set(n) {
+          i.get(this).setValue(n), r.set(this, n);
+        }, configurable: !0, enumerable: !0 };
+      } else {
+        const r = e.set;
+        a = { ...e, set(n) {
+          i.get(this).setValue(n), r == null || r.call(this, n);
+        } };
+      }
+      return void Object.defineProperty(t, s, a);
+    }
+  };
+}
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function A({ context: o, subscribe: t }) {
+  return (s, i) => {
+    typeof i == "object" ? i.addInitializer((function() {
+      new m(this, { context: o, callback: (e) => {
+        s.set.call(this, e);
+      }, subscribe: t });
+    })) : s.constructor.addInitializer(((e) => {
+      new m(e, { context: o, callback: (a) => {
+        e[i] = a;
+      }, subscribe: t });
+    }));
+  };
+}
+const S = Symbol("pkt-tabs-context");
+var O = Object.defineProperty, T = Object.getOwnPropertyDescriptor, d = (o, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? T(t, s) : t, a = o.length - 1, r; a >= 0; a--)
+    (r = o[a]) && (e = (i ? r(t, s, e) : r(e)) || e);
+  return i && e && O(t, s, e), e;
+};
+let b = class extends $ {
+  constructor() {
+    super(), this.arrowNav = !0, this.disableArrowNav = !1, this.tabRefs = [], this.tabCount = 0, this.defaultSlot = x(), this.context = {
+      useArrowNav: this.useArrowNav,
+      registerTab: this.registerTab.bind(this),
+      handleClick: this.handleClick.bind(this),
+      handleKeyUp: this.handleKeyUp.bind(this)
+    }, this.slotController = new C(this, this.defaultSlot);
+  }
+  get useArrowNav() {
+    return this.arrowNav && !this.disableArrowNav;
+  }
+  // Update context when properties change
+  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 p`
+      <div class="pkt-tabs">
+        <div class="pkt-tabs__list" role=${o} ${f(this.defaultSlot)}></div>
+      </div>
+    `;
+  }
+};
+d([
+  h({ type: Boolean, reflect: !0, attribute: "arrow-nav" })
+], b.prototype, "arrowNav", 2);
+d([
+  h({ type: Boolean, reflect: !0, attribute: "disable-arrow-nav" })
+], b.prototype, "disableArrowNav", 2);
+d([
+  w()
+], b.prototype, "tabRefs", 2);
+d([
+  w()
+], b.prototype, "tabCount", 2);
+d([
+  R({ context: S }),
+  w()
+], b.prototype, "context", 2);
+b = d([
+  y("pkt-tabs")
+], b);
+const M = b;
+var j = Object.defineProperty, q = Object.getOwnPropertyDescriptor, l = (o, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? q(t, s) : t, a = o.length - 1, r; a >= 0; a--)
+    (r = o[a]) && (e = (i ? r(t, s, e) : r(e)) || e);
+  return i && e && j(t, s, e), e;
+};
+let c = class extends $ {
+  constructor() {
+    super(), this.active = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = x(), this.defaultSlot = x(), this.slotController = new C(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, a = p`
+      ${this.icon ? p`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ""}
+      <span ${f(this.defaultSlot)}></span>
+      ${this.tag ? p`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
+    `;
+    return this.href ? p`
+        <a
+          ${f(this.elementRef)}
+          href=${this.href}
+          class="pkt-tabs__link ${t}"
+          role=${u(s)}
+          aria-selected=${u(i)}
+          aria-controls=${u(this.controls || void 0)}
+          tabindex=${u(e)}
+          @click=${this.handleClick}
+          @keyup=${this.handleKeyUp}
+        >
+          ${a}
+        </a>
+      ` : p`
+      <button
+        ${f(this.elementRef)}
+        type="button"
+        class="pkt-tabs__button pkt-link-button ${t}"
+        role=${u(s)}
+        aria-selected=${u(i)}
+        aria-controls=${u(this.controls || void 0)}
+        tabindex=${u(e)}
+        @click=${this.handleClick}
+        @keyup=${this.handleKeyUp}
+      >
+        ${a}
+      </button>
+    `;
+  }
+};
+l([
+  h({ type: Boolean, reflect: !0 })
+], c.prototype, "active", 2);
+l([
+  h({ type: String, reflect: !0 })
+], c.prototype, "href", 2);
+l([
+  h({ type: String, reflect: !0 })
+], c.prototype, "icon", 2);
+l([
+  h({ type: String, reflect: !0 })
+], c.prototype, "controls", 2);
+l([
+  h({ type: String, reflect: !0 })
+], c.prototype, "tag", 2);
+l([
+  h({ type: String, reflect: !0, attribute: "tag-skin" })
+], c.prototype, "tagSkin", 2);
+l([
+  h({ type: Number, reflect: !0 })
+], c.prototype, "index", 2);
+l([
+  A({ context: S, subscribe: !0 }),
+  h({ attribute: !1 })
+], c.prototype, "context", 2);
+c = l([
+  y("pkt-tab-item")
+], c);
+const B = c;
+export {
+  M as P,
+  B as a
+};

package/dist/tabs.d.ts

@@ -0,0 +1 @@
+export { }