@oslokommune/punkt-elements 12.28.0 → 12.29.0

package/dist/button-BnmFhao8.js

@@ -0,0 +1,107 @@
+import { n as s, P as c, x as l, E as p, a as u } from "./element-D_ZgQsSr.js";
+import { P as b } from "./pkt-slot-controller-Clbye6cM.js";
+import { e as f, n as k } from "./ref-BSGI8ogR.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, n, r, o) => {
+  for (var a = o > 1 ? void 0 : o ? y(n, r) : n, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (a = (o ? h(n, r, a) : h(a)) || a);
+  return o && a && m(n, r, a), a;
+};
+let e = class extends c {
+  constructor() {
+    super(), this.internals = this.attachInternals(), this.defaultSlot = f(), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.isLoading = !1, this.disabled = !1, this.slotController = new b(this, this.defaultSlot);
+  }
+  // Lifecycle
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown);
+  }
+  updated(t) {
+    super.updated(t), this.setAttribute("role", "button"), this.disabled ? (this.getAttribute("tabindex") !== "-1" && this.setAttribute("tabindex", "-1"), this.getAttribute("aria-disabled") !== "true" && this.setAttribute("aria-disabled", "true")) : (this.getAttribute("tabindex") !== "0" && this.setAttribute("tabindex", "0"), this.getAttribute("aria-disabled") !== "false" && this.setAttribute("aria-disabled", "false")), this.isLoading ? this.getAttribute("aria-busy") !== "true" && this.setAttribute("aria-busy", "true") : this.hasAttribute("aria-busy") && this.removeAttribute("aria-busy"), this.updateElementClasses();
+  }
+  // Render
+  render() {
+    return l`
+      <div class="pkt-btn__element-content">
+        ${this.isLoading ? l`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+            ></pkt-icon>` : p}
+        ${this.variant !== "label-only" ? l`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>` : p}
+        <span class="pkt-btn__text" ${k(this.defaultSlot)}></span>
+        ${this.variant === "icons-right-and-left" ? l`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>` : p}
+      </div>
+    `;
+  }
+  // Methods
+  updateElementClasses() {
+    const t = /* @__PURE__ */ new Set(), n = this.getAttribute("class");
+    t.add("pkt-btn"), n && n.split(" ").forEach((r) => t.add(r)), this.size && t.add(`pkt-btn--${this.size}`), this.skin && t.add(`pkt-btn--${this.skin}`), this.variant && t.add(`pkt-btn--${this.variant}`), this.color && t.add(`pkt-btn--${this.color}`), this.isLoading && t.add("pkt-btn--active"), this.state && t.add(`pkt-btn--${this.state}`), this.disabled && t.add("pkt-btn--disabled"), this.className = [...t].join(" ");
+  }
+  handleClick(t) {
+    if (this.disabled || this.isLoading) {
+      t.preventDefault(), t.stopImmediatePropagation();
+      return;
+    }
+    if (this.type === "submit" && this.internals.form) {
+      this.internals.form.requestSubmit();
+      return;
+    }
+    if (this.type === "reset" && this.internals.form) {
+      this.internals.form.reset();
+      return;
+    }
+    this.onClick && typeof this.onClick == "function" && this.onClick !== this.handleClick && this.onClick(t), this.dispatchEvent(
+      new CustomEvent("button-click", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: t }
+      })
+    );
+  }
+  handleKeydown(t) {
+    this.disabled || this.isLoading || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.handleClick(t));
+  }
+};
+e.formAssociated = !0;
+i([
+  s({ type: String })
+], e.prototype, "iconName", 2);
+i([
+  s({ type: String })
+], e.prototype, "secondIconName", 2);
+i([
+  s({ type: String })
+], e.prototype, "mode", 2);
+i([
+  s({ type: String })
+], e.prototype, "size", 2);
+i([
+  s({ type: String })
+], e.prototype, "color", 2);
+i([
+  s({ type: String })
+], e.prototype, "skin", 2);
+i([
+  s({ type: String })
+], e.prototype, "variant", 2);
+i([
+  s({ type: String, reflect: !0 })
+], e.prototype, "state", 2);
+i([
+  s({ type: String, reflect: !0 })
+], e.prototype, "type", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "isLoading", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+e = i([
+  u("pkt-button")
+], e);
+export {
+  e as P
+};

package/dist/button-DPb5WL9h.cjs

@@ -0,0 +1,12 @@
+"use strict";const e=require("./element-r-PeQ419.cjs"),h=require("./pkt-slot-controller-Oc32unDk.cjs"),d=require("./ref-BUWgvhgU.cjs");var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(o,t,n,a)=>{for(var s=a>1?void 0:a?u(t,n):t,r=o.length-1,l;r>=0;r--)(l=o[r])&&(s=(a?l(t,n,s):l(s))||s);return a&&s&&p(t,n,s),s};exports.PktButton=class extends e.PktElement{constructor(){super(),this.internals=this.attachInternals(),this.defaultSlot=d.e(),this.iconName="user",this.secondIconName="user",this.mode="light",this.size="medium",this.skin="primary",this.variant="label-only",this.state="normal",this.type="button",this.isLoading=!1,this.disabled=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)}updated(t){super.updated(t),this.setAttribute("role","button"),this.disabled?(this.getAttribute("tabindex")!=="-1"&&this.setAttribute("tabindex","-1"),this.getAttribute("aria-disabled")!=="true"&&this.setAttribute("aria-disabled","true")):(this.getAttribute("tabindex")!=="0"&&this.setAttribute("tabindex","0"),this.getAttribute("aria-disabled")!=="false"&&this.setAttribute("aria-disabled","false")),this.isLoading?this.getAttribute("aria-busy")!=="true"&&this.setAttribute("aria-busy","true"):this.hasAttribute("aria-busy")&&this.removeAttribute("aria-busy"),this.updateElementClasses()}render(){return e.x`
+      <div class="pkt-btn__element-content">
+        ${this.isLoading?e.x`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+            ></pkt-icon>`:e.E}
+        ${this.variant!=="label-only"?e.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:e.E}
+        <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
+        ${this.variant==="icons-right-and-left"?e.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:e.E}
+      </div>
+    `}updateElementClasses(){const t=new Set,n=this.getAttribute("class");t.add("pkt-btn"),n&&n.split(" ").forEach(a=>t.add(a)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){this.disabled||this.isLoading||(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.handleClick(t))}};exports.PktButton.formAssociated=!0;i([e.n({type:String})],exports.PktButton.prototype,"iconName",2);i([e.n({type:String})],exports.PktButton.prototype,"secondIconName",2);i([e.n({type:String})],exports.PktButton.prototype,"mode",2);i([e.n({type:String})],exports.PktButton.prototype,"size",2);i([e.n({type:String})],exports.PktButton.prototype,"color",2);i([e.n({type:String})],exports.PktButton.prototype,"skin",2);i([e.n({type:String})],exports.PktButton.prototype,"variant",2);i([e.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);i([e.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);i([e.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);i([e.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);exports.PktButton=i([e.t("pkt-button")],exports.PktButton);

package/dist/button.d.ts

@@ -0,0 +1,15 @@
+export { }
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
+declare global {
+    interface Window {
+        pktTz: string;
+    }
+}

package/dist/index.d.ts

@@ -14,6 +14,20 @@ import { TZDate } from '@date-fns/tz';
  */
 declare type ElementProps<Element, PropKeys extends keyof Element> = Partial<Pick<Element, PropKeys>>;
 
+export declare interface IPktButton {
+    iconName?: string;
+    secondIconName?: string;
+    mode?: TPktButtonMode;
+    size?: TPktButtonSize;
+    color?: TPktButtonColor;
+    skin?: TPktButtonSkin;
+    variant?: TPktButtonVariant;
+    state?: TPktButtonState;
+    type?: TPktButtonType;
+    isLoading?: boolean;
+    disabled?: boolean;
+}
+
 declare interface IPktLinkCard {
     title?: string;
     href?: string;
@@ -81,6 +95,31 @@ export declare class PktAlert extends PktElement {
     render(): TemplateResult<1>;
 }
 
+export declare class PktButton extends PktElement implements IPktButton {
+    static formAssociated: boolean;
+    private internals;
+    defaultSlot: Ref<HTMLElement>;
+    constructor();
+    iconName: string;
+    secondIconName: string;
+    mode?: TPktButtonMode;
+    size: TPktButtonSize;
+    color?: TPktButtonColor;
+    skin: TPktButtonSkin;
+    variant: TPktButtonVariant;
+    state?: TPktButtonState;
+    type: TPktButtonType;
+    isLoading: boolean;
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string | number | symbol, unknown>): void;
+    render(): TemplateResult<1>;
+    private updateElementClasses;
+    private handleClick;
+    private handleKeydown;
+}
+
 export declare class PktCalendar extends PktElement {
     /**
      * Element attributes
@@ -665,6 +704,20 @@ declare type TLinkCardSkin = 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'b
 
 declare type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
 
+export declare type TPktButtonColor = 'blue' | 'blue-outline' | 'green' | 'green-outline' | 'green-dark' | 'green-dark-outline' | 'beige-light' | 'beige-dark-outline' | 'yellow' | 'yellow-outline' | 'red' | 'red-outline';
+
+export declare type TPktButtonMode = 'light' | 'dark';
+
+export declare type TPktButtonSize = 'small' | 'medium' | 'large';
+
+export declare type TPktButtonSkin = 'primary' | 'secondary' | 'tertiary';
+
+export declare type TPktButtonState = 'normal' | 'focus' | 'hover' | 'active';
+
+export declare type TPktButtonType = 'button' | 'submit' | 'reset';
+
+export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
+
 declare type TPktSize = 'small' | 'medium' | 'large';
 
 export declare type TProgressbarRole = 'progressbar' | 'meter';

package/dist/pkt-button.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-DPb5WL9h.cjs"),e=t.PktButton;Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>t.PktButton});exports.default=e;

package/dist/pkt-button.js

@@ -0,0 +1,6 @@
+import { P as t } from "./button-BnmFhao8.js";
+const a = t;
+export {
+  t as PktButton,
+  a as default
+};

package/dist/pkt-index.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./alert-Cx7AYawa.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),d=require("./card-Bxe-jQD_.cjs"),k=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),P=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-BUWgvhgU.cjs"),b=require("./class-map-Dzci3Pfe.cjs"),h=require("./datepicker-D6ifQ2so.cjs"),m=require("./helptext-C0mrdhRi.cjs"),g=require("./icon-DcJIqTIY.cjs"),f=require("./input-wrapper-Dqj4uers.cjs"),y=require("./link-C_bwx1Ml.cjs"),x=require("./linkcard-C6mZOE0R.cjs"),C=require("./messagebox-DJzOyZwE.cjs"),O=require("./modal-CV3LSNHb.cjs"),j=require("./progressbar-C_q48_qh.cjs"),q=require("./radiobutton-3e105CXX.cjs"),v=require("./tag-BMyii4Da.cjs"),S=require("./textarea-DxpzI67n.cjs"),$=require("./textinput-BRupcl9v.cjs"),_=require("./select-DJu4Wr1y.cjs");var T=Object.defineProperty,L=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?L(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&T(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new P.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
-      <div class="${b.e(e)}">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./alert-Cx7AYawa.cjs"),d=require("./button-DPb5WL9h.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),k=require("./card-Bxe-jQD_.cjs"),P=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-BUWgvhgU.cjs"),h=require("./class-map-Dzci3Pfe.cjs"),m=require("./datepicker-D6ifQ2so.cjs"),g=require("./helptext-C0mrdhRi.cjs"),f=require("./icon-DcJIqTIY.cjs"),y=require("./input-wrapper-Dqj4uers.cjs"),x=require("./link-C_bwx1Ml.cjs"),C=require("./linkcard-C6mZOE0R.cjs"),O=require("./messagebox-DJzOyZwE.cjs"),j=require("./modal-CV3LSNHb.cjs"),q=require("./progressbar-C_q48_qh.cjs"),v=require("./radiobutton-3e105CXX.cjs"),S=require("./tag-BMyii4Da.cjs"),$=require("./textarea-DxpzI67n.cjs"),_=require("./textinput-BRupcl9v.cjs"),T=require("./select-DJu4Wr1y.cjs");var L=Object.defineProperty,M=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?M(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&L(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new b.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+      <div class="${h.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
         <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:c.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>p.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>c.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>d.PktCard});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>k.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>h.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>m.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>g.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>f.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>y.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>x.PktLinkCard});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>C.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>O.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>j.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>q.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>v.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>S.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>$.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>_.PktSelect});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:c.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>p.PktAlert});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>d.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>c.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>k.PktCard});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>P.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>m.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>g.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>f.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>y.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>x.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>C.PktLinkCard});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>O.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>j.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>q.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>v.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>S.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>$.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>_.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>T.PktSelect});

package/dist/pkt-index.js

@@ -1,26 +1,27 @@
 import { P as w } from "./alert-C_FCsFfo.js";
+import { P as O } from "./button-BnmFhao8.js";
 import { c as d } from "./calendar-DevhqUoj.js";
-import { P as O } from "./calendar-DevhqUoj.js";
-import { P as j } from "./card-Db2Ex1cH.js";
-import { P as D } from "./checkbox-Dw2CX5zY.js";
+import { P as j } from "./calendar-DevhqUoj.js";
+import { P as B } from "./card-Db2Ex1cH.js";
+import { P as I } from "./checkbox-Dw2CX5zY.js";
 import { P as f, x as m, t as k, n, a as c } from "./element-D_ZgQsSr.js";
 import { P as x } from "./pkt-slot-controller-Clbye6cM.js";
 import { e as h, n as P } from "./ref-BSGI8ogR.js";
 import { e as u } from "./class-map-BYCG9U47.js";
-import { P as R } from "./datepicker-gZ_eVIyS.js";
-import { P as G } from "./helptext-RPq_TKzJ.js";
-import { P as M } from "./icon-BBFK-d-X.js";
-import { P as N } from "./input-wrapper-D-pEAZaj.js";
-import { P as W } from "./link-CDkU7zsB.js";
-import { P as z } from "./linkcard-Dr5iKZrV.js";
-import { P as J } from "./messagebox-BgLZ5zul.js";
-import { P as V } from "./modal-CnSYSYsQ.js";
-import { P as Y } from "./progressbar-CuZj4FWi.js";
-import { P as tt } from "./radiobutton-CcZ2-z8q.js";
-import { P as rt } from "./tag-DVk69673.js";
-import { P as ot } from "./textarea-C8-lnWwu.js";
-import { P as nt } from "./textinput-DRkv93vp.js";
-import { P as pt } from "./select-CnizDIYN.js";
+import { P as G } from "./datepicker-gZ_eVIyS.js";
+import { P as M } from "./helptext-RPq_TKzJ.js";
+import { P as N } from "./icon-BBFK-d-X.js";
+import { P as W } from "./input-wrapper-D-pEAZaj.js";
+import { P as z } from "./link-CDkU7zsB.js";
+import { P as J } from "./linkcard-Dr5iKZrV.js";
+import { P as V } from "./messagebox-BgLZ5zul.js";
+import { P as Y } from "./modal-CnSYSYsQ.js";
+import { P as tt } from "./progressbar-CuZj4FWi.js";
+import { P as rt } from "./radiobutton-CcZ2-z8q.js";
+import { P as ot } from "./tag-DVk69673.js";
+import { P as nt } from "./textarea-C8-lnWwu.js";
+import { P as pt } from "./textinput-DRkv93vp.js";
+import { P as mt } from "./select-CnizDIYN.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
@@ -114,22 +115,23 @@ s = o([
 ], s);
 export {
   w as PktAlert,
-  O as PktCalendar,
-  j as PktCard,
-  D as PktCheckbox,
+  O as PktButton,
+  j as PktCalendar,
+  B as PktCard,
+  I as PktCheckbox,
   s as PktComponent,
-  R as PktDatepicker,
-  G as PktHelptext,
-  M as PktIcon,
-  N as PktInputWrapper,
-  W as PktLink,
-  z as PktLinkCard,
-  J as PktMessagebox,
-  V as PktModal,
-  Y as PktProgressbar,
-  tt as PktRadioButton,
-  pt as PktSelect,
-  rt as PktTag,
-  ot as PktTextarea,
-  nt as PktTextinput
+  G as PktDatepicker,
+  M as PktHelptext,
+  N as PktIcon,
+  W as PktInputWrapper,
+  z as PktLink,
+  J as PktLinkCard,
+  V as PktMessagebox,
+  Y as PktModal,
+  tt as PktProgressbar,
+  rt as PktRadioButton,
+  mt as PktSelect,
+  ot as PktTag,
+  nt as PktTextarea,
+  pt as PktTextinput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.28.0",
+  "version": "12.29.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.27.1",
-    "@oslokommune/punkt-css": "^12.28.0",
+    "@oslokommune/punkt-css": "^12.29.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3dee4a0c63e59fe126be318bad620cfb9b9a6c6f"
+  "gitHead": "2f85764bd3da7652eacddf71afb9ab9f0ff652d4"
 }

package/src/components/button/button.ts

@@ -0,0 +1,200 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { html, nothing } from 'lit'
+import { property, customElement } from 'lit/decorators.js'
+import { createRef, Ref, ref } from 'lit/directives/ref.js'
+
+export type TPktButtonMode = 'light' | 'dark'
+export type TPktButtonSize = 'small' | 'medium' | 'large'
+export type TPktButtonColor =
+  | 'blue'
+  | 'blue-outline'
+  | 'green'
+  | 'green-outline'
+  | 'green-dark'
+  | 'green-dark-outline'
+  | 'beige-light'
+  | 'beige-dark-outline'
+  | 'yellow'
+  | 'yellow-outline'
+  | 'red'
+  | 'red-outline'
+export type TPktButtonSkin = 'primary' | 'secondary' | 'tertiary'
+export type TPktButtonVariant =
+  | 'label-only'
+  | 'icon-left'
+  | 'icon-right'
+  | 'icon-only'
+  | 'icons-right-and-left'
+export type TPktButtonState = 'normal' | 'focus' | 'hover' | 'active'
+export type TPktButtonType = 'button' | 'submit' | 'reset'
+
+export interface IPktButton {
+  iconName?: string
+  secondIconName?: string
+  mode?: TPktButtonMode
+  size?: TPktButtonSize
+  color?: TPktButtonColor
+  skin?: TPktButtonSkin
+  variant?: TPktButtonVariant
+  state?: TPktButtonState
+  type?: TPktButtonType
+  isLoading?: boolean
+  disabled?: boolean
+}
+@customElement('pkt-button')
+export class PktButton extends PktElement implements IPktButton {
+  static formAssociated = true
+  private internals = this.attachInternals()
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  // Properties
+  @property({ type: String }) iconName: string = 'user'
+  @property({ type: String }) secondIconName: string = 'user'
+  @property({ type: String }) mode?: TPktButtonMode = 'light'
+  @property({ type: String }) size: TPktButtonSize = 'medium'
+  @property({ type: String }) color?: TPktButtonColor
+  @property({ type: String }) skin: TPktButtonSkin = 'primary'
+  @property({ type: String }) variant: TPktButtonVariant = 'label-only'
+  @property({ type: String, reflect: true }) state?: TPktButtonState = 'normal'
+  @property({ type: String, reflect: true }) type: TPktButtonType = 'button'
+  @property({ type: Boolean, reflect: true }) isLoading: boolean = false
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false
+
+  // Lifecycle
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener('click', this.handleClick as EventListener)
+    this.addEventListener('keydown', this.handleKeydown as EventListener)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener('click', this.handleClick as EventListener)
+    this.removeEventListener('keydown', this.handleKeydown as EventListener)
+  }
+
+  updated(changedProps: Map<string | number | symbol, unknown>) {
+    super.updated(changedProps)
+
+    this.setAttribute('role', 'button')
+
+    if (this.disabled) {
+      if (this.getAttribute('tabindex') !== '-1') {
+        this.setAttribute('tabindex', '-1')
+      }
+      if (this.getAttribute('aria-disabled') !== 'true') {
+        this.setAttribute('aria-disabled', 'true')
+      }
+    } else {
+      if (this.getAttribute('tabindex') !== '0') {
+        this.setAttribute('tabindex', '0')
+      }
+      if (this.getAttribute('aria-disabled') !== 'false') {
+        this.setAttribute('aria-disabled', 'false')
+      }
+    }
+
+    if (this.isLoading) {
+      if (this.getAttribute('aria-busy') !== 'true') {
+        this.setAttribute('aria-busy', 'true')
+      }
+    } else {
+      if (this.hasAttribute('aria-busy')) {
+        this.removeAttribute('aria-busy')
+      }
+    }
+
+    this.updateElementClasses()
+  }
+
+  // Render
+
+  render() {
+    return html`
+      <div class="pkt-btn__element-content">
+        ${this.isLoading
+          ? html`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+            ></pkt-icon>`
+          : nothing}
+        ${this.variant !== 'label-only'
+          ? html`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`
+          : nothing}
+        <span class="pkt-btn__text" ${ref(this.defaultSlot)}></span>
+        ${this.variant === 'icons-right-and-left'
+          ? html`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`
+          : nothing}
+      </div>
+    `
+  }
+
+  // Methods
+
+  private updateElementClasses() {
+    const classes = new Set<string>()
+    const currentClasses = this.getAttribute('class')
+
+    classes.add('pkt-btn')
+
+    if (currentClasses) {
+      currentClasses.split(' ').forEach((classname) => classes.add(classname))
+    }
+    if (this.size) classes.add(`pkt-btn--${this.size}`)
+    if (this.skin) classes.add(`pkt-btn--${this.skin}`)
+    if (this.variant) classes.add(`pkt-btn--${this.variant}`)
+    if (this.color) classes.add(`pkt-btn--${this.color}`)
+    if (this.isLoading) classes.add('pkt-btn--active')
+    if (this.state) classes.add(`pkt-btn--${this.state}`)
+    if (this.disabled) classes.add('pkt-btn--disabled')
+
+    this.className = [...classes].join(' ')
+  }
+
+  private handleClick(event: MouseEvent) {
+    if (this.disabled || this.isLoading) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      return
+    }
+
+    if (this.type === 'submit' && this.internals.form) {
+      this.internals.form.requestSubmit()
+      return
+    }
+    if (this.type === 'reset' && this.internals.form) {
+      this.internals.form.reset()
+      return
+    }
+
+    if (this.onClick && typeof this.onClick === 'function' && this.onClick !== this.handleClick) {
+      this.onClick(event)
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('button-click', {
+        bubbles: true,
+        composed: true,
+        detail: { originalEvent: event },
+      }),
+    )
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    if (this.disabled || this.isLoading) return
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      this.handleClick(event as unknown as MouseEvent)
+    }
+  }
+}
+export default PktButton

package/src/components/button/index.ts

@@ -0,0 +1,15 @@
+import { PktButton } from './button'
+
+export type {
+  IPktButton,
+  TPktButtonMode,
+  TPktButtonSize,
+  TPktButtonColor,
+  TPktButtonSkin,
+  TPktButtonVariant,
+  TPktButtonState,
+  TPktButtonType,
+} from './button'
+
+export { PktButton }
+export default PktButton

package/src/components/index.ts

@@ -1,5 +1,6 @@
 // Export components
 export { PktAlert } from '@/components/alert'
+export { PktButton } from '@/components/button'
 export { PktCalendar } from '@/components/calendar'
 export { PktCard } from '@/components/card'
 export { PktCheckbox } from '@/components/checkbox'
@@ -20,6 +21,18 @@ export { PktTextinput } from '@/components/textinput'
 export { PktSelect } from '@/components/select'
 
 // Export types
+
+export type {
+  IPktButton,
+  TPktButtonMode,
+  TPktButtonSize,
+  TPktButtonColor,
+  TPktButtonSkin,
+  TPktButtonVariant,
+  TPktButtonState,
+  TPktButtonType,
+} from '@/components/button'
+
 export type {
   IPktProgressbar,
   TProgressbarRole,