@oslokommune/punkt-elements 16.26.6 → 17.0.0

package/CHANGELOG.md

@@ -5,6 +5,116 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [17.0.0](https://github.com/oslokommune/punkt/compare/16.26.7...17.0.0) (2026-07-10)
+
+### ⚠ BREAKING CHANGES
+* Punkt 17 – Ny global header og footer, kompakte skjemaelementer (#3553). BREAKING CHANGE: Ny global header og footer, kompakte skjemaelementer. Se changelog.
+  
+  # Punkt 17
+  
+  OBS! Dette er en major-versjon og selv om vi har forsøkt å unngå de største breaking changes, så anbefaler vi ikke at dere oppdaterer blindt. Se gjennom løsningen og pass på at alt fungerer som forventet etter oppdatering!
+  
+  ## Ny global header
+  
+  ```html
+  <pkt-header type="global"></pkt-header>
+  ```
+  
+  ```jsx
+  <PktHeader type="global" />
+  ```
+  
+  - Henter innhold fra Oslo kommunes felles CDN. Husk å justere CSP deretter! Dersom det ikke er mulig å hente data fra ekstern CDN, bruk header med type “service”.
+  - Bruk på alle løsninger som ikke krever custom header, og alle løsninger som har en naturlig inngang fra Oslo kommunes åpne nettsider.
+  - Global header har et betraktelig smalere mulighetsrom for justeringer, og anbefales brukt som den er. Innlogget bruker og representasjon fungerer likt som den andre header-varianten. Det er ikke mulig å legge inn annet innhold i denne headeren.
+  
+  ## Ny footer
+  
+  ```html
+  <pkt-footer></pkt-footer>
+  <pkt-footer-simple></pkt-footer-simple>
+  ```
+  
+  ```jsx
+  <PktFooter />
+  <PktFooterSimple />
+  ```
+  
+  - Footer er endelig tilgjengelig i Punkt Elements.
+  - Henter innhold fra Oslo kommunes felles CDN. Husk å justere CSP deretter! Dersom det ikke er mulig å hente data fra ekstern CDN, bruk attributten `skipGlobal` (React)/`skip-global` (Elements).
+  - Innstillinger for informasjonskapsler (cookie-banner-link) fungerer likt som før, så sørg for at `includeConsent`/`include-consent` er satt om dere bruker cookies.
+  - Custom innhold havner nå i en sekundær footer som stables oppå den globale footeren. Så om dere tidligere har lagt lenker og tekst i footer, vil dette nå dukke opp _over_ den blå globale footeren.
+  - I custom innhold er nå `columnOne` og `columnTwo` deprecated, og vi anbefaler at dere istedenfor sender inn disse som en array av objekter i `columns`.
+  - `socialLinks`, `personvernOgInfoLink` og `tilgjengelighetLink` er deprecated og vil fjernes i senere major-versjon. Disse kommer nå fra Oslo kommunes felles data.
+  - Lenker med `external: true` får nå toppdomenet i parentes etter lenketeksten (f.eks. «Munchmuseet (munch.no)») i stedet for eksternt lenkeikon.
+  - Footer-CSSen er skrevet om. Bruker dere ren CSS (uten komponentene), eller har egne overrides mot footer-klasser, må dere gå gjennom markup/selektorer på nytt — se «Endringer fra versjon 16 til versjon 17» på footer-dokumentasjonssiden. Farger styres nå med CSS-variablene `--pkt-footer-bg`, `--pkt-footer-fg` og `--pkt-footer-link-hover`.
+  
+  ## Kompakte skjemaelementer
+  
+  Alle skjemakomponenter har fått attributten `input-size` (Elements) / propen `inputSize` (React) med verdiene `medium` (standard), `small` og `xsmall`:
+  
+  ```html
+  <pkt-textinput label="Etikett" input-size="small"></pkt-textinput>
+  ```
+  
+  ```jsx
+  <PktTextinput label="Etikett" inputSize="small" />
+  ```
+  
+  - Gjelder Textinput, Textarea, Select, Combobox, SearchInput, Datepicker og Timepicker.
+  - Størrelsene er `medium` = 48px felthøyde med 18px tekst (som før — ingen endring om dere ikke setter noe), `small` = 42px med 16px tekst og `xsmall` = 36px med 14px tekst.
+  - Hele feltet skalerer: ledetekst, hjelpetekst, ikoner, prefix/suffix og feilmeldinger følger størrelsen automatisk via input-wrapperen.
+  - Alle skjemakomponentene i samme størrelse har lik høyde og matcher horisontalt, også på tvers av React og Elements.
+  
+  ## Andre endringer
+  
+  - Button i Elements har fått et betydelig UU-løft, samt litt endring i padding så den stemmer overens med Figma-varianten.
+  - Button har fått ny størrelse `xsmall` (36px). Samtidig er `small` justert mot Figma: 16px tekst og mer padding — small-knapper blir noe _bredere_ enn før (gamle `small` tilsvarer omtrent nye `xsmall` i bredde).
+  - I arbeidet med ny header fikk accordion en ny variant `plus-minus`.
+  - Alert sin attributt `compact` er nå deprecated, og erstattes med `size="small"`. Alert har fått `size` med `medium`/`small`/`xsmall`; settes både `compact` og `size`, vinner `size`. Small/xsmall-alerts har også fått justert padding og ikonstørrelse mot Figma.
+  - ARIA-attributter (`aria-haspopup`, `aria-expanded`, `aria-controls`) satt på `<pkt-button>` flyttes nå automatisk til den indre `<button>`-en, slik at skjermlesere får dem der de hører hjemme. Consent-triggerne har fått `aria-haspopup="dialog"`.
+  - React Select: den udokumenterte `options`-propen er fjernet fra typene — den var aldri implementert. Bruk `<option>`-elementer som children.
+  - Dokumentasjonen har fått et eget CSP-avsnitt under «Kom i gang», og CSP-seksjoner på header-, footer- og consent-sidene, for dere som bruker komponentene som henter data fra `cdn.web.oslo.kommune.no`.
+  
+  ## Breaking changes:
+  
+  - **Footer:** Custom innhold rendres nå i et sekundært bånd over den nye globale footeren, og footer-markupen/CSS-klassene er skrevet om — egne CSS-overrides mot footer må oppdateres.
+  - **Footer:** Lenker med `external: true` viser toppdomene i parentes i stedet for eksternt lenkeikon.
+  - **Footer:** Flere deprecated properties.
+  - **Alert:** `compact` er deprecated.
+  - **React Select:** `options`-propen er fjernet fra typene (var aldri implementert) — bruk `<option>`-children.
+  - **CSP:** Global header, footer og consent krever at `cdn.web.oslo.kommune.no` er åpnet i CSP — se dokumentasjonen.
+
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [16.26.7](https://github.com/oslokommune/punkt/compare/16.26.6...16.26.7) (2026-07-09)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.26.6](https://github.com/oslokommune/punkt/compare/16.26.5...16.26.6) (2026-07-06)
 
 ### ⚠ BREAKING CHANGES

package/dist/accordion-CbXDxOho.cjs

@@ -0,0 +1,47 @@
+const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs"),r=require("./if-defined-DrwbxQOj.cjs"),i=require("./consume-DKf5SmP9.cjs"),a=require("./ref-DO7TzO4O.cjs");var o=i.r(Symbol(`pkt-accordion-context`)),s=class extends e.i{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(){return e.p`
+      <div
+        part="container"
+        class=${t.t({"pkt-accordion":!0,"pkt-accordion--compact":this.compact,[`pkt-accordion--${this.skin}`]:this.skin})}
+        data-testid="pkt-accordion"
+        aria-labelledby=${this.ariaLabelledBy}
+      >
+        <slot></slot>
+      </div>
+    `}};e.n([e.o({type:String,reflect:!0,attribute:`aria-labelledby`})],s.prototype,`ariaLabelledBy`,void 0),e.n([e.o({type:Boolean,reflect:!0,attribute:`compact`})],s.prototype,`compact`,void 0),e.n([e.o({type:String,reflect:!0,attribute:`skin`})],s.prototype,`skin`,void 0),e.n([e.o({type:String,reflect:!0,attribute:`name`})],s.prototype,`name`,void 0),e.n([i.n({context:o}),e.a()],s.prototype,`context`,void 0);try{e.s(`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.p`
+      <details
+        class=${t.t(i)}
+        id=${this.id}
+        ?open=${this.isOpen}
+        ${a.n(this.accordionItemRef)}
+        name=${r.t(this.name)}
+      >
+        <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
+          ${this.title}
+          ${o?e.p`
+                <pkt-icon
+                  name="plus-sign"
+                  class="pkt-accordion-item__icon pkt-accordion-item__icon--plus"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <pkt-icon
+                  name="minus-sign"
+                  class="pkt-accordion-item__icon pkt-accordion-item__icon--minus"
+                  aria-hidden="true"
+                ></pkt-icon>
+              `:e.p`
+                <pkt-icon
+                  name="chevron-thin-down"
+                  class="pkt-accordion-item__icon"
+                  aria-hidden="true"
+                ></pkt-icon>
+              `}
+        </summary>
+        <div
+          class="pkt-accordion-item__content"
+          id="pkt-accordion-item__content-${this.id}"
+          role="region"
+        >
+          <div class="pkt-accordion-item__content-inner">${n.n(this)}</div>
+        </div>
+      </details>
+    `}};e.n([e.o({type:Boolean})],c.prototype,`defaultOpen`,void 0),e.n([e.o({type:String})],c.prototype,`title`,void 0),e.n([e.o({type:String,reflect:!0})],c.prototype,`skin`,void 0),e.n([e.o({type:Boolean,reflect:!0})],c.prototype,`compact`,void 0),e.n([e.o({type:Boolean,reflect:!0})],c.prototype,`isOpen`,void 0),e.n([e.o({type:String,reflect:!0})],c.prototype,`name`,void 0),e.n([i.t({context:o,subscribe:!0}),e.o({attribute:!1})],c.prototype,`context`,void 0);try{e.s(`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/{accordion-CBdIk9gw.js → accordion-DEUHQ4JD.js}

@@ -1,15 +1,22 @@
-import { i as e, n as t, o as n, p as r, s as i } from "./element-BoJrqauR.js";
-import { t as a } from "./class-map-CAQCRB1W.js";
-import { n as o, t as s } from "./element-with-slot-mXLg8gg8.js";
-import { t as c } from "./if-defined-D0bnetLJ.js";
-import { n as l, t as u } from "./ref-WGS0u7i2.js";
-//#region src/components/accordion/accordion.ts
-var d = class extends e {
+import { a as e, i as t, n, o as r, p as i, s as a } from "./element-BoJrqauR.js";
+import { t as o } from "./class-map-CAQCRB1W.js";
+import { n as s, t as c } from "./element-with-slot-mXLg8gg8.js";
+import { t as l } from "./if-defined-D0bnetLJ.js";
+import { n as u, r as d, t as f } from "./consume-BiOhrhEy.js";
+import { n as p, t as m } from "./ref-WGS0u7i2.js";
+//#region src/components/accordion/accordion-context.ts
+var h = d(Symbol("pkt-accordion-context")), g = class extends t {
 	constructor(...e) {
-		super(...e), this.ariaLabelledBy = "", this.compact = !1, this.skin = "borderless", this.name = "";
+		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("skin") && this.requestUpdate(), e.has("name") && this.updateAccordionItemNames();
+		e.has("name") && this.updateAccordionItemNames();
 	}
 	updateAccordionItemNames() {
 		if (this.name) {
@@ -26,10 +33,10 @@ var d = class extends e {
 		});
 	}
 	render() {
-		return r`
+		return i`
       <div
         part="container"
-        class=${a({
+        class=${o({
 			"pkt-accordion": !0,
 			"pkt-accordion--compact": this.compact,
 			[`pkt-accordion--${this.skin}`]: this.skin
@@ -42,33 +49,33 @@ var d = class extends e {
     `;
 	}
 };
-t([n({
+n([r({
 	type: String,
 	reflect: !0,
 	attribute: "aria-labelledby"
-})], d.prototype, "ariaLabelledBy", void 0), t([n({
+})], g.prototype, "ariaLabelledBy", void 0), n([r({
 	type: Boolean,
 	reflect: !0,
 	attribute: "compact"
-})], d.prototype, "compact", void 0), t([n({
+})], g.prototype, "compact", void 0), n([r({
 	type: String,
 	reflect: !0,
 	attribute: "skin"
-})], d.prototype, "skin", void 0), t([n({
+})], g.prototype, "skin", void 0), n([r({
 	type: String,
 	reflect: !0,
 	attribute: "name"
-})], d.prototype, "name", void 0);
+})], g.prototype, "name", void 0), n([u({ context: h }), e()], g.prototype, "context", void 0);
 try {
-	i("pkt-accordion")(d);
+	a("pkt-accordion")(g);
 } catch {
 	console.warn("Forsøker å definere <pkt-accordion>, men den er allerede definert");
 }
 //#endregion
 //#region src/components/accordion/accordionitem.ts
-var f = class extends s {
+var _ = class extends c {
 	constructor() {
-		super(), this.defaultOpen = !1, this.title = "", this.skin = void 0, this.compact = !1, this.isOpen = !1, this.name = void 0, this.accordionItemRef = u();
+		super(), this.defaultOpen = !1, this.title = "", this.skin = void 0, this.compact = !1, this.isOpen = !1, this.name = void 0, this.accordionItemRef = m();
 	}
 	firstUpdated(e) {
 		this.defaultOpen && (this.isOpen = !0);
@@ -78,18 +85,18 @@ var f = class extends s {
 			"pkt-accordion-item": !0,
 			"pkt-accordion-item--compact": this.compact,
 			[`pkt-accordion-item--${this.skin}`]: !!this.skin
-		}, t = this.skin === "plus-minus";
-		return r`
+		}, t = (this.skin ?? this.context?.skin) === "plus-minus";
+		return i`
       <details
-        class=${a(e)}
+        class=${o(e)}
         id=${this.id}
         ?open=${this.isOpen}
-        ${l(this.accordionItemRef)}
-        name=${c(this.name)}
+        ${p(this.accordionItemRef)}
+        name=${l(this.name)}
       >
         <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
           ${this.title}
-          ${t ? r`
+          ${t ? i`
                 <pkt-icon
                   name="plus-sign"
                   class="pkt-accordion-item__icon pkt-accordion-item__icon--plus"
@@ -100,7 +107,7 @@ var f = class extends s {
                   class="pkt-accordion-item__icon pkt-accordion-item__icon--minus"
                   aria-hidden="true"
                 ></pkt-icon>
-              ` : r`
+              ` : i`
                 <pkt-icon
                   name="chevron-thin-down"
                   class="pkt-accordion-item__icon"
@@ -113,32 +120,35 @@ var f = class extends s {
           id="pkt-accordion-item__content-${this.id}"
           role="region"
         >
-          <div class="pkt-accordion-item__content-inner">${o(this)}</div>
+          <div class="pkt-accordion-item__content-inner">${s(this)}</div>
         </div>
       </details>
     `;
 	}
 };
-t([n({ type: Boolean })], f.prototype, "defaultOpen", void 0), t([n({ type: String })], f.prototype, "title", void 0), t([n({
+n([r({ type: Boolean })], _.prototype, "defaultOpen", void 0), n([r({ type: String })], _.prototype, "title", void 0), n([r({
 	type: String,
 	reflect: !0
-})], f.prototype, "skin", void 0), t([n({
+})], _.prototype, "skin", void 0), n([r({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "compact", void 0), t([n({
+})], _.prototype, "compact", void 0), n([r({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "isOpen", void 0), t([n({
+})], _.prototype, "isOpen", void 0), n([r({
 	type: String,
 	reflect: !0
-})], f.prototype, "name", void 0);
+})], _.prototype, "name", void 0), n([f({
+	context: h,
+	subscribe: !0
+}), r({ attribute: !1 })], _.prototype, "context", void 0);
 try {
-	i("pkt-accordion-item")(f);
+	a("pkt-accordion-item")(_);
 } catch {
 	console.warn("Forsøker å definere <pkt-accordion-item>, men den er allerede definert");
 }
 //#endregion
 //#region src/components/accordion/index.ts
-var p = d;
+var v = g;
 //#endregion
-export { f as n, d as r, p as t };
+export { _ as n, g as r, v as t };

package/dist/{alert-HHTGY0sp.js → alert-CbtVGrHD.js}

@@ -3,7 +3,7 @@ import { t as o } from "./class-map-CAQCRB1W.js";
 import { n as s, t as c } from "./element-with-slot-mXLg8gg8.js";
 import { t as l } from "./classutils-DcYnSgfc.js";
 import "./icon-DGFEIlco.js";
-import "./button-C_YzTSuU.js";
+import "./button-Cod17rKo.js";
 var u = {
 	name: "pkt-alert",
 	react: "PktAlert",
@@ -51,12 +51,16 @@ var u = {
 			default: "polite",
 			category: "accessibility"
 		},
-		compact: {
-			name: "Kompakt",
-			description: "Gjør meldingen mindre",
-			type: "boolean",
-			category: "ui",
-			default: !1
+		size: {
+			name: "Størrelse",
+			description: "Endrer størrelsen på ulike elementer i alerten.",
+			type: [
+				"medium",
+				"small",
+				"xsmall"
+			],
+			default: "medium",
+			category: "ui"
 		},
 		closeAlert: {
 			name: "Vis 'Lukk'-knapp",
@@ -66,10 +70,17 @@ var u = {
 			category: "ui"
 		}
 	},
-	slots: { default: { description: "Innholdet i meldingen" } }
+	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 c {
 	constructor() {
-		super(), this.compact = u.props.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._isClosed = !1, this.close = (e) => {
+		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._isClosed = !1, this.close = (e) => {
 			this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", {
 				detail: { origin: e },
 				bubbles: !0,
@@ -91,19 +102,19 @@ var u = {
 		super.updated(e), e.has("ariaLive") && (this.ariaLiveAttr = this.ariaLive), e.has("_isClosed") && l(this, "pkt-hide", this._isClosed);
 	}
 	render() {
-		let e = {
+		let e = this.size ?? (this.compact ? "small" : "medium"), n = {
 			"pkt-alert": !0,
-			"pkt-alert--compact": this.compact,
-			[`pkt-alert--${this.skin}`]: this.skin,
+			[`pkt-alert--${e}`]: !0,
+			[`pkt-alert--${this.skin}`]: !0,
 			"pkt-hide": this._isClosed
-		}, n = {
+		}, r = {
 			"pkt-alert__grid": !0,
 			"pkt-alert__noTitle": !this.title,
 			"pkt-alert__noDate": !this.date
 		};
 		return i`
-      <div class=${o(e)} aria-live=${this.ariaLiveAttr}>
-        <div class=${o(n)}>
+      <div class=${o(n)} aria-live=${this.ariaLiveAttr}>
+        <div class=${o(r)}>
           <pkt-icon
             class="pkt-alert__icon"
             aria-hidden="true"
@@ -115,7 +126,7 @@ var u = {
                   <pkt-button
                     tabindex="0"
                     aria-label="close"
-                    size=${this.compact ? "small" : "medium"}
+                    size=${e}
                     type="button"
                     skin="tertiary"
                     iconName="close"
@@ -158,7 +169,10 @@ n([r({
 })], d.prototype, "date", void 0), n([r({
 	type: String,
 	reflect: !0
-})], d.prototype, "role", void 0), n([e()], d.prototype, "_isClosed", void 0);
+})], d.prototype, "role", void 0), n([r({
+	type: String,
+	attribute: "size"
+})], d.prototype, "size", void 0), n([e()], d.prototype, "_isClosed", void 0);
 try {
 	a("pkt-alert")(d);
 } catch {

package/dist/{alert-B8dLsiTz.cjs → alert-CkUnbPdA.cjs}

@@ -1,6 +1,6 @@
-const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs"),r=require("./classutils-CbklAJDe.cjs");require("./icon-B8PVq2O6.cjs"),require("./button-B5tQpKeG.cjs");var i={name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{description:`React: Klikk-event for 'Lukk'-knappen`},close:{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:[`info`,`success`,`warning`,`error`],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:[`off`,`polite`,`assertive`],default:`polite`,category:`accessibility`},compact:{name:`Kompakt`,description:`Gjør meldingen mindre`,type:`boolean`,category:`ui`,default:!1},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`}},slots:{default:{description:`Innholdet i meldingen`}}},a=class extends n.t{constructor(){super(),this.compact=i.props.compact.default,this.title=``,this.skin=i.props.skin.default,this.ariaLive=i.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=i.props.closeAlert.default,this.date=null,this.role=`status`,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}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`)&&r.t(this,`pkt-hide`,this._isClosed)}render(){let r={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},i={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e.p`
-      <div class=${t.t(r)} aria-live=${this.ariaLiveAttr}>
-        <div class=${t.t(i)}>
+const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs"),r=require("./classutils-CbklAJDe.cjs");require("./icon-B8PVq2O6.cjs"),require("./button-gvDXtBMC.cjs");var i={name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{description:`React: Klikk-event for 'Lukk'-knappen`},close:{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:[`info`,`success`,`warning`,`error`],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:[`off`,`polite`,`assertive`],default:`polite`,category:`accessibility`},size:{name:`Størrelse`,description:`Endrer størrelsen på ulike elementer i alerten.`,type:[`medium`,`small`,`xsmall`],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}}},a=class extends n.t{constructor(){super(),this.compact=i.deprecated.compact.default,this.title=``,this.skin=i.props.skin.default,this.ariaLive=i.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=i.props.closeAlert.default,this.date=null,this.role=`status`,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}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`)&&r.t(this,`pkt-hide`,this._isClosed)}render(){let r=this.size??(this.compact?`small`:`medium`),i={"pkt-alert":!0,[`pkt-alert--${r}`]:!0,[`pkt-alert--${this.skin}`]:!0,"pkt-hide":this._isClosed},a={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e.p`
+      <div class=${t.t(i)} aria-live=${this.ariaLiveAttr}>
+        <div class=${t.t(a)}>
           <pkt-icon
             class="pkt-alert__icon"
             aria-hidden="true"
@@ -12,7 +12,7 @@ const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),
                   <pkt-button
                     tabindex="0"
                     aria-label="close"
-                    size=${this.compact?`small`:`medium`}
+                    size=${r}
                     type="button"
                     skin="tertiary"
                     iconName="close"
@@ -30,4 +30,4 @@ const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),
           ${this.date?e.p`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.d}
         </div>
       </div>
-    `}};e.n([e.o({type:Boolean,reflect:!1})],a.prototype,`compact`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`title`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`skin`,void 0),e.n([e.o({type:String})],a.prototype,`ariaLive`,void 0),e.n([e.o({type:String,reflect:!0,attribute:`aria-live`})],a.prototype,`ariaLiveAttr`,void 0),e.n([e.o({type:Boolean,reflect:!0})],a.prototype,`closeAlert`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`date`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`role`,void 0),e.n([e.a()],a.prototype,`_isClosed`,void 0);try{e.s(`pkt-alert`)(a)}catch{console.warn(`Forsøker å definere <pkt-alert>, 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}});
+    `}};e.n([e.o({type:Boolean,reflect:!1})],a.prototype,`compact`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`title`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`skin`,void 0),e.n([e.o({type:String})],a.prototype,`ariaLive`,void 0),e.n([e.o({type:String,reflect:!0,attribute:`aria-live`})],a.prototype,`ariaLiveAttr`,void 0),e.n([e.o({type:Boolean,reflect:!0})],a.prototype,`closeAlert`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`date`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`role`,void 0),e.n([e.o({type:String,attribute:`size`})],a.prototype,`size`,void 0),e.n([e.a()],a.prototype,`_isClosed`,void 0);try{e.s(`pkt-alert`)(a)}catch{console.warn(`Forsøker å definere <pkt-alert>, 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}});

package/dist/base-elements/input-element.d.ts

@@ -62,6 +62,7 @@ export declare class PktInputElement<T = {}, TOption extends PktInputOption = Pk
     optionalText: string;
     requiredText: string;
     tagText: string | null;
+    inputSize: 'small' | 'medium' | 'xsmall';
     dataTestid: string;
     touched: boolean;
     private _initialized;

package/dist/button-Cod17rKo.js

@@ -0,0 +1,115 @@
+import { a as e, d as t, n, o as r, p as i, s as a } from "./element-BoJrqauR.js";
+import { t as o } from "./class-map-CAQCRB1W.js";
+import { n as s, t as c } from "./element-with-slot-mXLg8gg8.js";
+import "./icon-DGFEIlco.js";
+import { t as l } from "./if-defined-D0bnetLJ.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 e extends c {
+	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 = {};
+	}
+	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"
+		];
+	}
+	willUpdate(t) {
+		super.willUpdate(t);
+		let n = !1, r = { ...this.relocatedAria };
+		for (let t of e.relocatedAriaAttributes) {
+			let e = this.getAttribute(t);
+			e !== null && (r[t] = e, this.removeAttribute(t), n = !0);
+		}
+		n && (this.relocatedAria = r);
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
+	}
+	render() {
+		let e = this.form ?? this.getAttribute("form") ?? void 0;
+		return i`
+      <button
+        class=${o({
+			"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--disabled": !!this.disabled,
+			"pkt-btn--isLoading": !!this.isLoading
+		})}
+        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(e)}
+      >
+        ${this.isLoading ? i`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path=${l(this.loadingAnimationPath)}
+            ></pkt-icon>` : t}
+        ${this.variant === "label-only" ? t : i`<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>
+        ${this.variant === "icons-right-and-left" ? i`<pkt-icon
+              class="pkt-btn__icon"
+              name=${this.secondIconName}
+              path=${l(this.secondIconPath)}
+            ></pkt-icon>` : t}
+      </button>
+    `;
+	}
+};
+n([r({ type: String })], d.prototype, "iconName", void 0), n([r({ type: String })], d.prototype, "secondIconName", void 0), n([r({ type: String })], d.prototype, "iconPath", void 0), n([r({ type: String })], d.prototype, "secondIconPath", void 0), n([r({ type: String })], d.prototype, "mode", void 0), n([r({ type: String })], d.prototype, "size", void 0), n([r({
+	type: Boolean,
+	attribute: "full-width"
+})], d.prototype, "fullWidth", void 0), n([r({
+	type: Boolean,
+	attribute: "full-width-on-mobile"
+})], d.prototype, "fullWidthOnMobile", void 0), n([r({ type: String })], d.prototype, "color", void 0), n([r({ type: String })], d.prototype, "skin", void 0), n([r({ type: String })], d.prototype, "variant", void 0), n([r({
+	type: String,
+	reflect: !0
+})], d.prototype, "state", void 0), n([r({
+	type: String,
+	reflect: !0
+})], d.prototype, "type", void 0), n([r({ type: String })], d.prototype, "form", void 0), n([r({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "isLoading", void 0), n([r({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), n([r({ type: String })], d.prototype, "loadingAnimationPath", void 0), n([e()], d.prototype, "relocatedAria", void 0);
+try {
+	a("pkt-button")(d);
+} catch {
+	console.warn("Forsøker å definere <pkt-button>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/button/index.ts
+var f = d;
+//#endregion
+export { d as n, f as t };

package/dist/{button-B5tQpKeG.cjs → button-gvDXtBMC.cjs}

@@ -1,10 +1,13 @@
-const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs");require("./icon-B8PVq2O6.cjs");const r=require("./if-defined-DrwbxQOj.cjs");var i=`https://punkt-cdn.oslo.kommune.no/latest/animations/`;typeof window<`u`&&(window.pktAnimationPath=window.pktAnimationPath||i);var a=class extends n.t{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:i}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)}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;return e.p`
+const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs");require("./icon-B8PVq2O6.cjs");const r=require("./if-defined-DrwbxQOj.cjs");var i=`https://punkt-cdn.oslo.kommune.no/latest/animations/`;typeof window<`u`&&(window.pktAnimationPath=window.pktAnimationPath||i);var a=class a extends n.t{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: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`]}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;return e.p`
       <button
         class=${t.t({"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--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading})}
         type=${this.type}
         ?disabled=${!!this.disabled}
         aria-busy=${r.t(this.isLoading?`true`:void 0)}
         aria-disabled=${r.t(this.disabled||this.isLoading?`true`:void 0)}
+        aria-haspopup=${r.t(this.relocatedAria[`aria-haspopup`])}
+        aria-expanded=${r.t(this.relocatedAria[`aria-expanded`])}
+        aria-controls=${r.t(this.relocatedAria[`aria-controls`])}
         form=${r.t(i)}
       >
         ${this.isLoading?e.p`<pkt-icon
@@ -24,4 +27,4 @@ const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),
               path=${r.t(this.secondIconPath)}
             ></pkt-icon>`:e.d}
       </button>
-    `}};e.n([e.o({type:String})],a.prototype,`iconName`,void 0),e.n([e.o({type:String})],a.prototype,`secondIconName`,void 0),e.n([e.o({type:String})],a.prototype,`iconPath`,void 0),e.n([e.o({type:String})],a.prototype,`secondIconPath`,void 0),e.n([e.o({type:String})],a.prototype,`mode`,void 0),e.n([e.o({type:String})],a.prototype,`size`,void 0),e.n([e.o({type:Boolean,attribute:`full-width`})],a.prototype,`fullWidth`,void 0),e.n([e.o({type:Boolean,attribute:`full-width-on-mobile`})],a.prototype,`fullWidthOnMobile`,void 0),e.n([e.o({type:String})],a.prototype,`color`,void 0),e.n([e.o({type:String})],a.prototype,`skin`,void 0),e.n([e.o({type:String})],a.prototype,`variant`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`state`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`type`,void 0),e.n([e.o({type:String})],a.prototype,`form`,void 0),e.n([e.o({type:Boolean,reflect:!0})],a.prototype,`isLoading`,void 0),e.n([e.o({type:Boolean,reflect:!0})],a.prototype,`disabled`,void 0),e.n([e.o({type:String})],a.prototype,`loadingAnimationPath`,void 0);try{e.s(`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}});
+    `}};e.n([e.o({type:String})],a.prototype,`iconName`,void 0),e.n([e.o({type:String})],a.prototype,`secondIconName`,void 0),e.n([e.o({type:String})],a.prototype,`iconPath`,void 0),e.n([e.o({type:String})],a.prototype,`secondIconPath`,void 0),e.n([e.o({type:String})],a.prototype,`mode`,void 0),e.n([e.o({type:String})],a.prototype,`size`,void 0),e.n([e.o({type:Boolean,attribute:`full-width`})],a.prototype,`fullWidth`,void 0),e.n([e.o({type:Boolean,attribute:`full-width-on-mobile`})],a.prototype,`fullWidthOnMobile`,void 0),e.n([e.o({type:String})],a.prototype,`color`,void 0),e.n([e.o({type:String})],a.prototype,`skin`,void 0),e.n([e.o({type:String})],a.prototype,`variant`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`state`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`type`,void 0),e.n([e.o({type:String})],a.prototype,`form`,void 0),e.n([e.o({type:Boolean,reflect:!0})],a.prototype,`isLoading`,void 0),e.n([e.o({type:Boolean,reflect:!0})],a.prototype,`disabled`,void 0),e.n([e.o({type:String})],a.prototype,`loadingAnimationPath`,void 0),e.n([e.a()],a.prototype,`relocatedAria`,void 0);try{e.s(`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}});