@oslokommune/punkt-elements 12.5.2 → 12.6.0

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-import { nothing } from 'lit';
 import { PropertyValues } from 'lit';
 import { ReactiveController } from 'lit';
 import { ReactiveControllerHost } from 'lit';
@@ -7,6 +6,10 @@ import { Ref } from 'lit/directives/ref.js';
 import { StaticValue } from 'lit-html/static';
 import { TemplateResult } from 'lit-html';
 
+declare type AlertAriaLive = 'off' | 'polite' | 'assertive';
+
+declare type AlertSkin = 'error' | 'success' | 'warning' | 'info';
+
 declare type ICardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
 
 declare type IDirection = 'portrait' | 'landscape';
@@ -14,13 +17,29 @@ declare type IDirection = 'portrait' | 'landscape';
 declare interface IPktTag {
     closeTag?: boolean;
     size?: TagSize;
-    skin?: 'blue' | 'green' | 'red' | 'yellow';
+    skin?: TagSkin;
     textStyle?: string;
     iconName?: string;
-    type?: string;
+    type?: TagType;
     ariaLabel?: string;
 }
 
+declare type MessageboxSkin = 'error' | 'success' | 'warning' | 'info';
+
+export declare class PktAlert extends PktElement {
+    defaultSlot: Ref<HTMLElement>;
+    constructor();
+    compact: boolean;
+    title: string;
+    skin: AlertSkin;
+    ariaLive: AlertAriaLive;
+    closeAlert: boolean;
+    date: string | null;
+    _isClosed: boolean;
+    private close;
+    render(): TemplateResult<1>;
+}
+
 export declare class PktCalendar extends PktElement {
     /**
      * Element attributes
@@ -355,11 +374,10 @@ export declare class PktMessagebox extends PktElement {
     closable: boolean;
     compact: boolean;
     title: string;
-    skin: string;
-    isDisplayed: boolean;
-    onClose?: () => void;
-    handleClose(): void;
-    render(): TemplateResult<1> | typeof nothing;
+    skin: MessageboxSkin;
+    _isClosed: boolean;
+    private close;
+    render(): TemplateResult<1>;
 }
 
 declare class PktSlotController implements ReactiveController {
@@ -384,7 +402,7 @@ export declare class PktTag extends PktElement {
     skin: TagSkin;
     textStyle: string;
     iconName: string | undefined;
-    type: string;
+    type: TagType;
     ariaLabel: string;
     /**
      * Element state
@@ -394,11 +412,13 @@ export declare class PktTag extends PktElement {
      * Element functions
      */
     private close;
-    render(): TemplateResult<1> | typeof nothing;
+    render(): TemplateResult<1>;
 }
 
 declare type TagSize = 'small' | 'medium' | 'large';
 
-declare type TagSkin = 'blue' | 'green' | 'red' | 'yellow';
+declare type TagSkin = 'blue' | 'green' | 'red' | 'yellow' | 'beige' | 'blue-light' | 'gray' | 'grey';
+
+declare type TagType = 'button' | 'reset' | 'submit';
 
 export { }

package/dist/pkt-alert.cjs

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-DSyh6tUw.cjs"),p=require("./ref-C3InMDfU.cjs"),c=require("./class-map-Ch54kkX5.cjs"),k=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.cjs");var h=Object.defineProperty,u=Object.getOwnPropertyDescriptor,e=(s,r,o,i)=>{for(var l=i>1?void 0:i?u(r,o):r,a=s.length-1,n;a>=0;a--)(n=s[a])&&(l=(i?n(r,o,l):n(l))||l);return i&&l&&h(r,o,l),l};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.closable=!1,this.compact=!1,this.title="",this.skin="info",this.isDisplayed=!0,this.ariaLive="polite",this.closeAlert=!1,this.date="",this.slotController=new p.PktSlotController(this,this.defaultSlot)}handleClose(){this.isDisplayed=!1,this.onClose&&this.onClose()}render(){const r={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-alert--closable":this.closable};return this.isDisplayed?t.x`
-      <div class=${c.e(r)} aria-live=${this.ariaLive}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),d=require("./class-map-Ch54kkX5.cjs"),k=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.cjs");const u="pkt-alert",f=!0,m={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},v={title:{name:"Tittel",description:"Tittelen som vises øverst i på meldingen",type:"string"},skin:{name:"Utseende",description:"Hvordan type melding er dette?",type:["info","success","warning","error"],default:"info"},date:{name:"Sist oppdatert",description:"Dato som vises nederst i på meldingen",type:"string"},ariaLive:{name:"aria-live",description:"Hvordan skal skjermleseren lese opp meldingen?",type:["off","polite","assertive"],default:"polite"},compact:{name:"Kompakt",description:"Gjør meldingen mindre",type:"boolean",default:!1},closeAlert:{name:"Vis 'Lukk'-knapp",description:"Viser 'Lukk'-knappen",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingen"}},l={name:u,"css-class":"pkt-alert","dark-mode":!0,isElement:f,events:m,props:v,slots:h};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,s=(n,e,o,r)=>{for(var i=r>1?void 0:r?_(e,o):e,a=n.length-1,p;a>=0;a--)(p=n[a])&&(i=(r?p(e,o,i):p(i))||i);return r&&i&&y(e,o,i),i};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.compact=l.props.compact.default,this.title="",this.skin=l.props.skin.default,this.ariaLive=l.props.ariaLive.default,this.closeAlert=l.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed};return t.x`
+      <div class=${d.e(e)} aria-live=${this.ariaLive}>
         <pkt-icon
           class="pkt-alert__icon"
           name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
         ></pkt-icon>
 
-        ${this.closable?t.x`
+        ${this.closeAlert?t.x`
               <div class="pkt-alert__close">
                 <button
                   type="button"
                   class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
                   tabindex="0"
                   aria-label="close"
-                  @click=${this.handleClose}
+                  @click=${this.close}
                 >
                   <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
                 </button>
@@ -20,8 +20,8 @@
             `:t.E}
         ${this.title?t.x`<div class="pkt-alert__title">${this.title}</div>`:t.E}
 
-        <div class="pkt-alert__text" ${p.n(this.defaultSlot)}></div>
+        <div class="pkt-alert__text" ${c.n(this.defaultSlot)}></div>
 
         ${this.date?t.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:t.E}
       </div>
-    `:t.E}};e([t.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closable",2);e([t.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"compact",2);e([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);e([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);e([t.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"isDisplayed",2);e([t.n({type:Function,reflect:!0})],exports.PktAlert.prototype,"onClose",2);e([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"ariaLive",2);e([t.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);e([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);exports.PktAlert=e([k.t("pkt-alert")],exports.PktAlert);
+    `}};s([t.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);s([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);s([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);s([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"ariaLive",2);s([t.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);s([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);s([t.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=s([k.t("pkt-alert")],exports.PktAlert);

package/dist/pkt-alert.js

@@ -1,85 +1,144 @@
-import { P as f, E as a, x as p, n as s } from "./index-CsTujnXs.js";
-import { e as d, P as u, n as y } from "./ref-By_W8A-f.js";
-import { e as k } from "./class-map-DunDFQn7.js";
-import { t as v } from "./directive-Cxhakbpr.js";
+import { r as m, P as u, x as n, E as k, n as o } from "./index-CsTujnXs.js";
+import { e as f, P as v, n as h } from "./ref-By_W8A-f.js";
+import { e as y } from "./class-map-DunDFQn7.js";
+import { t as _ } from "./directive-Cxhakbpr.js";
 import "./index-CyqOyy_9.js";
-var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (l, r, n, o) => {
-  for (var i = o > 1 ? void 0 : o ? _(r, n) : r, c = l.length - 1, h; c >= 0; c--)
-    (h = l[c]) && (i = (o ? h(r, n, i) : h(i)) || i);
-  return o && i && m(r, n, i), i;
+const b = "pkt-alert", g = !0, $ = {
+  onClose: {
+    description: "React: Klikk-event for 'Lukk'-knappen"
+  },
+  close: {
+    description: "Vue: Klikk-event for 'Lukk'-knappen"
+  }
+}, C = {
+  title: {
+    name: "Tittel",
+    description: "Tittelen som vises øverst i på meldingen",
+    type: "string"
+  },
+  skin: {
+    name: "Utseende",
+    description: "Hvordan type melding er dette?",
+    type: [
+      "info",
+      "success",
+      "warning",
+      "error"
+    ],
+    default: "info"
+  },
+  date: {
+    name: "Sist oppdatert",
+    description: "Dato som vises nederst i på meldingen",
+    type: "string"
+  },
+  ariaLive: {
+    name: "aria-live",
+    description: "Hvordan skal skjermleseren lese opp meldingen?",
+    type: [
+      "off",
+      "polite",
+      "assertive"
+    ],
+    default: "polite"
+  },
+  compact: {
+    name: "Kompakt",
+    description: "Gjør meldingen mindre",
+    type: "boolean",
+    default: !1
+  },
+  closeAlert: {
+    name: "Vis 'Lukk'-knapp",
+    description: "Viser 'Lukk'-knappen",
+    type: "boolean",
+    default: !1
+  }
+}, S = {
+  default: {
+    description: "Innholdet i meldingen"
+  }
+}, a = {
+  name: b,
+  "css-class": "pkt-alert",
+  "dark-mode": !0,
+  isElement: g,
+  events: $,
+  props: C,
+  slots: S
 };
-let t = class extends f {
+var L = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (i, r, p, l) => {
+  for (var s = l > 1 ? void 0 : l ? P(r, p) : r, c = i.length - 1, d; c >= 0; c--)
+    (d = i[c]) && (s = (l ? d(r, p, s) : d(s)) || s);
+  return l && s && L(r, p, s), s;
+};
+let t = class extends u {
   constructor() {
-    super(), this.defaultSlot = d(), this.closable = !1, this.compact = !1, this.title = "", this.skin = "info", this.isDisplayed = !0, this.ariaLive = "polite", this.closeAlert = !1, this.date = "", this.slotController = new u(this, this.defaultSlot);
-  }
-  handleClose() {
-    this.isDisplayed = !1, this.onClose && this.onClose();
+    super(), this.defaultSlot = f(), this.compact = a.props.compact.default, this.title = "", this.skin = a.props.skin.default, this.ariaLive = a.props.ariaLive.default, this.closeAlert = a.props.closeAlert.default, this.date = null, this._isClosed = !1, this.close = (i) => {
+      this._isClosed = !0, this.dispatchEvent(
+        new CustomEvent("close", { detail: { origin: i }, bubbles: !0, composed: !0 })
+      );
+    }, this.slotController = new v(this, this.defaultSlot), this._isClosed = !1;
   }
   render() {
-    const l = {
+    const i = {
       "pkt-alert": !0,
       "pkt-alert--compact": this.compact,
       [`pkt-alert--${this.skin}`]: this.skin,
-      "pkt-alert--closable": this.closable
+      "pkt-hide": this._isClosed
     };
-    return this.isDisplayed ? p`
-      <div class=${k(l)} aria-live=${this.ariaLive}>
+    return n`
+      <div class=${y(i)} aria-live=${this.ariaLive}>
         <pkt-icon
           class="pkt-alert__icon"
           name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
         ></pkt-icon>
 
-        ${this.closable ? p`
+        ${this.closeAlert ? n`
               <div class="pkt-alert__close">
                 <button
                   type="button"
                   class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
                   tabindex="0"
                   aria-label="close"
-                  @click=${this.handleClose}
+                  @click=${this.close}
                 >
                   <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
                 </button>
               </div>
-            ` : a}
-        ${this.title ? p`<div class="pkt-alert__title">${this.title}</div>` : a}
+            ` : k}
+        ${this.title ? n`<div class="pkt-alert__title">${this.title}</div>` : k}
 
-        <div class="pkt-alert__text" ${y(this.defaultSlot)}></div>
+        <div class="pkt-alert__text" ${h(this.defaultSlot)}></div>
 
-        ${this.date ? p`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : a}
+        ${this.date ? n`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : k}
       </div>
-    ` : a;
+    `;
   }
 };
 e([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "closable", 2);
-e([
-  s({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !1 })
 ], t.prototype, "compact", 2);
 e([
-  s({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "title", 2);
 e([
-  s({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "skin", 2);
 e([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "isDisplayed", 2);
-e([
-  s({ type: Function, reflect: !0 })
-], t.prototype, "onClose", 2);
-e([
-  s({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "ariaLive", 2);
 e([
-  s({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], t.prototype, "closeAlert", 2);
 e([
-  s({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "date", 2);
+e([
+  m()
+], t.prototype, "_isClosed", 2);
 t = e([
-  v("pkt-alert")
+  _("pkt-alert")
 ], t);
 export {
   t as PktAlert

package/dist/pkt-index.cjs

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

package/dist/pkt-index.js

@@ -1,20 +1,22 @@
-import { P as t } from "./index-BI6-RUqp.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-CyqOyy_9.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";
-import { PktTag as I } from "./pkt-tag.js";
+import { PktAlert as t } from "./pkt-alert.js";
+import { P as p } from "./index-BI6-RUqp.js";
+import { PktCard as P } from "./pkt-card.js";
+import { PktComponent as x } from "./pkt-component-template.js";
+import { PktDatepicker as a } from "./pkt-datepicker.js";
+import { P as s } from "./index-CyqOyy_9.js";
+import { PktInputWrapper as c } from "./pkt-input-wrapper.js";
+import { PktLink as g } from "./pkt-link.js";
+import { PktMessagebox as l } from "./pkt-messagebox.js";
+import { PktTag as b } from "./pkt-tag.js";
 export {
-  t as PktCalendar,
-  p as PktCard,
-  P as PktComponent,
-  x as PktDatepicker,
-  f as PktIcon,
-  s as PktInputWrapper,
-  c as PktLink,
-  g as PktMessagebox,
-  I as PktTag
+  t as PktAlert,
+  p as PktCalendar,
+  P as PktCard,
+  x as PktComponent,
+  a as PktDatepicker,
+  s as PktIcon,
+  c as PktInputWrapper,
+  g as PktLink,
+  l as PktMessagebox,
+  b as PktTag
 };

package/dist/pkt-messagebox.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),p=require("./class-map-Ch54kkX5.cjs"),b=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.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.e(),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.x`<div class=${p.e(o)}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),b=require("./class-map-Ch54kkX5.cjs"),k=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.cjs");const d="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:d,"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.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.handleClose}
+              @click=${this.close}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
@@ -9,4 +9,4 @@
           </div>`:e.E}
       ${this.title?e.x`<div class="pkt-messagebox__title">${this.title}</div>`:e.E}
       <div class="pkt-messagebox__text" ${c.n(this.defaultSlot)}></div>
-    </div>`:e.E}};s([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);s([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);s([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);s([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);s([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"isDisplayed",2);s([e.n({type:Function,reflect:!0})],exports.PktMessagebox.prototype,"onClose",2);exports.PktMessagebox=s([b.t("pkt-messagebox")],exports.PktMessagebox);
+    </div>`}};o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);o([e.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([k.t("pkt-messagebox")],exports.PktMessagebox);

package/dist/pkt-messagebox.js

@@ -1,61 +1,106 @@
-import { P as m, E as c, x as h, n as o } from "./index-CsTujnXs.js";
-import { e as b, P as f, n as u } from "./ref-By_W8A-f.js";
-import { e as k } from "./class-map-DunDFQn7.js";
-import { t as y } from "./directive-Cxhakbpr.js";
+import { r as b, P as k, x as c, E as d, n } from "./index-CsTujnXs.js";
+import { e as u, P as g, n as f } from "./ref-By_W8A-f.js";
+import { e as h } from "./class-map-DunDFQn7.js";
+import { t as v } from "./directive-Cxhakbpr.js";
 import "./index-CyqOyy_9.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);
-  return r && e && d(i, p, e), e;
+const _ = "pkt-messagebox", x = !0, y = {
+  onClose: {
+    description: "React: Event som trigges når meldingsboksen lukkes"
+  },
+  "on-close": {
+    description: "Vue: Event som trigges når meldingsboksen lukkes"
+  }
+}, C = {
+  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
+  }
+}, P = {
+  default: {
+    description: "Innholdet i meldingsboksen"
+  }
+}, m = {
+  name: _,
+  "css-class": "pkt-messagebox",
+  isElement: x,
+  events: y,
+  props: C,
+  slots: P
 };
-let t = class extends m {
+var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (s, l, p, i) => {
+  for (var e = i > 1 ? void 0 : i ? E(l, p) : l, r = s.length - 1, a; r >= 0; r--)
+    (a = s[r]) && (e = (i ? a(l, p, e) : a(e)) || e);
+  return i && e && $(l, p, e), e;
+};
+let t = class extends k {
   constructor() {
-    super(), this.defaultSlot = b(), this.closable = !1, this.compact = !1, this.title = "", this.skin = "beige", this.isDisplayed = !0, this.slotController = new f(this, this.defaultSlot);
-  }
-  handleClose() {
-    this.isDisplayed = !1, this.onClose && this.onClose();
+    super(), this.defaultSlot = u(), this.closable = m.props.closable.default, this.compact = m.props.compact.default, this.title = "", this.skin = m.props.skin.default, this._isClosed = !1, this.close = (s) => {
+      this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: s }, bubbles: !0 }));
+    }, this.slotController = new g(this, this.defaultSlot), this._isClosed = !1;
   }
   render() {
-    const l = {
+    const s = {
       "pkt-messagebox": !0,
       "pkt-messagebox--compact": this.compact,
       [`pkt-messagebox--${this.skin}`]: this.skin,
-      "pkt-messagebox--closable": this.closable
+      "pkt-messagebox--closable": this.closable,
+      "pkt-hide": this._isClosed
     };
-    return this.isDisplayed ? h`<div class=${k(l)}>
-      ${this.closable ? h`<div class="pkt-messagebox__close">
+    return c`<div class=${h(s)}>
+      ${this.closable ? c`<div class="pkt-messagebox__close">
             <button
-              @click=${this.handleClose}
+              @click=${this.close}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
             </button>
-          </div>` : c}
-      ${this.title ? h`<div class="pkt-messagebox__title">${this.title}</div>` : c}
-      <div class="pkt-messagebox__text" ${u(this.defaultSlot)}></div>
-    </div>` : c;
+          </div>` : d}
+      ${this.title ? c`<div class="pkt-messagebox__title">${this.title}</div>` : d}
+      <div class="pkt-messagebox__text" ${f(this.defaultSlot)}></div>
+    </div>`;
   }
 };
-s([
-  o({ type: Boolean, reflect: !0 })
+o([
+  n({ type: Boolean, reflect: !0 })
 ], t.prototype, "closable", 2);
-s([
-  o({ type: Boolean, reflect: !0 })
+o([
+  n({ type: Boolean, reflect: !0 })
 ], t.prototype, "compact", 2);
-s([
-  o({ type: String, reflect: !0 })
+o([
+  n({ type: String, reflect: !0 })
 ], t.prototype, "title", 2);
-s([
-  o({ type: String, reflect: !0 })
+o([
+  n({ type: String, reflect: !0 })
 ], t.prototype, "skin", 2);
-s([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "isDisplayed", 2);
-s([
-  o({ type: Function, reflect: !0 })
-], t.prototype, "onClose", 2);
-t = s([
-  y("pkt-messagebox")
+o([
+  b()
+], t.prototype, "_isClosed", 2);
+t = o([
+  v("pkt-messagebox")
 ], t);
 export {
   t as PktMessagebox

package/dist/pkt-tag.cjs

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-Ch54kkX5.cjs"),g=require("./directive-DtixNHDT.cjs"),t=require("./index-DSyh6tUw.cjs"),o=require("./ref-C3InMDfU.cjs");require("./index-Bpc07w_P.cjs");const h="pkt-tag",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",props:f,slots:k};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.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=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.E:t.x`
-            <button
-              class=${u.e(r)}
-              type=${this.type}
-              aria-label=${this.ariaLabel}
-              @click=${this.close}
-            >
-              ${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-              <span ${o.n(this.defaultSlot)}></span>
-              <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
-            </button>
-          `:t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-Ch54kkX5.cjs"),g=require("./directive-DtixNHDT.cjs"),t=require("./index-DSyh6tUw.cjs"),o=require("./ref-C3InMDfU.cjs");require("./index-Bpc07w_P.cjs");const h="pkt-tag",f=!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:"close"}},d={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",isElement:f,props:k,slots:d};var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,e=(n,s,l,r)=>{for(var i=r>1?void 0:r?b(s,l):s,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(r?c(s,l,i):c(i))||i);return r&&i&&y(s,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=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},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`
+        <button
+          class=${u.e(l)}
+          type=${this.type}
+          aria-label=${this.ariaLabel}
+          @click=${this.close}
+        >
+          ${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${o.n(this.defaultSlot)}></span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      `:t.x`
         <span class=${u.e(s)}>
           ${this.iconName&&t.x` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
-          <span ${o.n(this.defaultSlot)}> </span>
+          <span ${o.n(this.defaultSlot)}></span>
         </span>
       `}};e([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"type",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"ariaLabel",2);e([t.r()],exports.PktTag.prototype,"_isClosed",2);exports.PktTag=e([g.t("pkt-tag")],exports.PktTag);

package/dist/pkt-tag.js

@@ -1,9 +1,9 @@
 import { e as h } from "./class-map-DunDFQn7.js";
-import { t as y } from "./directive-Cxhakbpr.js";
-import { r as d, P as g, x as p, E as m, n as i } from "./index-CsTujnXs.js";
-import { e as k, P as b, n as f } from "./ref-By_W8A-f.js";
+import { t as d } from "./directive-Cxhakbpr.js";
+import { r as y, P as g, x as p, n as i } from "./index-CsTujnXs.js";
+import { e as m, P as k, n as f } from "./ref-By_W8A-f.js";
 import "./index-CyqOyy_9.js";
-const S = "pkt-tag", $ = {
+const b = "pkt-tag", S = !0, $ = {
   closeTag: {
     type: "boolean",
     required: !1,
@@ -62,58 +62,60 @@ const S = "pkt-tag", $ = {
     description: "Teksten til tag"
   }
 }, r = {
-  name: S,
+  name: b,
   "css-class": "pkt-tag",
+  isElement: S,
   props: $,
   slots: _
 };
-var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (a, l, n, o) => {
-  for (var s = o > 1 ? void 0 : o ? C(l, n) : l, c = a.length - 1, u; c >= 0; c--)
-    (u = a[c]) && (s = (o ? u(l, n, s) : u(s)) || s);
-  return o && s && x(l, n, s), s;
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (l, a, n, o) => {
+  for (var s = o > 1 ? void 0 : o ? C(a, n) : a, c = l.length - 1, u; c >= 0; c--)
+    (u = l[c]) && (s = (o ? u(a, n, s) : u(s)) || s);
+  return o && s && x(a, n, s), s;
 };
 let t = class extends g {
   constructor() {
-    super(), this.defaultSlot = k(), 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 = (a) => {
+    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 = (l) => {
       this._isClosed = !0, this.dispatchEvent(
         new CustomEvent("onClose", {
-          detail: { origin: a },
+          detail: { origin: l },
           bubbles: !0,
           composed: !0
         })
       );
-    }, this.slotController = new b(this, this.defaultSlot), this._isClosed = !1;
+    }, this.slotController = new k(this, this.defaultSlot), this._isClosed = !1;
   }
   render() {
-    const a = {
+    const l = {
       "pkt-tag": !0,
       [`pkt-tag--${this.size}`]: !!this.size,
       [`pkt-tag--${this.skin}`]: !!this.skin,
       [`pkt-tag--${this.textStyle}`]: !!this.textStyle
-    }, l = {
+    }, a = {
       "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-btn--icons-right-and-left": this.closeTag && !!this.iconName,
+      "pkt-hide": this._isClosed
     };
-    return this.closeTag ? this._isClosed ? m : p`
-            <button
-              class=${h(l)}
-              type=${this.type}
-              aria-label=${this.ariaLabel}
-              @click=${this.close}
-            >
-              ${this.iconName && p`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-              <span ${f(this.defaultSlot)}></span>
-              <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
-            </button>
-          ` : p`
-        <span class=${h(a)}>
+    return this.closeTag ? p`
+        <button
+          class=${h(a)}
+          type=${this.type}
+          aria-label=${this.ariaLabel}
+          @click=${this.close}
+        >
+          ${this.iconName && p`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${f(this.defaultSlot)}></span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      ` : p`
+        <span class=${h(l)}>
           ${this.iconName && p` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
-          <span ${f(this.defaultSlot)}> </span>
+          <span ${f(this.defaultSlot)}></span>
         </span>
       `;
   }
@@ -140,10 +142,10 @@ e([
   i({ type: String, reflect: !0 })
 ], t.prototype, "ariaLabel", 2);
 e([
-  d()
+  y()
 ], t.prototype, "_isClosed", 2);
 t = e([
-  y("pkt-tag")
+  d("pkt-tag")
 ], t);
 export {
   t as PktTag

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.5.2",
+  "version": "12.6.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "424129e45652c610b061e04186913ce42d62ead6"
+  "gitHead": "881984611d2b5537131ae1b8c6b30b367d4ba64c"
 }

package/src/components/alert/index.ts

@@ -3,9 +3,21 @@ import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
 import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import specs from 'componentSpecs/alert.json'
+
 import '../icon'
 
+type AlertSkin = 'error' | 'success' | 'warning' | 'info'
+type AlertAriaLive = 'off' | 'polite' | 'assertive'
+export interface IPktAlert {
+  skin?: AlertSkin
+  closeAlert?: boolean
+  title?: string
+  date?: string
+  ariaLive?: AlertAriaLive
+  compact?: boolean
+}
 @customElement('pkt-alert')
 export class PktAlert extends PktElement {
   defaultSlot: Ref<HTMLElement> = createRef()
@@ -13,32 +25,24 @@ export class PktAlert extends PktElement {
   constructor() {
     super()
     this.slotController = new PktSlotController(this, this.defaultSlot)
+    this._isClosed = false
   }
 
-  @property({ type: Boolean, reflect: true })
-  closable = false
-  @property({ type: Boolean, reflect: true })
-  compact = false
-  @property({ type: String, reflect: true })
-  title = ''
-  @property({ type: String, reflect: true })
-  skin: 'error' | 'success' | 'warning' | 'info' = 'info'
-  @property({ type: Boolean, reflect: true })
-  isDisplayed = true
-  @property({ type: Function, reflect: true })
-  onClose?: () => void
-  @property({ type: String, reflect: true })
-  ariaLive: 'off' | 'polite' | 'assertive' = 'polite'
-  @property({ type: Boolean, reflect: true })
-  closeAlert = false
-  @property({ type: String, reflect: true })
-  date = ''
+  @property({ type: Boolean, reflect: false }) compact = specs.props.compact.default
+  @property({ type: String, reflect: true }) title: string = ''
+  @property({ type: String, reflect: true }) skin: AlertSkin = specs.props.skin.default as AlertSkin
+  @property({ type: String, reflect: true }) ariaLive: AlertAriaLive = specs.props.ariaLive
+    .default as AlertAriaLive
+  @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
+  @property({ type: String, reflect: true }) date: string | null = null
 
-  private handleClose() {
-    this.isDisplayed = false
-    if (this.onClose) {
-      this.onClose()
-    }
+  @state() _isClosed: boolean = false
+
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(
+      new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
+    )
   }
 
   render() {
@@ -46,11 +50,9 @@ export class PktAlert extends PktElement {
       'pkt-alert': true,
       'pkt-alert--compact': this.compact,
       [`pkt-alert--${this.skin}`]: this.skin,
-      'pkt-alert--closable': this.closable,
+      'pkt-hide': this._isClosed,
     }
 
-    if (!this.isDisplayed) return nothing
-
     return html`
       <div class=${classMap(classes)} aria-live=${this.ariaLive}>
         <pkt-icon
@@ -58,7 +60,7 @@ export class PktAlert extends PktElement {
           name=${this.skin === 'info' ? 'alert-information' : `alert-${this.skin}`}
         ></pkt-icon>
 
-        ${this.closable
+        ${this.closeAlert
           ? html`
               <div class="pkt-alert__close">
                 <button
@@ -66,7 +68,7 @@ export class PktAlert extends PktElement {
                   class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
                   tabindex="0"
                   aria-label="close"
-                  @click=${this.handleClose}
+                  @click=${this.close}
                 >
                   <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
                 </button>

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { PktAlert } from './alert'
 export { PktCalendar } from './calendar'
 export { PktCard } from './card'
 export { PktComponent } from './component-template'

package/src/components/messagebox/index.ts

@@ -3,9 +3,20 @@ import { PktSlotController } from '../../controllers/pkt-slot-controller'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
 import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import specs from 'componentSpecs/messagebox.json'
+
 import '../icon'
 
+type MessageboxSkin = 'error' | 'success' | 'warning' | 'info'
+
+export interface IPktMessagebox {
+  skin?: MessageboxSkin
+  title?: string
+  compact?: boolean
+  closable?: boolean
+}
+
 @customElement('pkt-messagebox')
 export class PktMessagebox extends PktElement {
   defaultSlot: Ref<HTMLElement> = createRef()
@@ -13,26 +24,19 @@ export class PktMessagebox extends PktElement {
   constructor() {
     super()
     this.slotController = new PktSlotController(this, this.defaultSlot)
+    this._isClosed = false
   }
 
-  @property({ type: Boolean, reflect: true })
-  closable = false
-  @property({ type: Boolean, reflect: true })
-  compact = false
-  @property({ type: String, reflect: true })
-  title = ''
-  @property({ type: String, reflect: true })
-  skin = 'beige'
-  @property({ type: Boolean, reflect: true })
-  isDisplayed = true
-  @property({ type: Function, reflect: true })
-  onClose?: () => void
-
-  handleClose() {
-    this.isDisplayed = false
-    if (this.onClose) {
-      this.onClose()
-    }
+  @property({ type: Boolean, reflect: true }) closable = specs.props.closable.default
+  @property({ type: Boolean, reflect: true }) compact = specs.props.compact.default
+  @property({ type: String, reflect: true }) title = ''
+  @property({ type: String, reflect: true }) skin = specs.props.skin.default as MessageboxSkin
+
+  @state() _isClosed: boolean = false
+
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(new CustomEvent('close', { detail: { origin: event }, bubbles: true }))
   }
 
   render() {
@@ -41,15 +45,14 @@ export class PktMessagebox extends PktElement {
       'pkt-messagebox--compact': this.compact,
       [`pkt-messagebox--${this.skin}`]: this.skin,
       'pkt-messagebox--closable': this.closable,
+      'pkt-hide': this._isClosed,
     }
 
-    if (!this.isDisplayed) return nothing
-
     return html`<div class=${classMap(classes)}>
       ${this.closable
         ? html`<div class="pkt-messagebox__close">
             <button
-              @click=${this.handleClose}
+              @click=${this.close}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>

package/src/components/tag/index.ts

@@ -1,6 +1,6 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import { html, nothing } from 'lit'
+import { html } from 'lit'
 import { PktElement } from '../element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref } from 'lit/directives/ref.js'
@@ -10,15 +10,16 @@ import specs from 'componentSpecs/tag.json'
 import '../icon'
 
 type TagSize = 'small' | 'medium' | 'large'
-type TagSkin = 'blue' | 'green' | 'red' | 'yellow'
+type TagSkin = 'blue' | 'green' | 'red' | 'yellow' | 'beige' | 'blue-light' | 'gray' | 'grey'
+type TagType = 'button' | 'reset' | 'submit'
 
 export interface IPktTag {
   closeTag?: boolean
   size?: TagSize
-  skin?: 'blue' | 'green' | 'red' | 'yellow'
+  skin?: TagSkin
   textStyle?: string
   iconName?: string
-  type?: string
+  type?: TagType
   ariaLabel?: string
 }
 
@@ -41,7 +42,7 @@ export class PktTag extends PktElement {
   @property({ type: String, reflect: true }) skin: TagSkin = specs.props.skin.default as TagSkin
   @property({ type: String, reflect: true }) textStyle: string = specs.props.textStyle.default
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
-  @property({ type: String, reflect: true }) type: string = specs.props.type.default
+  @property({ type: String, reflect: true }) type: TagType = specs.props.type.default as TagType
   @property({ type: String, reflect: true }) ariaLabel: string = specs.props.ariaLabel.default
 
   /**
@@ -79,30 +80,29 @@ export class PktTag extends PktElement {
       [`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,
     }
 
     if (this.closeTag) {
-      return !this._isClosed
-        ? html`
-            <button
-              class=${classMap(btnClasses)}
-              type=${this.type}
-              aria-label=${this.ariaLabel}
-              @click=${this.close}
-            >
-              ${this.iconName &&
-              html`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-              <span ${ref(this.defaultSlot)}></span>
-              <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
-            </button>
-          `
-        : nothing
+      return html`
+        <button
+          class=${classMap(btnClasses)}
+          type=${this.type}
+          aria-label=${this.ariaLabel}
+          @click=${this.close}
+        >
+          ${this.iconName &&
+          html`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${ref(this.defaultSlot)}></span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      `
     } else {
       return html`
         <span class=${classMap(classes)}>
           ${this.iconName &&
           html` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
-          <span ${ref(this.defaultSlot)}> </span>
+          <span ${ref(this.defaultSlot)}></span>
         </span>
       `
     }