@oslokommune/punkt-elements 12.3.8 → 12.3.10

package/dist/pkt-element.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BoJqccWT.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DZGlpxj6.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-D16hQiYU.js";
+import { P as a, a as m } from "./index-BoxUN9GL.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-BoJqccWT.cjs");require("./directive-19_ixLKS.cjs");const e=require("./index--Z_thODp.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});
+"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});

package/dist/pkt-icon.js

@@ -1,6 +1,6 @@
-import "./index-D16hQiYU.js";
+import "./index-BoxUN9GL.js";
 import "./directive-DA0-wdk7.js";
-import { P as p } from "./index-CQrIaUIc.js";
+import { P as p } from "./index-CsKoXqeT.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-xZNrDhoQ.cjs"),t=require("./pkt-card.cjs"),r=require("./pkt-component-template.cjs"),n=require("./pkt-datepicker.cjs"),o=require("./index--Z_thODp.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-C92NwPcv.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});

package/dist/pkt-index.js

@@ -1,8 +1,8 @@
-import { P as t } from "./index-D1du6BqK.js";
+import { P as t } from "./index-BAKMcM4b.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-CQrIaUIc.js";
+import { P as f } from "./index-CsKoXqeT.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-BoJqccWT.cjs"),f=require("./ref-B5fRDLdm.cjs"),c=require("./index--Z_thODp.cjs"),u=require("./class-map-j1NPDnPL.cjs"),$=require("./directive-19_ixLKS.cjs");/**
+"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");/**
  * @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-D16hQiYU.js";
-import { i as _, P as D, K as I } from "./ref-CC5SNvNX.js";
-import { a as f } from "./index-CQrIaUIc.js";
-import { R as c } from "./class-map-Cme3zDHv.js";
+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 { 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-BoJqccWT.cjs"),c=require("./ref-B5fRDLdm.cjs"),k=require("./class-map-j1NPDnPL.cjs"),h=require("./directive-19_ixLKS.cjs");require("./index--Z_thODp.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-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
       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-D16hQiYU.js";
-import { i as m, P as d, K as u } from "./ref-CC5SNvNX.js";
-import { R as P } from "./class-map-Cme3zDHv.js";
+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 { t as y } from "./directive-DA0-wdk7.js";
-import "./index-CQrIaUIc.js";
+import "./index-CsKoXqeT.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-BoJqccWT.cjs"),c=require("./ref-B5fRDLdm.cjs"),p=require("./class-map-j1NPDnPL.cjs"),b=require("./directive-19_ixLKS.cjs");require("./index--Z_thODp.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-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)}>
       ${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-D16hQiYU.js";
-import { i as b, P as f, K as k } from "./ref-CC5SNvNX.js";
-import { R as u } from "./class-map-Cme3zDHv.js";
+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 { t as y } from "./directive-DA0-wdk7.js";
-import "./index-CQrIaUIc.js";
+import "./index-CsKoXqeT.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-j1NPDnPL.cjs"),g=require("./directive-19_ixLKS.cjs"),t=require("./index-BoJqccWT.cjs"),o=require("./ref-B5fRDLdm.cjs");require("./index--Z_thODp.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-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`
             <button
               class=${u.Rt(r)}
               type=${this.type}

package/dist/pkt-tag.js

@@ -1,8 +1,8 @@
-import { R as h } from "./class-map-Cme3zDHv.js";
+import { R as h } from "./class-map-DnAEF9tj.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-D16hQiYU.js";
-import { i as m, P as b, K as f } from "./ref-CC5SNvNX.js";
-import "./index-CQrIaUIc.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";
 const S = "pkt-tag", _ = {
   closeTag: {
     type: "boolean",

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

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

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

@@ -1,4 +1,4 @@
-"use strict";const a=require("./index-BoJqccWT.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-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}}/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.3.8",
+  "version": "12.3.10",
   "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": "be4a7ca19fb67b079fe05d9901f891a10ebd02d4"
+  "gitHead": "aa45340f085d79e1a70decfcce336c99c361791a"
 }

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 (
@@ -134,14 +140,7 @@ export class PktDatepicker extends PktInputElement {
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     if (name === 'value') {
-      if (this.value === '' || this.value.length === 0 || typeof this.value === 'undefined') {
-        this._value = []
-      } else if (this.value.length && this._value.length === 0) {
-        if (!Array.isArray(this.value) && this.value.includes(',')) {
-          this.value = this.value.split(',')
-        }
-        this._value = !Array.isArray(this.value) ? this.value.split(',') : this.value
-      }
+      this.valueChanged(this.value, _old)
     }
 
     if (name === 'excludedates' && typeof this.excludedates === 'string') {
@@ -161,13 +160,8 @@ export class PktDatepicker extends PktInputElement {
   updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties)
     if (changedProperties.has('value')) {
-      if (this.range && this._value.length === 1) {
-        return
-      }
-      if (changedProperties.get('value')?.toString() === this.value.toString()) {
-        return
-      }
-      this.onInput(this.value)
+      if (this.range && this._value.length === 1) return
+      this.valueChanged(this.value, changedProperties.get('value'))
     }
   }
 
@@ -238,9 +232,9 @@ export class PktDatepicker extends PktInputElement {
     return html`
       <input
         class="${classMap(this.inputClasses)}"
-        type="date"
+        .type=${this.inputType}
         id="${this.id}-input"
-        value=${this.value}
+        .value=${this._value[0] ?? ''}
         min=${this.min}
         max=${this.max}
         @click=${(e: MouseEvent) => {
@@ -248,10 +242,19 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         ?disabled=${this.disabled}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === ',' || e.key === 'Enter') {
+            this.inputRef.value?.blur()
+          }
+        }}
+        @focus=${() => {
+          if (this.isMobileSafari) {
+            this.showCalendar()
+          }
+        }}
         @blur=${(e: Event) => {
           this.manageValidity(e.target as HTMLInputElement)
           this.value = (e.target as HTMLInputElement).value
-          this._value = this.massageDates((e.target as HTMLInputElement).value.split(','))
         }}
         @change=${(e: Event) => {
           e.stopImmediatePropagation()
@@ -266,9 +269,9 @@ 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] ?? ''}
+        .value=${this._value[0] ?? ''}
         min=${this.min}
         max=${this.max}
         @click=${(e: MouseEvent) => {
@@ -276,6 +279,16 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         ?disabled=${this.disabled}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === ',' || e.key === 'Enter') {
+            this.inputRef.value?.blur()
+          }
+        }}
+        @focus=${() => {
+          if (this.isMobileSafari) {
+            this.showCalendar()
+          }
+        }}
         @blur=${(e: Event) => {
           if ((e.target as HTMLInputElement).value) {
             this.manageValidity(e.target as HTMLInputElement)
@@ -285,6 +298,8 @@ export class PktDatepicker extends PktInputElement {
                 this.calRef?.value?.handleDateSelect(date)
               }
             }
+          } else if (this._value[0]) {
+            this.clearInputValue()
           }
         }}
         @change=${(e: Event) => {
@@ -295,9 +310,9 @@ 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] ?? ''}
+        .value=${this._value[1] ?? ''}
         min=${this.min}
         max=${this.max}
         @click=${(e: MouseEvent) => {
@@ -305,6 +320,16 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         ?disabled=${this.disabled}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === ',' || e.key === 'Enter') {
+            this.inputRefTo.value?.blur()
+          }
+        }}
+        @focus=${() => {
+          if (this.isMobileSafari) {
+            this.showCalendar()
+          }
+        }}
         @blur=${(e: Event) => {
           if ((e.target as HTMLInputElement).value) {
             this.manageValidity(e.target as HTMLInputElement)
@@ -342,7 +367,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}
@@ -353,6 +378,11 @@ export class PktDatepicker extends PktInputElement {
         @blur=${(e: Event) => {
           this.addToSelected(e)
         }}
+        @focus=${() => {
+          if (this.isMobileSafari) {
+            this.showCalendar()
+          }
+        }}
         @keydown=${(e: KeyboardEvent) => {
           if (e.key === ',' || e.key === 'Enter') {
             e.preventDefault()
@@ -411,12 +441,7 @@ export class PktDatepicker extends PktInputElement {
         .excludeweekdays=${this.excludeweekdays}
         .currentmonth=${new Date(this.currentmonth)}
         @date-selected=${(e: CustomEvent) => {
-          this.value =
-            !this.multiple && !this.range
-              ? !Array.isArray(e.detail)
-                ? e.detail.split(',')[0]
-                : e.detail[0]
-              : e.detail
+          this.value = !this.multiple && !this.range ? e.detail[0] : e.detail
           this._value = e.detail
           if (this.inputRef.value) {
             if (this.range && this.inputRefTo.value) {
@@ -446,6 +471,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}
@@ -465,6 +491,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>
@@ -532,14 +559,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

@@ -171,6 +171,43 @@ export class PktInputElement extends PktElement {
     }
   }
 
+  protected valueChanged(value: string | string[] | null, _old: string | string[] | null): void {
+    if (typeof value === 'string') {
+      if ((this.multiple || this.range) && value.includes(',')) {
+        value = value.split(',')
+      }
+      this.value = value
+      this._value = Array.isArray(value) ? value : [value]
+    } else if (Array.isArray(value)) {
+      this.value = value
+      this._value = value
+    } else {
+      this.value = ''
+      this._value = []
+    }
+    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.updateComplete.then(() => this.requestUpdate())
+  }
+
+  // When input goes from content to no content
+  protected clearInputValue(): void {
+    const value = this.multiple || this.range ? [] : ''
+    this.value = value
+    this.internals.setFormValue(value)
+    this.dispatchEvent(new Event('change'))
+    this.dispatchEvent(
+      new CustomEvent('value-change', {
+        detail: value,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
   // Trigger this when you want to set the value of the input out to the form
   protected onInput(value: string | string[]): void {
     if (!this.touched) {