@oslokommune/punkt-elements 18.3.1 → 18.5.0

package/CHANGELOG.md

@@ -5,6 +5,48 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [18.5.0](https://github.com/oslokommune/punkt/compare/18.4.0...18.5.0) (2026-09-07)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Conformance-testing for HTML mellom rammeverkene (#3618). Et nytt testsett som kjører gjennom alle komponenter, rendrer de ut, og sjekker at HTML er likt mellom komponentene. Les README for ny pakke for detaljert info.
+  
+  - Endringer i CSS og komponentene for å få HTML-output helt identisk
+  - Bruker i større grad Astro-komponenter for å lage testsider i CSS-pakken (enklere å vedlikeholde)
+  - Flere bugfikser som er avdekket gjennom konformitetstestingen
+  - La til noen nye udokumenterte metoder i card for å støtte potensiell ny bruker bedre
+  
+  OBS! Endret default på `loader`-komponentene, fordi `shapes` var aldri ment å være default, og dokumentasjonen og specs sier at `rainbow` skal være default.
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [18.4.0](https://github.com/oslokommune/punkt/compare/18.3.2...18.4.0) (2026-09-03)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [18.3.1](https://github.com/oslokommune/punkt/compare/18.3.0...18.3.1) (2026-09-02)
 
 ### ⚠ BREAKING CHANGES

package/dist/{accordion-4eAsO-Sr.js → accordion-D814csFx.js}

@@ -1,7 +1,7 @@
 import { _ as e, c as t, d as n, l as r, n as i, u as a } from "./element-e2MAMNEP.js";
 import { t as o } from "./class-map-BL_YL_Ed.js";
-import { n as s, t as c } from "./element-with-slot-COOwQUxM.js";
-import { t as l } from "./if-defined-r8tKY4tG.js";
+import { t as s } from "./if-defined-r8tKY4tG.js";
+import { n as c, t as l } from "./element-with-slot-COOwQUxM.js";
 import { n as u, r as d, t as f } from "./consume-BDnMAp2g.js";
 import { n as p, t as m } from "./ref-lE1mGUOL.js";
 //#region src/components/accordion/accordion-context.ts
@@ -43,7 +43,7 @@ var h = d(Symbol("pkt-accordion-context")), g = class extends t {
         part="container"
         class=${o(t)}
         data-testid="pkt-accordion"
-        aria-labelledby=${this.ariaLabelledBy}
+        aria-labelledby=${s(this.ariaLabelledBy || void 0)}
       >
         <slot></slot>
       </div>
@@ -74,7 +74,7 @@ try {
 }
 //#endregion
 //#region src/components/accordion/accordionitem.ts
-var _ = class extends c {
+var _ = class extends l {
 	constructor() {
 		super(), this.defaultOpen = !1, this.title = "", this.skin = void 0, this.compact = !1, this.isOpen = !1, this.name = void 0, this.accordionItemRef = m();
 	}
@@ -93,7 +93,7 @@ var _ = class extends c {
         id=${this.id}
         ?open=${this.isOpen}
         ${p(this.accordionItemRef)}
-        name=${l(this.name)}
+        name=${s(this.name)}
       >
         <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
           ${this.title}
@@ -121,7 +121,7 @@ var _ = class extends c {
           id="pkt-accordion-item__content-${this.id}"
           role="region"
         >
-          <div class="pkt-accordion-item__content-inner">${s(this)}</div>
+          <div class="pkt-accordion-item__content-inner">${c(this)}</div>
         </div>
       </details>
     `;

package/dist/{accordion-DOa5vubf.cjs → accordion-E0-pLzBq.cjs}

@@ -1,19 +1,19 @@
-const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./element-with-slot-MkibfzHp.cjs"),r=require("./if-defined-BeVQnl3C.cjs"),i=require("./consume-Le4HztPo.cjs"),a=require("./ref-BkV4Cd8U.cjs");var o=i.r(Symbol(`pkt-accordion-context`)),s=class extends e.c{constructor(...e){super(...e),this.ariaLabelledBy=``,this.compact=!1,this.skin=`borderless`,this.name=``,this.context={skin:this.skin}}willUpdate(e){e.has(`skin`)&&(this.context={...this.context,skin:this.skin})}updated(e){e.has(`name`)&&this.updateAccordionItemNames()}updateAccordionItemNames(){if(this.name){let e=this.renderRoot?.querySelector(`slot`);e&&e.assignedElements().forEach(e=>{e.tagName.toLowerCase()===`pkt-accordion-item`&&(e.hasAttribute(`name`)||e.setAttribute(`name`,this.name))})}}firstUpdated(){let e=this.renderRoot?.querySelector(`slot`);e&&e.addEventListener(`slotchange`,()=>{this.updateAccordionItemNames()})}render(){let n={"pkt-accordion":!0,"pkt-accordion--compact":this.compact,[`pkt-accordion--${this.skin}`]:this.skin};return e._`
+const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./if-defined-BeVQnl3C.cjs"),r=require("./element-with-slot-MkibfzHp.cjs"),i=require("./consume-Le4HztPo.cjs"),a=require("./ref-BkV4Cd8U.cjs");var o=i.r(Symbol(`pkt-accordion-context`)),s=class extends e.c{constructor(...e){super(...e),this.ariaLabelledBy=``,this.compact=!1,this.skin=`borderless`,this.name=``,this.context={skin:this.skin}}willUpdate(e){e.has(`skin`)&&(this.context={...this.context,skin:this.skin})}updated(e){e.has(`name`)&&this.updateAccordionItemNames()}updateAccordionItemNames(){if(this.name){let e=this.renderRoot?.querySelector(`slot`);e&&e.assignedElements().forEach(e=>{e.tagName.toLowerCase()===`pkt-accordion-item`&&(e.hasAttribute(`name`)||e.setAttribute(`name`,this.name))})}}firstUpdated(){let e=this.renderRoot?.querySelector(`slot`);e&&e.addEventListener(`slotchange`,()=>{this.updateAccordionItemNames()})}render(){let r={"pkt-accordion":!0,"pkt-accordion--compact":this.compact,[`pkt-accordion--${this.skin}`]:this.skin};return e._`
       <div
         part="container"
-        class=${t.t(n)}
+        class=${t.t(r)}
         data-testid="pkt-accordion"
-        aria-labelledby=${this.ariaLabelledBy}
+        aria-labelledby=${n.t(this.ariaLabelledBy||void 0)}
       >
         <slot></slot>
       </div>
-    `}};e.n([e.u({type:String,reflect:!0,attribute:`aria-labelledby`})],s.prototype,`ariaLabelledBy`,void 0),e.n([e.u({type:Boolean,reflect:!0,attribute:`compact`})],s.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`skin`})],s.prototype,`skin`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`name`})],s.prototype,`name`,void 0),e.n([i.n({context:o}),e.l()],s.prototype,`context`,void 0);try{e.d(`pkt-accordion`)(s)}catch{console.warn(`Forsøker å definere <pkt-accordion>, men den er allerede definert`)}var c=class extends n.t{constructor(){super(),this.defaultOpen=!1,this.title=``,this.skin=void 0,this.compact=!1,this.isOpen=!1,this.name=void 0,this.accordionItemRef=a.t()}firstUpdated(e){this.defaultOpen&&(this.isOpen=!0)}render(){let i={"pkt-accordion-item":!0,"pkt-accordion-item--compact":this.compact,[`pkt-accordion-item--${this.skin}`]:!!this.skin},o=(this.skin??this.context?.skin)===`plus-minus`;return e._`
+    `}};e.n([e.u({type:String,reflect:!0,attribute:`aria-labelledby`})],s.prototype,`ariaLabelledBy`,void 0),e.n([e.u({type:Boolean,reflect:!0,attribute:`compact`})],s.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`skin`})],s.prototype,`skin`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`name`})],s.prototype,`name`,void 0),e.n([i.n({context:o}),e.l()],s.prototype,`context`,void 0);try{e.d(`pkt-accordion`)(s)}catch{console.warn(`Forsøker å definere <pkt-accordion>, men den er allerede definert`)}var c=class extends r.t{constructor(){super(),this.defaultOpen=!1,this.title=``,this.skin=void 0,this.compact=!1,this.isOpen=!1,this.name=void 0,this.accordionItemRef=a.t()}firstUpdated(e){this.defaultOpen&&(this.isOpen=!0)}render(){let i={"pkt-accordion-item":!0,"pkt-accordion-item--compact":this.compact,[`pkt-accordion-item--${this.skin}`]:!!this.skin},o=(this.skin??this.context?.skin)===`plus-minus`;return e._`
       <details
         class=${t.t(i)}
         id=${this.id}
         ?open=${this.isOpen}
         ${a.n(this.accordionItemRef)}
-        name=${r.t(this.name)}
+        name=${n.t(this.name)}
       >
         <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
           ${this.title}
@@ -41,7 +41,7 @@ const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),
           id="pkt-accordion-item__content-${this.id}"
           role="region"
         >
-          <div class="pkt-accordion-item__content-inner">${n.n(this)}</div>
+          <div class="pkt-accordion-item__content-inner">${r.n(this)}</div>
         </div>
       </details>
     `}};e.n([e.u({type:Boolean})],c.prototype,`defaultOpen`,void 0),e.n([e.u({type:String})],c.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`skin`,void 0),e.n([e.u({type:Boolean,reflect:!0})],c.prototype,`compact`,void 0),e.n([e.u({type:Boolean,reflect:!0})],c.prototype,`isOpen`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`name`,void 0),e.n([i.t({context:o,subscribe:!0}),e.u({attribute:!1})],c.prototype,`context`,void 0);try{e.d(`pkt-accordion-item`)(c)}catch{console.warn(`Forsøker å definere <pkt-accordion-item>, men den er allerede definert`)}var l=s;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});

package/dist/{alert-DKNJTlMQ.js → alert-DNZtr3gd.js}

@@ -1,26 +1,27 @@
 import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-e2MAMNEP.js";
 import { t as o } from "./class-map-BL_YL_Ed.js";
-import { t as s } from "./format-BTeSVkED.js";
-import { n as c, t as l } from "./element-with-slot-COOwQUxM.js";
-import { t as u } from "./classutils-DcYnSgfc.js";
-import { t as d } from "./define-component-spec-BYOSeplU.js";
+import { t as s } from "./if-defined-r8tKY4tG.js";
+import { t as c } from "./format-BTeSVkED.js";
+import { n as l, t as u } from "./element-with-slot-COOwQUxM.js";
+import { t as d } from "./classutils-DcYnSgfc.js";
+import { t as f } from "./define-component-spec-BYOSeplU.js";
 import "./icon-jEFbKTB_.js";
-import "./button-Dqolsuwj.js";
+import "./button-Drwt7Qe5.js";
 //#region ../../shared-types/aria.ts
-var f = [
+var p = [
 	"off",
 	"polite",
 	"assertive"
-], p = [
+], m = [
 	"info",
 	"success",
 	"warning",
 	"error"
-], m = [
+], h = [
 	"medium",
 	"small",
 	"xsmall"
-], h = d({
+], g = f({
 	name: "pkt-alert",
 	react: "PktAlert",
 	"css-class": "pkt-alert",
@@ -47,7 +48,7 @@ var f = [
 		skin: {
 			name: "Utseende",
 			description: "Hvordan type melding er dette?",
-			type: [...p],
+			type: [...m],
 			default: "info",
 			category: "ui"
 		},
@@ -60,14 +61,14 @@ var f = [
 		ariaLive: {
 			name: "aria-live",
 			description: "Hvordan skal skjermleseren lese opp meldingen?",
-			type: [...f],
+			type: [...p],
 			default: "polite",
 			category: "accessibility"
 		},
 		size: {
 			name: "Størrelse",
 			description: "Endrer størrelsen på ulike elementer i alerten.",
-			type: [...m],
+			type: [...h],
 			default: "medium",
 			category: "ui"
 		},
@@ -87,9 +88,9 @@ var f = [
 		category: "ui",
 		default: !1
 	} }
-}), g = class extends l {
+}), _ = class extends u {
 	constructor() {
-		super(), this.compact = h.deprecated.compact.default, this.title = "", this.skin = h.props.skin.default, this.ariaLive = h.props.ariaLive.default, this.ariaLiveAttr = null, this.closeAlert = h.props.closeAlert.default, this.date = null, this.role = "status", this._isClosed = !1, this.close = (e) => {
+		super(), this.compact = g.deprecated.compact.default, this.title = "", this.skin = g.props.skin.default, this.ariaLive = g.props.ariaLive.default, this.ariaLiveAttr = null, this.closeAlert = g.props.closeAlert.default, this.date = null, this.role = "status", this._hostId = null, this._isClosed = !1, this.close = (e) => {
 			this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", {
 				detail: { origin: e },
 				bubbles: !0,
@@ -104,11 +105,16 @@ var f = [
 	connectedCallback() {
 		super.connectedCallback(), this.ariaLiveAttr = this.getAttribute("aria-live") || this.ariaLive;
 	}
+	willUpdate(e) {
+		super.willUpdate(e);
+		let t = this.getAttribute("id");
+		t && (this._hostId = t, this.removeAttribute("id"));
+	}
 	attributeChangedCallback(e, t, n) {
 		e === "ariaLive" && (this.ariaLiveAttr = n), super.attributeChangedCallback(e, t, n);
 	}
 	updated(e) {
-		super.updated(e), e.has("ariaLive") && (this.ariaLiveAttr = this.ariaLive), e.has("_isClosed") && u(this, "pkt-hide", this._isClosed);
+		super.updated(e), e.has("ariaLive") && e.get("ariaLive") !== void 0 && (this.ariaLiveAttr = this.ariaLive), e.has("_isClosed") && d(this, "pkt-hide", this._isClosed);
 	}
 	render() {
 		let t = this.size ?? (this.compact ? "small" : "medium"), r = {
@@ -122,7 +128,12 @@ var f = [
 			"pkt-alert__noDate": !this.date
 		};
 		return e`
-      <div class=${o(r)} aria-live=${this.ariaLiveAttr}>
+      <div
+        class=${o(r)}
+        id=${s(this._hostId || void 0)}
+        aria-live=${this.ariaLiveAttr}
+        role=${this.role}
+      >
         <div class=${o(i)}>
           <pkt-icon
             class="pkt-alert__icon"
@@ -148,10 +159,10 @@ var f = [
               ` : n}
           ${this.title ? e`<div class="pkt-alert__title">${this.title}</div>` : n}
 
-          <div class="pkt-alert__text">${c(this)}</div>
+          <div class="pkt-alert__text">${l(this)}</div>
 
           ${this.date ? e`<div class="pkt-alert__date">
-                ${s(this.pktStrings.get("alert").lastUpdated, { date: this.date })}
+                ${c(this.pktStrings.get("alert").lastUpdated, { date: this.date })}
               </div>` : n}
         </div>
       </div>
@@ -161,36 +172,33 @@ var f = [
 i([a({
 	type: Boolean,
 	reflect: !1
-})], g.prototype, "compact", void 0), i([a({
+})], _.prototype, "compact", void 0), i([a({
 	type: String,
 	reflect: !0
-})], g.prototype, "title", void 0), i([a({
+})], _.prototype, "title", void 0), i([a({
 	type: String,
 	reflect: !0
-})], g.prototype, "skin", void 0), i([a({ type: String })], g.prototype, "ariaLive", void 0), i([a({
+})], _.prototype, "skin", void 0), i([a({ type: String })], _.prototype, "ariaLive", void 0), i([a({
 	type: String,
 	reflect: !0,
 	attribute: "aria-live"
-})], g.prototype, "ariaLiveAttr", void 0), i([a({
+})], _.prototype, "ariaLiveAttr", void 0), i([a({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "closeAlert", void 0), i([a({
-	type: String,
-	reflect: !0
-})], g.prototype, "date", void 0), i([a({
+})], _.prototype, "closeAlert", void 0), i([a({
 	type: String,
 	reflect: !0
-})], g.prototype, "role", void 0), i([a({
+})], _.prototype, "date", void 0), i([a({ type: String })], _.prototype, "role", void 0), i([r()], _.prototype, "_hostId", void 0), i([a({
 	type: String,
 	attribute: "size"
-})], g.prototype, "size", void 0), i([r()], g.prototype, "_isClosed", void 0);
+})], _.prototype, "size", void 0), i([r()], _.prototype, "_isClosed", void 0);
 try {
-	t("pkt-alert")(g);
+	t("pkt-alert")(_);
 } catch {
 	console.warn("Forsøker å definere <pkt-alert>, men den er allerede definert");
 }
 //#endregion
 //#region src/components/alert/index.ts
-var _ = g;
+var v = _;
 //#endregion
-export { g as n, _ as t };
+export { _ as n, v as t };

package/dist/alert-DqM9l5as.cjs

@@ -0,0 +1,40 @@
+const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./if-defined-BeVQnl3C.cjs"),r=require("./format-B8meU8Tm.cjs"),i=require("./element-with-slot-MkibfzHp.cjs"),a=require("./classutils-CbklAJDe.cjs"),o=require("./define-component-spec-DBNd2FJY.cjs");require("./icon-DBFTFd-J.cjs"),require("./button-jJfzE9C7.cjs");var s=[`off`,`polite`,`assertive`],c=[`info`,`success`,`warning`,`error`],l=[`medium`,`small`,`xsmall`],u=o.t({name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{reactOnly:!0,description:`React: Klikk-event for 'Lukk'-knappen`},close:{elementsOnly:!0,description:`Vue: Klikk-event for 'Lukk'-knappen`}},props:{title:{name:`Tittel`,description:`Tittelen som vises øverst i på meldingen`,type:`string`,category:`contents`},skin:{name:`Utseende`,description:`Hvordan type melding er dette?`,type:[...c],default:`info`,category:`ui`},date:{name:`Sist oppdatert`,description:`Dato som vises nederst i på meldingen`,type:`string`,category:`contents`},ariaLive:{name:`aria-live`,description:`Hvordan skal skjermleseren lese opp meldingen?`,type:[...s],default:`polite`,category:`accessibility`},size:{name:`Størrelse`,description:`Endrer størrelsen på ulike elementer i alerten.`,type:[...l],default:`medium`,category:`ui`},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`}},slots:{default:{description:`Innholdet i meldingen`}},deprecated:{compact:{name:`Kompakt (deprecated)`,description:"Bruk `size` i stedet; uten eksplisitt `size` gir compact størrelsen 'small'.",type:`boolean`,category:`ui`,default:!1}}}),d=class extends i.t{constructor(){super(),this.compact=u.deprecated.compact.default,this.title=``,this.skin=u.props.skin.default,this.ariaLive=u.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=u.props.closeAlert.default,this.date=null,this.role=`status`,this._hostId=null,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._isClosed=!1}connectedCallback(){super.connectedCallback(),this.ariaLiveAttr=this.getAttribute(`aria-live`)||this.ariaLive}willUpdate(e){super.willUpdate(e);let t=this.getAttribute(`id`);t&&(this._hostId=t,this.removeAttribute(`id`))}attributeChangedCallback(e,t,n){e===`ariaLive`&&(this.ariaLiveAttr=n),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`ariaLive`)&&e.get(`ariaLive`)!==void 0&&(this.ariaLiveAttr=this.ariaLive),e.has(`_isClosed`)&&a.t(this,`pkt-hide`,this._isClosed)}render(){let a=this.size??(this.compact?`small`:`medium`),o={"pkt-alert":!0,[`pkt-alert--${a}`]:!0,[`pkt-alert--${this.skin}`]:!0,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e._`
+      <div
+        class=${t.t(o)}
+        id=${n.t(this._hostId||void 0)}
+        aria-live=${this.ariaLiveAttr}
+        role=${this.role}
+      >
+        <div class=${t.t(s)}>
+          <pkt-icon
+            class="pkt-alert__icon"
+            aria-hidden="true"
+            name=${this.skin===`info`?`alert-information`:`alert-${this.skin}`}
+          ></pkt-icon>
+
+          ${this.closeAlert?e._`
+                <div class="pkt-alert__close">
+                  <pkt-button
+                    tabindex="0"
+                    aria-label="close"
+                    size=${a}
+                    type="button"
+                    skin="tertiary"
+                    iconName="close"
+                    variant="icon-only"
+                    @click=${this.close}
+                  >
+                    <span class="sr-only">${this.pktStrings.get(`generic`).close}</span>
+                  </pkt-button>
+                </div>
+              `:e.h}
+          ${this.title?e._`<div class="pkt-alert__title">${this.title}</div>`:e.h}
+
+          <div class="pkt-alert__text">${i.n(this)}</div>
+
+          ${this.date?e._`<div class="pkt-alert__date">
+                ${r.t(this.pktStrings.get(`alert`).lastUpdated,{date:this.date})}
+              </div>`:e.h}
+        </div>
+      </div>
+    `}};e.n([e.u({type:Boolean,reflect:!1})],d.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0})],d.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],d.prototype,`skin`,void 0),e.n([e.u({type:String})],d.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`aria-live`})],d.prototype,`ariaLiveAttr`,void 0),e.n([e.u({type:Boolean,reflect:!0})],d.prototype,`closeAlert`,void 0),e.n([e.u({type:String,reflect:!0})],d.prototype,`date`,void 0),e.n([e.u({type:String})],d.prototype,`role`,void 0),e.n([e.l()],d.prototype,`_hostId`,void 0),e.n([e.u({type:String,attribute:`size`})],d.prototype,`size`,void 0),e.n([e.l()],d.prototype,`_isClosed`,void 0);try{e.d(`pkt-alert`)(d)}catch{console.warn(`Forsøker å definere <pkt-alert>, men den er allerede definert`)}var f=d;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return f}});

package/dist/{backlink-CA5R69FX.cjs → backlink-DYO8qA9C.cjs}

@@ -1,4 +1,4 @@
-const e=require("./element-DRc10X2R.cjs");require("./icon-DBFTFd-J.cjs");const t=require("./if-defined-BeVQnl3C.cjs");var n=class extends e.t{constructor(...e){super(...e),this.href=``,this.text=`Forsiden`,this.ariaLabel=null}attributeChangedCallback(e,t,n){e===`arialabel`&&this.removeAttribute(`arialabel`),e===`href`&&this.removeAttribute(`href`),e===`text`&&this.removeAttribute(`text`),super.attributeChangedCallback(e,t,n)}render(){return e._`<nav
+const e=require("./element-DRc10X2R.cjs"),t=require("./if-defined-BeVQnl3C.cjs");require("./icon-DBFTFd-J.cjs");var n=class extends e.t{constructor(...e){super(...e),this.href=``,this.text=`Forsiden`,this.ariaLabel=null}attributeChangedCallback(e,t,n){e===`arialabel`&&this.removeAttribute(`arialabel`),e===`href`&&this.removeAttribute(`href`),e===`text`&&this.removeAttribute(`text`),super.attributeChangedCallback(e,t,n)}render(){return e._`<nav
       class="pkt-back-link"
       aria-label=${this.ariaLabel||this.pktStrings.get(`backlink`).label}
     >

package/dist/{button-Dqolsuwj.js → button-Drwt7Qe5.js}

@@ -1,14 +1,14 @@
 import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-e2MAMNEP.js";
 import { t as o } from "./class-map-BL_YL_Ed.js";
-import { n as s, t as c } from "./element-with-slot-COOwQUxM.js";
+import { t as s } from "./if-defined-r8tKY4tG.js";
+import { n as c, t as l } from "./element-with-slot-COOwQUxM.js";
 import "./icon-jEFbKTB_.js";
-import { t as l } from "./if-defined-r8tKY4tG.js";
 //#region src/components/button/button.ts
 var u = "https://punkt-cdn.oslo.kommune.no/latest/animations/";
 typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || u);
-var d = class t extends c {
+var d = class t extends l {
 	constructor(...e) {
-		super(...e), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.fullWidth = !1, this.fullWidthOnMobile = !1, this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = typeof window < "u" ? window.pktAnimationPath : u, this.relocatedAria = {};
+		super(...e), this.iconName = "user", this.secondIconName = "user", this.size = "medium", this.fullWidth = !1, this.fullWidthOnMobile = !1, this.skin = "primary", this.variant = "label-only", this.state = void 0, this.type = "button", this.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = typeof window < "u" ? window.pktAnimationPath : u, this.relocatedAria = {};
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.addEventListener("click", (e) => {
@@ -24,7 +24,9 @@ var d = class t extends c {
 		this.relocatedAriaAttributes = [
 			"aria-haspopup",
 			"aria-expanded",
-			"aria-controls"
+			"aria-controls",
+			"aria-label",
+			"tabindex"
 		];
 	}
 	willUpdate(e) {
@@ -49,7 +51,6 @@ var d = class t extends c {
 			[`pkt-btn--${this.state}`]: !!this.state,
 			"pkt-btn--full": !!this.fullWidth,
 			"pkt-btn--full-small": !!this.fullWidthOnMobile,
-			"pkt-btn--disabled": !!this.disabled,
 			"pkt-btn--isLoading": !!this.isLoading
 		};
 		return e`
@@ -57,34 +58,36 @@ var d = class t extends c {
         class=${o(r)}
         type=${this.type}
         ?disabled=${!!this.disabled}
-        aria-busy=${l(this.isLoading ? "true" : void 0)}
-        aria-disabled=${l(this.disabled || this.isLoading ? "true" : void 0)}
-        aria-haspopup=${l(this.relocatedAria["aria-haspopup"])}
-        aria-expanded=${l(this.relocatedAria["aria-expanded"])}
-        aria-controls=${l(this.relocatedAria["aria-controls"])}
-        form=${l(t)}
+        aria-busy=${s(this.isLoading ? "true" : void 0)}
+        aria-disabled=${s(this.disabled || this.isLoading ? "true" : void 0)}
+        aria-haspopup=${s(this.relocatedAria["aria-haspopup"])}
+        aria-expanded=${s(this.relocatedAria["aria-expanded"])}
+        aria-controls=${s(this.relocatedAria["aria-controls"])}
+        aria-label=${s(this.relocatedAria["aria-label"])}
+        tabindex=${s(this.relocatedAria.tabindex)}
+        form=${s(t)}
       >
         ${this.isLoading ? e`<pkt-icon
-              class="pkt-btn__icon pkt-btn__spinner"
-              name="spinner-blue"
-              path=${l(this.loadingAnimationPath)}
-            ></pkt-icon>` : n}
+                class="pkt-btn__icon pkt-btn__spinner"
+                name="spinner-blue"
+                path=${s(this.loadingAnimationPath)}
+              ></pkt-icon>` : n}
         ${this.variant === "label-only" ? n : e`<pkt-icon
-              class="pkt-btn__icon pkt-icon"
-              name=${this.iconName}
-              path=${l(this.iconPath)}
-            ></pkt-icon>`}
-        <span class="pkt-btn__text">${s(this)}</span>
+                class="pkt-btn__icon pkt-icon"
+                name=${this.iconName}
+                path=${s(this.iconPath)}
+              ></pkt-icon>`}
+        <span class="pkt-btn__text">${c(this)}</span>
         ${this.variant === "icons-right-and-left" ? e`<pkt-icon
-              class="pkt-btn__icon"
-              name=${this.secondIconName}
-              path=${l(this.secondIconPath)}
-            ></pkt-icon>` : n}
+                class="pkt-btn__icon"
+                name=${this.secondIconName}
+                path=${s(this.secondIconPath)}
+              ></pkt-icon>` : n}
       </button>
     `;
 	}
 };
-i([a({ type: String })], d.prototype, "iconName", void 0), i([a({ type: String })], d.prototype, "secondIconName", void 0), i([a({ type: String })], d.prototype, "iconPath", void 0), i([a({ type: String })], d.prototype, "secondIconPath", void 0), i([a({ type: String })], d.prototype, "mode", void 0), i([a({ type: String })], d.prototype, "size", void 0), i([a({
+i([a({ type: String })], d.prototype, "iconName", void 0), i([a({ type: String })], d.prototype, "secondIconName", void 0), i([a({ type: String })], d.prototype, "iconPath", void 0), i([a({ type: String })], d.prototype, "secondIconPath", void 0), i([a({ type: String })], d.prototype, "size", void 0), i([a({
 	type: Boolean,
 	attribute: "full-width"
 })], d.prototype, "fullWidth", void 0), i([a({

package/dist/button-jJfzE9C7.cjs

@@ -0,0 +1,32 @@
+const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./if-defined-BeVQnl3C.cjs"),r=require("./element-with-slot-MkibfzHp.cjs");require("./icon-DBFTFd-J.cjs");var i=`https://punkt-cdn.oslo.kommune.no/latest/animations/`;typeof window<`u`&&(window.pktAnimationPath=window.pktAnimationPath||i);var a=class a extends r.t{constructor(...e){super(...e),this.iconName=`user`,this.secondIconName=`user`,this.size=`medium`,this.fullWidth=!1,this.fullWidthOnMobile=!1,this.skin=`primary`,this.variant=`label-only`,this.state=void 0,this.type=`button`,this.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=typeof window<`u`?window.pktAnimationPath:i,this.relocatedAria={}}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.preventDefault(),e.stopImmediatePropagation())},!0),this.addEventListener(`keydown`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopImmediatePropagation())},!0)}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),e===`disabled`&&n===`false`&&(this.disabled=!1),(e===`isloading`||e===`isLoading`)&&n===`false`&&(this.isLoading=!1)}static{this.relocatedAriaAttributes=[`aria-haspopup`,`aria-expanded`,`aria-controls`,`aria-label`,`tabindex`]}willUpdate(e){super.willUpdate(e);let t=!1,n={...this.relocatedAria};for(let e of a.relocatedAriaAttributes){let r=this.getAttribute(e);r!==null&&(n[e]=r,this.removeAttribute(e),t=!0)}t&&(this.relocatedAria=n)}firstUpdated(e){super.firstUpdated(e),this.disabled===`false`&&(this.disabled=!1),this.isLoading===`false`&&(this.isLoading=!1)}render(){let i=this.form??this.getAttribute(`form`)??void 0,a={"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--full":!!this.fullWidth,"pkt-btn--full-small":!!this.fullWidthOnMobile,"pkt-btn--isLoading":!!this.isLoading};return e._`
+      <button
+        class=${t.t(a)}
+        type=${this.type}
+        ?disabled=${!!this.disabled}
+        aria-busy=${n.t(this.isLoading?`true`:void 0)}
+        aria-disabled=${n.t(this.disabled||this.isLoading?`true`:void 0)}
+        aria-haspopup=${n.t(this.relocatedAria[`aria-haspopup`])}
+        aria-expanded=${n.t(this.relocatedAria[`aria-expanded`])}
+        aria-controls=${n.t(this.relocatedAria[`aria-controls`])}
+        aria-label=${n.t(this.relocatedAria[`aria-label`])}
+        tabindex=${n.t(this.relocatedAria.tabindex)}
+        form=${n.t(i)}
+      >
+        ${this.isLoading?e._`<pkt-icon
+                class="pkt-btn__icon pkt-btn__spinner"
+                name="spinner-blue"
+                path=${n.t(this.loadingAnimationPath)}
+              ></pkt-icon>`:e.h}
+        ${this.variant===`label-only`?e.h:e._`<pkt-icon
+                class="pkt-btn__icon pkt-icon"
+                name=${this.iconName}
+                path=${n.t(this.iconPath)}
+              ></pkt-icon>`}
+        <span class="pkt-btn__text">${r.n(this)}</span>
+        ${this.variant===`icons-right-and-left`?e._`<pkt-icon
+                class="pkt-btn__icon"
+                name=${this.secondIconName}
+                path=${n.t(this.secondIconPath)}
+              ></pkt-icon>`:e.h}
+      </button>
+    `}};e.n([e.u({type:String})],a.prototype,`iconName`,void 0),e.n([e.u({type:String})],a.prototype,`secondIconName`,void 0),e.n([e.u({type:String})],a.prototype,`iconPath`,void 0),e.n([e.u({type:String})],a.prototype,`secondIconPath`,void 0),e.n([e.u({type:String})],a.prototype,`size`,void 0),e.n([e.u({type:Boolean,attribute:`full-width`})],a.prototype,`fullWidth`,void 0),e.n([e.u({type:Boolean,attribute:`full-width-on-mobile`})],a.prototype,`fullWidthOnMobile`,void 0),e.n([e.u({type:String})],a.prototype,`color`,void 0),e.n([e.u({type:String})],a.prototype,`skin`,void 0),e.n([e.u({type:String})],a.prototype,`variant`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`state`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`type`,void 0),e.n([e.u({type:String})],a.prototype,`form`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`isLoading`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`disabled`,void 0),e.n([e.u({type:String})],a.prototype,`loadingAnimationPath`,void 0),e.n([e.l()],a.prototype,`relocatedAria`,void 0);try{e.d(`pkt-button`)(a)}catch{console.warn(`Forsøker å definere <pkt-button>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});