@oslokommune/punkt-elements 12.6.4 → 12.6.6

package/dist/pkt-link.js

@@ -1,8 +1,8 @@
-import { P as f, x as k, E as h, n as i } from "./index-d6Lj2RhC.js";
-import { e as m, P as d, n as u } from "./ref-bB529lv7.js";
-import { e as P } from "./class-map-CC5YmUWA.js";
+import { P as f, x as k, E as h, n as i } from "./index-CF6_-ZoF.js";
+import { e as m, P as d, n as u } from "./ref-rfvuMlT1.js";
+import { e as P } from "./class-map-luGhSuLj.js";
 import { t as y } from "./directive-Cxhakbpr.js";
-import "./index-CBp5twsn.js";
+import "./index-B-KXmo65.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-D8H97G5s.cjs"),c=require("./ref-Bi2ZZNQq.cjs"),b=require("./class-map-DuDzlp5t.cjs"),d=require("./directive-DtixNHDT.cjs");require("./index-kJnGegz8.cjs");const k="pkt-messagebox",u=!0,g={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},m={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingsboksen"}},p={name:k,"css-class":"pkt-messagebox",isElement:u,events:g,props:m,slots:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?x(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&f(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${b.e(t)}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BYZhBzXZ.cjs"),c=require("./ref-BuQtfKiL.cjs"),b=require("./class-map-DjxCaVFk.cjs"),d=require("./directive-DtixNHDT.cjs");require("./index-DAWAnAW_.cjs");const k="pkt-messagebox",u=!0,g={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},m={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingsboksen"}},p={name:k,"css-class":"pkt-messagebox",isElement:u,events:g,props:m,slots:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?x(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&f(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${b.e(t)}>
       ${this.closable?e.x`<div class="pkt-messagebox__close">
             <button
               @click=${this.close}

package/dist/pkt-messagebox.js

@@ -1,8 +1,8 @@
-import { r as b, P as k, x as c, E as d, n } from "./index-d6Lj2RhC.js";
-import { e as u, P as g, n as h } from "./ref-bB529lv7.js";
-import { e as f } from "./class-map-CC5YmUWA.js";
+import { r as b, P as k, x as c, E as d, n } from "./index-CF6_-ZoF.js";
+import { e as u, P as g, n as h } from "./ref-rfvuMlT1.js";
+import { e as f } from "./class-map-luGhSuLj.js";
 import { t as v } from "./directive-Cxhakbpr.js";
-import "./index-CBp5twsn.js";
+import "./index-B-KXmo65.js";
 const _ = "pkt-messagebox", x = !0, y = {
   onClose: {
     description: "React: Event som trigges når meldingsboksen lukkes"

package/dist/pkt-tag.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-DuDzlp5t.cjs"),g=require("./directive-DtixNHDT.cjs"),t=require("./index-D8H97G5s.cjs"),o=require("./ref-Bi2ZZNQq.cjs");require("./index-kJnGegz8.cjs");const h="pkt-tag",d=!0,f={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"}},k={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",isElement:d,props:f,slots:k};var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(n,e,l,r)=>{for(var i=r>1?void 0:r?b(e,l):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(r?c(e,l,i):c(i))||i);return r&&i&&y(e,l,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.e(),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=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},l={"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,"pkt-hide":this._isClosed};return this.closeTag?t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-DjxCaVFk.cjs"),g=require("./directive-DtixNHDT.cjs"),t=require("./index-BYZhBzXZ.cjs"),o=require("./ref-BuQtfKiL.cjs");require("./index-DAWAnAW_.cjs");const h="pkt-tag",d=!0,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:"Lukk"}},f={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",isElement:d,props:k,slots:f};var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(n,e,r,l)=>{for(var i=l>1?void 0:l?b(e,r):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(l?c(e,r,i):c(i))||i);return l&&i&&y(e,r,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.e(),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=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"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,"pkt-hide":this._isClosed};return this.closeTag?t.x`
         <button
-          class=${u.e(l)}
+          class=${u.e(r)}
           type=${this.type}
           aria-label=${this.ariaLabel}
           @click=${this.close}

package/dist/pkt-tag.js

@@ -1,8 +1,8 @@
-import { e as h } from "./class-map-CC5YmUWA.js";
+import { e as h } from "./class-map-luGhSuLj.js";
 import { t as d } from "./directive-Cxhakbpr.js";
-import { r as y, P as g, x as p, n as l } from "./index-d6Lj2RhC.js";
-import { e as m, P as k, n as f } from "./ref-bB529lv7.js";
-import "./index-CBp5twsn.js";
+import { r as y, P as g, x as p, n as l } from "./index-CF6_-ZoF.js";
+import { e as m, P as k, n as f } from "./ref-rfvuMlT1.js";
+import "./index-B-KXmo65.js";
 const b = "pkt-tag", S = !0, $ = {
   closeTag: {
     type: "boolean",
@@ -55,27 +55,27 @@ const b = "pkt-tag", S = !0, $ = {
   ariaLabel: {
     type: "string",
     required: !1,
-    default: "close"
+    default: "Lukk"
   }
 }, _ = {
   default: {
     description: "Teksten til tag"
   }
-}, r = {
+}, a = {
   name: b,
   "css-class": "pkt-tag",
   isElement: S,
   props: $,
   slots: _
 };
-var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, o, n, a) => {
-  for (var i = a > 1 ? void 0 : a ? C(o, n) : o, c = s.length - 1, u; c >= 0; c--)
-    (u = s[c]) && (i = (a ? u(o, n, i) : u(i)) || i);
-  return a && i && x(o, n, i), i;
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, r, n, o) => {
+  for (var i = o > 1 ? void 0 : o ? C(r, n) : r, c = s.length - 1, u; c >= 0; c--)
+    (u = s[c]) && (i = (o ? u(r, n, i) : u(i)) || i);
+  return o && i && x(r, n, i), i;
 };
 let t = class extends g {
   constructor() {
-    super(), this.defaultSlot = m(), this.closeTag = r.props.closeTag.default, this.size = r.props.size.default, this.skin = r.props.skin.default, this.textStyle = r.props.textStyle.default, this.iconName = void 0, this.type = r.props.type.default, this.ariaLabel = r.props.ariaLabel.default, this._isClosed = !1, this.close = (s) => {
+    super(), this.defaultSlot = m(), 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("close", { detail: { origin: s }, bubbles: !0, composed: !0 })
       ), this.dispatchEvent(
@@ -89,7 +89,7 @@ let t = class extends g {
       [`pkt-tag--${this.size}`]: !!this.size,
       [`pkt-tag--${this.skin}`]: !!this.skin,
       [`pkt-tag--${this.textStyle}`]: !!this.textStyle
-    }, o = {
+    }, r = {
       "pkt-tag": !0,
       "pkt-btn": !0,
       "pkt-btn--tertiary": !0,
@@ -101,7 +101,7 @@ let t = class extends g {
     };
     return this.closeTag ? p`
         <button
-          class=${h(o)}
+          class=${h(r)}
           type=${this.type}
           aria-label=${this.ariaLabel}
           @click=${this.close}

package/dist/{ref-Bi2ZZNQq.cjs → ref-BuQtfKiL.cjs}

@@ -1,4 +1,4 @@
-"use strict";const A=require("./index-D8H97G5s.cjs"),a=require("./directive-DtixNHDT.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(o=>o.getAttribute&&o.getAttribute("slot")==s?this.nodeFromElement(o,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-BYZhBzXZ.cjs"),a=require("./directive-DtixNHDT.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(o=>o.getAttribute&&o.getAttribute("slot")==s?this.nodeFromElement(o,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-bB529lv7.js → ref-rfvuMlT1.js}

@@ -1,4 +1,4 @@
-import { Z as v, E as A } from "./index-d6Lj2RhC.js";
+import { Z as v, E as A } from "./index-CF6_-ZoF.js";
 import { i as p, a as m, e as g } from "./directive-Cxhakbpr.js";
 class H {
   constructor(e, ...s) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.6.4",
+  "version": "12.6.6",
   "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.4.0",
-    "@oslokommune/punkt-css": "^12.6.3",
+    "@oslokommune/punkt-css": "^12.6.6",
     "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": "e365aa2a36162a15aaa55bb5b404132a54b989a2"
+  "gitHead": "936cdb5ca60100a3356cfbf03994c85eebba732e"
 }

package/src/components/calendar/index.ts

@@ -264,7 +264,12 @@ export class PktCalendar extends PktElement {
           role="grid"
           ?aria-multiselectable=${this.range || this.multiple}
         >
-          ${this.renderDayNames()} ${this.renderCalendarBody()}
+          <thead>
+            ${this.renderDayNames()}
+          </thead>
+          <tbody>
+            ${this.renderCalendarBody()}
+          </tbody>
         </table>
       </div>
     `
@@ -273,12 +278,12 @@ export class PktCalendar extends PktElement {
   private renderDayNames() {
     const days = []
     if (this.weeknumbers) {
-      days.push(html`<td><div>${this.weekString}<div></td>`)
+      days.push(html`<th><div>${this.weekString}</div></th>`)
     }
     for (let i = 0; i < this.dayStrings.length; i++) {
-      days.push(html`<td><div>${this.dayStrings[i]}</div></td>`)
+      days.push(html`<th><div>${this.dayStrings[i]}</div></th>`)
     }
-    return html`<tr class="pkt-cal-week-row" role="presentation">
+    return html`<tr class="pkt-cal-week-row">
       ${days}
     </tr>`
   }

package/src/components/datepicker/index.ts

@@ -248,6 +248,10 @@ export class PktDatepicker extends PktInputElement {
           if (e.key === ',' || e.key === 'Enter') {
             this.inputRef.value?.blur()
           }
+          if (e.key === 'Space' || e.key === ' ') {
+            e.preventDefault()
+            this.toggleCalendar(e)
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -293,6 +297,10 @@ export class PktDatepicker extends PktInputElement {
           if (e.key === ',' || e.key === 'Enter') {
             this.inputRef.value?.blur()
           }
+          if (e.key === 'Space' || e.key === ' ') {
+            e.preventDefault()
+            this.toggleCalendar(e)
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -341,6 +349,10 @@ export class PktDatepicker extends PktInputElement {
           if (e.key === ',' || e.key === 'Enter') {
             this.inputRefTo.value?.blur()
           }
+          if (e.key === 'Space' || e.key === ' ') {
+            e.preventDefault()
+            this.toggleCalendar(e)
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -421,6 +433,10 @@ export class PktDatepicker extends PktInputElement {
             e.preventDefault()
             this.addToSelected(e)
           }
+          if (e.key === 'Space' || e.key === ' ') {
+            e.preventDefault()
+            this.toggleCalendar(e)
+          }
         }}
         ?disabled=${this.disabled || (this.maxlength && this._value.length >= this.maxlength)}
         @change=${(e: Event) => {
@@ -442,7 +458,8 @@ export class PktDatepicker extends PktInputElement {
                 <pkt-tag
                   .id="${this.id + date + '-tag'}"
                   closeTag
-                  @onClose=${() => this.calRef.value?.handleDateSelect(this.fromISOToDate(date))}
+                  ariaLabel="${this.strings.calendar.deleteDate} ${this.fromISOtoLocal(date)}"
+                  @close=${() => this.calRef.value?.handleDateSelect(this.fromISOToDate(date))}
                   >${this.fromISOtoLocal(date)}</pkt-tag
                 >
               `,
@@ -612,9 +629,5 @@ export class PktDatepicker extends PktInputElement {
   public async toggleCalendar(e: Event) {
     e.preventDefault()
     this.calendarOpen ? this.hideCalendar() : this.showCalendar()
-    await sleep(20)
-    if (this.isMobileSafari) {
-      this.calRef.value?.focusOnCurrentDate()
-    }
   }
 }