@oslokommune/punkt-elements 12.3.9 → 12.3.11

package/dist/pkt-element.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DZGlpxj6.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-cmcwixge.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;

package/dist/pkt-element.js

@@ -1,4 +1,4 @@
-import { P as a, a as m } from "./index-BoxUN9GL.js";
+import { P as a, a as m } from "./index-DFB6cAPd.js";
 export {
   a as PktElement,
   m as PktInputElement

package/dist/pkt-icon.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-DZGlpxj6.cjs");require("./directive-19_ixLKS.cjs");const e=require("./index-DZ0cjZdG.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-cmcwixge.cjs");require("./directive-19_ixLKS.cjs");const e=require("./index-BGPEwMZQ.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});

package/dist/pkt-icon.js

@@ -1,6 +1,6 @@
-import "./index-BoxUN9GL.js";
+import "./index-DFB6cAPd.js";
 import "./directive-DA0-wdk7.js";
-import { P as p } from "./index-CsKoXqeT.js";
+import { P as p } from "./index-BtB1fCeq.js";
 export {
   p as PktIcon
 };

package/dist/pkt-index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-ZXmkp0To.cjs"),t=require("./pkt-card.cjs"),r=require("./pkt-component-template.cjs"),n=require("./pkt-datepicker.cjs"),o=require("./index-DZ0cjZdG.cjs"),a=require("./pkt-input-wrapper.cjs"),u=require("./pkt-link.cjs"),c=require("./pkt-messagebox.cjs"),i=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>t.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>r.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>n.PktDatepicker});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>o.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>a.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>u.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>c.PktMessagebox});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>i.PktTag});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Bfdr5FsZ.cjs"),t=require("./pkt-card.cjs"),r=require("./pkt-component-template.cjs"),n=require("./pkt-datepicker.cjs"),o=require("./index-BGPEwMZQ.cjs"),a=require("./pkt-input-wrapper.cjs"),u=require("./pkt-link.cjs"),c=require("./pkt-messagebox.cjs"),i=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>t.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>r.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>n.PktDatepicker});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>o.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>a.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>u.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>c.PktMessagebox});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>i.PktTag});

package/dist/pkt-index.js

@@ -1,8 +1,8 @@
-import { P as t } from "./index-CiTPWPc2.js";
+import { P as t } from "./index-erLPjF21.js";
 import { PktCard as p } from "./pkt-card.js";
 import { PktComponent as P } from "./pkt-component-template.js";
 import { PktDatepicker as x } from "./pkt-datepicker.js";
-import { P as f } from "./index-CsKoXqeT.js";
+import { P as f } from "./index-BtB1fCeq.js";
 import { PktInputWrapper as s } from "./pkt-input-wrapper.js";
 import { PktLink as c } from "./pkt-link.js";
 import { PktMessagebox as g } from "./pkt-messagebox.js";

package/dist/pkt-input-wrapper.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DZGlpxj6.cjs"),f=require("./ref-G2cIenWo.cjs"),c=require("./index-DZ0cjZdG.cjs"),u=require("./class-map-CFiVus5w.cjs"),$=require("./directive-19_ixLKS.cjs");/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-cmcwixge.cjs"),f=require("./ref-CRbDaFY5.cjs"),c=require("./index-BGPEwMZQ.cjs"),u=require("./class-map-D5yOTE4V.cjs"),$=require("./directive-19_ixLKS.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/pkt-input-wrapper.js

@@ -1,7 +1,7 @@
-import { P as w, v as T, D as o, k as i, n as r } from "./index-BoxUN9GL.js";
-import { i as _, P as D, K as I } from "./ref-DzpbHCb_.js";
-import { a as f } from "./index-CsKoXqeT.js";
-import { R as c } from "./class-map-DnAEF9tj.js";
+import { P as w, v as T, D as o, k as i, n as r } from "./index-DFB6cAPd.js";
+import { i as _, P as D, K as I } from "./ref-ClWSy3zg.js";
+import { a as f } from "./index-BtB1fCeq.js";
+import { R as c } from "./class-map-CQf6i-xX.js";
 import { t as S } from "./directive-DA0-wdk7.js";
 /**
  * @license

package/dist/pkt-link.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DZGlpxj6.cjs"),c=require("./ref-G2cIenWo.cjs"),k=require("./class-map-CFiVus5w.cjs"),h=require("./directive-19_ixLKS.cjs");require("./index-DZ0cjZdG.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},p={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.ii(),this.href=p.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=p.props.external.default,this.target=p.props.target.default,this.slotController=new c.PktSlotController(this,this.defaultSlot)}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return e.ke`<a
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-cmcwixge.cjs"),c=require("./ref-CRbDaFY5.cjs"),k=require("./class-map-D5yOTE4V.cjs"),h=require("./directive-19_ixLKS.cjs");require("./index-BGPEwMZQ.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},p={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.ii(),this.href=p.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=p.props.external.default,this.target=p.props.target.default,this.slotController=new c.PktSlotController(this,this.defaultSlot)}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return e.ke`<a
       class=${k.Rt(n)}
       href=${this.href}
       @click=${this.handleClick}

package/dist/pkt-link.js

@@ -1,8 +1,8 @@
-import { P as f, k, D as h, n as i } from "./index-BoxUN9GL.js";
-import { i as m, P as d, K as u } from "./ref-DzpbHCb_.js";
-import { R as P } from "./class-map-DnAEF9tj.js";
+import { P as f, k, D as h, n as i } from "./index-DFB6cAPd.js";
+import { i as m, P as d, K as u } from "./ref-ClWSy3zg.js";
+import { R as P } from "./class-map-CQf6i-xX.js";
 import { t as y } from "./directive-DA0-wdk7.js";
-import "./index-CsKoXqeT.js";
+import "./index-BtB1fCeq.js";
 const g = "pkt-link", v = !0, _ = {
   href: {
     name: "URL",

package/dist/pkt-messagebox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DZGlpxj6.cjs"),c=require("./ref-G2cIenWo.cjs"),p=require("./class-map-CFiVus5w.cjs"),b=require("./directive-19_ixLKS.cjs");require("./index-DZ0cjZdG.cjs");var k=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,o,r,l)=>{for(var t=l>1?void 0:l?u(o,r):o,a=i.length-1,n;a>=0;a--)(n=i[a])&&(t=(l?n(o,r,t):n(t))||t);return l&&t&&k(o,r,t),t};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.ii(),this.closable=!1,this.compact=!1,this.title="",this.skin="beige",this.isDisplayed=!0,this.slotController=new c.PktSlotController(this,this.defaultSlot)}handleClose(){this.isDisplayed=!1,this.onClose&&this.onClose()}render(){const o={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable};return this.isDisplayed?e.ke`<div class=${p.Rt(o)}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-cmcwixge.cjs"),c=require("./ref-CRbDaFY5.cjs"),p=require("./class-map-D5yOTE4V.cjs"),b=require("./directive-19_ixLKS.cjs");require("./index-BGPEwMZQ.cjs");var k=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,o,r,l)=>{for(var t=l>1?void 0:l?u(o,r):o,a=i.length-1,n;a>=0;a--)(n=i[a])&&(t=(l?n(o,r,t):n(t))||t);return l&&t&&k(o,r,t),t};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.ii(),this.closable=!1,this.compact=!1,this.title="",this.skin="beige",this.isDisplayed=!0,this.slotController=new c.PktSlotController(this,this.defaultSlot)}handleClose(){this.isDisplayed=!1,this.onClose&&this.onClose()}render(){const o={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable};return this.isDisplayed?e.ke`<div class=${p.Rt(o)}>
       ${this.closable?e.ke`<div class="pkt-messagebox__close">
             <button
               @click=${this.handleClose}

package/dist/pkt-messagebox.js

@@ -1,8 +1,8 @@
-import { P as m, D as c, k as h, n as o } from "./index-BoxUN9GL.js";
-import { i as b, P as f, K as k } from "./ref-DzpbHCb_.js";
-import { R as u } from "./class-map-DnAEF9tj.js";
+import { P as m, D as c, k as h, n as o } from "./index-DFB6cAPd.js";
+import { i as b, P as f, K as k } from "./ref-ClWSy3zg.js";
+import { R as u } from "./class-map-CQf6i-xX.js";
 import { t as y } from "./directive-DA0-wdk7.js";
-import "./index-CsKoXqeT.js";
+import "./index-BtB1fCeq.js";
 var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (l, i, p, r) => {
   for (var e = r > 1 ? void 0 : r ? v(i, p) : i, a = l.length - 1, n; a >= 0; a--)
     (n = l[a]) && (e = (r ? n(i, p, e) : n(e)) || e);

package/dist/pkt-tag.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-CFiVus5w.cjs"),g=require("./directive-19_ixLKS.cjs"),t=require("./index-DZGlpxj6.cjs"),o=require("./ref-G2cIenWo.cjs");require("./index-DZ0cjZdG.cjs");const h="pkt-tag",k={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"string",required:!1},skin:{required:!1,default:"blue",type:["blue","green","red","beige","yellow","gray","blue-light"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"close"}},f={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",props:k,slots:f};var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,e=(n,s,r,l)=>{for(var i=l>1?void 0:l?y(s,r):s,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(l?c(s,r,i):c(i))||i);return l&&i&&d(s,r,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.ii(),this.closeTag=a.props.closeTag.default,this.size=a.props.size.default,this.skin=a.props.skin.default,this.textStyle=a.props.textStyle.default,this.iconName=void 0,this.type=a.props.type.default,this.ariaLabel=a.props.ariaLabel.default,this._isClosed=!1,this.close=s=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("onClose",{detail:{origin:s},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const s={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},r={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName};return this.closeTag?this._isClosed?t.D:t.ke`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-D5yOTE4V.cjs"),g=require("./directive-19_ixLKS.cjs"),t=require("./index-cmcwixge.cjs"),o=require("./ref-CRbDaFY5.cjs");require("./index-BGPEwMZQ.cjs");const h="pkt-tag",k={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"string",required:!1},skin:{required:!1,default:"blue",type:["blue","green","red","beige","yellow","gray","blue-light"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"close"}},f={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",props:k,slots:f};var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,e=(n,s,r,l)=>{for(var i=l>1?void 0:l?y(s,r):s,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(l?c(s,r,i):c(i))||i);return l&&i&&d(s,r,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.ii(),this.closeTag=a.props.closeTag.default,this.size=a.props.size.default,this.skin=a.props.skin.default,this.textStyle=a.props.textStyle.default,this.iconName=void 0,this.type=a.props.type.default,this.ariaLabel=a.props.ariaLabel.default,this._isClosed=!1,this.close=s=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("onClose",{detail:{origin:s},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const s={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},r={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName};return this.closeTag?this._isClosed?t.D:t.ke`
             <button
               class=${u.Rt(r)}
               type=${this.type}

package/dist/pkt-tag.js

@@ -1,8 +1,8 @@
-import { R as h } from "./class-map-DnAEF9tj.js";
+import { R as h } from "./class-map-CQf6i-xX.js";
 import { t as y } from "./directive-DA0-wdk7.js";
-import { r as d, P as g, k as p, D as k, n as i } from "./index-BoxUN9GL.js";
-import { i as m, P as b, K as f } from "./ref-DzpbHCb_.js";
-import "./index-CsKoXqeT.js";
+import { r as d, P as g, k as p, D as k, n as i } from "./index-DFB6cAPd.js";
+import { i as m, P as b, K as f } from "./ref-ClWSy3zg.js";
+import "./index-BtB1fCeq.js";
 const S = "pkt-tag", _ = {
   closeTag: {
     type: "boolean",

package/dist/{ref-G2cIenWo.cjs → ref-CRbDaFY5.cjs}

@@ -1,4 +1,4 @@
-"use strict";const a=require("./index-DZGlpxj6.cjs"),$=require("./directive-19_ixLKS.cjs");class p{constructor(e,...s){this.nodes=[],this.host=e,this.host.addController(this),this.slots=s,this.nodes=[]}hostConnected(){Array.from(this.host.childNodes).forEach(e=>{var s;if(e.nodeName==="#text"){if((s=e.nodeValue)!=null&&s.trim()){const i=document==null?void 0:document.createElement("template");i.content.appendChild(e),this.nodes.push(i)}}else this.nodes.push(e)})}hostUpdated(){this.slots.forEach(e=>{if(!e.value)return;const s=e.value.getAttribute("name"),i=this.nodes.flatMap(n=>n.getAttribute&&n.getAttribute("slot")==s?this.nodeFromElement(n,e):[]);i.length&&e.value.replaceChildren(...i)})}nodeFromElement(e,s){var i;return e===((i=s.value)==null?void 0:i.parentNode)?[]:e instanceof HTMLTemplateElement?Array.from(e.content.childNodes):e}}/**
+"use strict";const a=require("./index-cmcwixge.cjs"),$=require("./directive-19_ixLKS.cjs");class p{constructor(e,...s){this.nodes=[],this.host=e,this.host.addController(this),this.slots=s,this.nodes=[]}hostConnected(){Array.from(this.host.childNodes).forEach(e=>{var s;if(e.nodeName==="#text"){if((s=e.nodeValue)!=null&&s.trim()){const i=document==null?void 0:document.createElement("template");i.content.appendChild(e),this.nodes.push(i)}}else this.nodes.push(e)})}hostUpdated(){this.slots.forEach(e=>{if(!e.value)return;const s=e.value.getAttribute("name"),i=this.nodes.flatMap(n=>n.getAttribute&&n.getAttribute("slot")==s?this.nodeFromElement(n,e):[]);i.length&&e.value.replaceChildren(...i)})}nodeFromElement(e,s){var i;return e===((i=s.value)==null?void 0:i.parentNode)?[]:e instanceof HTMLTemplateElement?Array.from(e.content.childNodes):e}}/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{ref-DzpbHCb_.js → ref-ClWSy3zg.js}

@@ -1,4 +1,4 @@
-import { s as p, D as _ } from "./index-BoxUN9GL.js";
+import { s as p, D as _ } from "./index-DFB6cAPd.js";
 import { i as v, a as m, e as g } from "./directive-DA0-wdk7.js";
 class H {
   constructor(e, ...s) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.3.9",
+  "version": "12.3.11",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.1.0",
-    "@oslokommune/punkt-css": "^12.3.4",
+    "@oslokommune/punkt-css": "^12.3.10",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "794e48054ce7da8965056cca1d34a731d5edc318"
+  "gitHead": "cab2d7b27cf3ba82a6ab36ca5b119a533e027a54"
 }

package/src/components/calendar/index.ts

@@ -621,6 +621,24 @@ export class PktCalendar extends PktElement {
     return Promise.resolve()
   }
 
+  public focusOnCurrentDate() {
+    const currentDateISO = this.formatISODate(new Date())
+    const el = this.querySelector(`div[data-date="${currentDateISO}"]`)
+    if (el instanceof HTMLDivElement) {
+      el.focus()
+    } else {
+      const firstSelectable = this.selectableDates.find((x) => !x.isDisabled)
+      if (firstSelectable) {
+        const firstSelectableEl = this.querySelector(
+          `div[data-date="${firstSelectable.currentDateISO}"]`,
+        )
+        if (firstSelectableEl instanceof HTMLDivElement) {
+          firstSelectableEl.focus()
+        }
+      }
+    }
+  }
+
   public closeEvent(e: FocusEvent) {
     if (!this.contains(e.relatedTarget as Node)) {
       this.close()

package/src/components/datepicker/index.ts

@@ -79,6 +79,12 @@ export class PktDatepicker extends PktInputElement {
 
   async connectedCallback() {
     super.connectedCallback()
+
+    this.isMobileSafari =
+      /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+      !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
+    this.inputType = this.isMobileSafari ? 'text' : 'date'
+
     document &&
       document.body.addEventListener('click', (e: MouseEvent) => {
         if (
@@ -226,7 +232,7 @@ export class PktDatepicker extends PktInputElement {
     return html`
       <input
         class="${classMap(this.inputClasses)}"
-        type="date"
+        .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ''}
         min=${this.min}
@@ -236,7 +242,23 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         ?disabled=${this.disabled}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === ',' || e.key === 'Enter') {
+            this.inputRef.value?.blur()
+          }
+        }}
+        @input=${(e: Event) => {
+          this.onInput()
+          e.stopImmediatePropagation()
+        }}
+        @focus=${() => {
+          this.onFocus()
+          if (this.isMobileSafari) {
+            this.showCalendar()
+          }
+        }}
         @blur=${(e: Event) => {
+          this.onBlur()
           this.manageValidity(e.target as HTMLInputElement)
           this.value = (e.target as HTMLInputElement).value
         }}
@@ -253,7 +275,7 @@ export class PktDatepicker extends PktInputElement {
       <div class="pkt-input-prefix">Fra</div>
       <input
         class=${classMap(this.inputClasses)}
-        type="date"
+        .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ''}
         min=${this.min}
@@ -263,6 +285,21 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         ?disabled=${this.disabled}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === ',' || e.key === 'Enter') {
+            this.inputRef.value?.blur()
+          }
+        }}
+        @input=${(e: Event) => {
+          this.onInput()
+          e.stopImmediatePropagation()
+        }}
+        @focus=${() => {
+          this.onFocus()
+          if (this.isMobileSafari) {
+            this.showCalendar()
+          }
+        }}
         @blur=${(e: Event) => {
           if ((e.target as HTMLInputElement).value) {
             this.manageValidity(e.target as HTMLInputElement)
@@ -284,7 +321,7 @@ export class PktDatepicker extends PktInputElement {
       <div class="pkt-input-prefix">Til</div>
       <input
         class=${classMap(this.inputClasses)}
-        type="date"
+        .type=${this.inputType}
         id="${this.id}-to"
         .value=${this._value[1] ?? ''}
         min=${this.min}
@@ -294,7 +331,23 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         ?disabled=${this.disabled}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === ',' || e.key === 'Enter') {
+            this.inputRefTo.value?.blur()
+          }
+        }}
+        @input=${(e: Event) => {
+          this.onInput()
+          e.stopImmediatePropagation()
+        }}
+        @focus=${() => {
+          this.onFocus()
+          if (this.isMobileSafari) {
+            this.showCalendar()
+          }
+        }}
         @blur=${(e: Event) => {
+          this.onBlur()
           if ((e.target as HTMLInputElement).value) {
             this.manageValidity(e.target as HTMLInputElement)
             const val = (e.target as HTMLInputElement).value
@@ -331,7 +384,7 @@ export class PktDatepicker extends PktInputElement {
     return html`
       <input
         class=${classMap(this.inputClasses)}
-        type="date"
+        .type=${this.inputType}
         id="${this.id}-input"
         min=${this.min}
         max=${this.max}
@@ -340,8 +393,19 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         @blur=${(e: Event) => {
+          this.onBlur()
           this.addToSelected(e)
         }}
+        @input=${(e: Event) => {
+          this.onInput()
+          e.stopImmediatePropagation()
+        }}
+        @focus=${() => {
+          this.onFocus()
+          if (this.isMobileSafari) {
+            this.showCalendar()
+          }
+        }}
         @keydown=${(e: KeyboardEvent) => {
           if (e.key === ',' || e.key === 'Enter') {
             e.preventDefault()
@@ -430,6 +494,7 @@ export class PktDatepicker extends PktInputElement {
         ?required=${this.required}
         ?optionalTag=${this.optionalTag}
         ?requiredTag=${this.requiredTag}
+        ?focusPreventDefault=${true}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
         .errorMessage=${this.errorMessage}
@@ -449,6 +514,7 @@ export class PktDatepicker extends PktInputElement {
             <button
               class="${classMap(this.buttonClasses)}"
               @click=${this.toggleCalendar}
+              ?disabled=${this.disabled}
               ${ref(this.btnRef)}
             >
               <pkt-icon name="calendar"></pkt-icon>
@@ -516,14 +582,21 @@ export class PktDatepicker extends PktInputElement {
     this.calendarOpen = true
     await sleep(20)
     this.handleCalendarPosition()
+    if (this.isMobileSafari) {
+      this.calRef.value?.focusOnCurrentDate()
+    }
   }
 
   public hideCalendar() {
     this.calendarOpen = false
   }
 
-  public toggleCalendar(e: Event) {
+  public async toggleCalendar(e: Event) {
     e.preventDefault()
     this.calendarOpen ? this.hideCalendar() : this.showCalendar()
+    await sleep(20)
+    if (this.isMobileSafari) {
+      this.calRef.value?.focusOnCurrentDate()
+    }
   }
 }

package/src/components/element/index.ts

@@ -188,7 +188,7 @@ export class PktInputElement extends PktElement {
     if ((!this.value || this.value.length === 0) && _old && _old.length !== 0) {
       this.clearInputValue()
     } else if (this.value && this.value.toString() !== _old?.toString()) {
-      this.onInput(this.value)
+      this.onChange(this.value)
     }
     this.updateComplete.then(() => this.requestUpdate())
   }
@@ -208,8 +208,23 @@ export class PktInputElement extends PktElement {
     )
   }
 
+  // When user enters the input, we need to push that event out to the form
+  protected onFocus(): void {
+    this.dispatchEvent(new Event('focus'))
+  }
+
+  // And also when the user leaves the input...
+  protected onBlur(): void {
+    this.dispatchEvent(new Event('blur'))
+  }
+
+  // Trigger this when user types in the input
+  protected onInput(): void {
+    this.dispatchEvent(new Event('input'))
+  }
+
   // Trigger this when you want to set the value of the input out to the form
-  protected onInput(value: string | string[]): void {
+  protected onChange(value: string | string[]): void {
     if (!this.touched) {
       this.touched = true
       value && this.setFormValue(value)
@@ -234,9 +249,6 @@ export class PktInputElement extends PktElement {
       this.manageValidity(this.inputRef2.value)
     }
 
-    // This should be moved to a separate trigger for text inputs
-    this.dispatchEvent(new Event('input'))
-
     // Change events
     this.dispatchEvent(new Event('change'))
     this.dispatchEvent(