@oslokommune/punkt-elements 16.26.7 → 17.0.2

package/dist/searchinput-CfUVfpqL.js

@@ -0,0 +1,156 @@
+import { a as e, d as t, n, o as r, p as i, s as a, t as o } from "./element-BoJrqauR.js";
+import { t as s } from "./class-map-CAQCRB1W.js";
+import "./icon-DGFEIlco.js";
+import { t as c } from "./if-defined-D0bnetLJ.js";
+import { t as l } from "./focus-modality-controller-Dc2S-KqR.js";
+//#region src/components/searchinput/searchinput.ts
+var u = class extends o {
+	constructor(...e) {
+		super(...e), this.appearance = "local", this.inputSize = "medium", this.disabled = !1, this.fullwidth = !1, this.id = "", this.placeholder = "Søk…", this.value = "", this.focusModality = new l(this, ".pkt-searchinput");
+	}
+	willUpdate(e) {
+		super.willUpdate(e);
+		let t = this.getAttribute("aria-label");
+		t && (this.inputAriaLabel = t, this.removeAttribute("aria-label"));
+	}
+	get suggestionsId() {
+		return `${this.id}-suggestions`;
+	}
+	dispatchSearch() {
+		this.dispatchEvent(new CustomEvent("pkt-search", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	onInput(e) {
+		let t = e.target;
+		this.value = t.value;
+	}
+	onInputKeydown(e) {
+		e.key === "Enter" && (this.action || e.preventDefault(), this.dispatchSearch());
+	}
+	onSearchClick(e) {
+		this.action || e.preventDefault(), this.dispatchSearch();
+	}
+	onSuggestionClick(e, t, n) {
+		let r = new CustomEvent("pkt-suggestion-click", {
+			detail: {
+				index: n,
+				suggestion: t
+			},
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		});
+		this.dispatchEvent(r) || e.preventDefault();
+	}
+	renderSuggestion(e, n) {
+		let r = i`
+      ${e.title ? i`<h3 class="pkt-searchinput__suggestion-title">${e.title}</h3>` : t}
+      ${e.text ? i`<p class="pkt-searchinput__suggestion-text">${e.text}</p>` : t}
+    `;
+		return e.href ? i`<a
+        href=${e.href}
+        class="pkt-searchinput__suggestion"
+        @click=${(t) => this.onSuggestionClick(t, e, n)}
+      >
+        ${r}
+      </a>` : e.nonInteractive ? i`<div class="pkt-searchinput__suggestion">${r}</div>` : i`<button
+      type="button"
+      class="pkt-searchinput__suggestion"
+      @click=${(t) => this.onSuggestionClick(t, e, n)}
+    >
+      ${r}
+    </button>`;
+	}
+	render() {
+		let e = s({
+			"pkt-searchinput": !0,
+			[`pkt-searchinput--${this.appearance}`]: !0,
+			[`pkt-searchinput--${this.inputSize}`]: !0,
+			"pkt-searchinput--fullwidth": this.fullwidth
+		}), n = s({
+			"pkt-searchinput__button": !0,
+			"pkt-input-icon": this.appearance === "local",
+			"pkt-btn": !0,
+			[`pkt-btn--${this.inputSize}`]: !0,
+			"pkt-btn--icon-only": !0,
+			"pkt-btn--tertiary": this.appearance === "local",
+			"pkt-btn--primary": this.appearance === "global" || this.appearance === "local-with-button",
+			"pkt-btn--yellow": this.appearance === "global"
+		}), r = s({
+			"pkt-input": !0,
+			[`pkt-input--${this.inputSize}`]: !0,
+			"pkt-input--fullwidth": this.fullwidth
+		}), a = this.appearance === "local" ? `pkt-input__container pkt-input__container--${this.inputSize}` : "pkt-searchinput__field", o = i`
+      ${this.label ? i`<label for=${c(this.id || void 0)} class="pkt-inputwrapper__label"
+            >${this.label}</label
+          >` : t}
+      <div class=${a}>
+        <input
+          class=${r}
+          type="search"
+          name=${this.name || this.id}
+          id=${this.id}
+          placeholder=${this.placeholder || "Søk…"}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          autocomplete="off"
+          aria-label=${c(this.inputAriaLabel)}
+          aria-autocomplete=${this.suggestions ? "list" : t}
+          aria-controls=${this.suggestions ? this.suggestionsId : t}
+          @input=${this.onInput}
+          @keydown=${this.onInputKeydown}
+        />
+        <button
+          type="submit"
+          class=${n}
+          ?disabled=${this.disabled}
+          @click=${this.onSearchClick}
+        >
+          <pkt-icon class="pkt-btn__icon" name="magnifying-glass-big"></pkt-icon>
+          <span class="pkt-btn__text">${this.label || this.placeholder || "Søk…"}</span>
+        </button>
+      </div>
+      ${this.suggestions ? i`<ul
+            id=${this.suggestionsId}
+            class="pkt-searchinput__suggestions"
+            aria-live="assertive"
+          >
+            ${this.suggestions.map((e, t) => i` <li>${this.renderSuggestion(e, t)}</li> `)}
+          </ul>` : t}
+    `;
+		return this.action ? i`<form
+        role="search"
+        class=${e}
+        action=${this.action}
+        method=${c(this.method)}
+      >
+        ${o}
+      </form>` : i`<div role="search" class=${e}>${o}</div>`;
+	}
+};
+n([r({ type: String })], u.prototype, "appearance", void 0), n([r({
+	type: String,
+	attribute: "input-size"
+})], u.prototype, "inputSize", void 0), n([r({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), n([r({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "fullwidth", void 0), n([r({
+	type: String,
+	reflect: !0
+})], u.prototype, "id", void 0), n([r({ type: String })], u.prototype, "label", void 0), n([r({ type: String })], u.prototype, "name", void 0), n([r({ type: String })], u.prototype, "placeholder", void 0), n([r({ type: String })], u.prototype, "value", void 0), n([r({ type: Array })], u.prototype, "suggestions", void 0), n([r({ type: String })], u.prototype, "action", void 0), n([r({ type: String })], u.prototype, "method", void 0), n([e()], u.prototype, "inputAriaLabel", void 0);
+try {
+	a("pkt-searchinput")(u);
+} catch {
+	console.warn("Forsøker å definere <pkt-searchinput>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/searchinput/index.ts
+var d = u;
+//#endregion
+export { u as n, d as t };

package/dist/searchinput-DGjeN1YI.cjs

@@ -0,0 +1,60 @@
+const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs");require("./icon-B8PVq2O6.cjs");const n=require("./if-defined-DrwbxQOj.cjs"),r=require("./focus-modality-controller-C1ocyv2J.cjs");var i=class extends e.t{constructor(...e){super(...e),this.appearance=`local`,this.inputSize=`medium`,this.disabled=!1,this.fullwidth=!1,this.id=``,this.placeholder=`Søk…`,this.value=``,this.focusModality=new r.t(this,`.pkt-searchinput`)}willUpdate(e){super.willUpdate(e);let t=this.getAttribute(`aria-label`);t&&(this.inputAriaLabel=t,this.removeAttribute(`aria-label`))}get suggestionsId(){return`${this.id}-suggestions`}dispatchSearch(){this.dispatchEvent(new CustomEvent(`pkt-search`,{detail:{value:this.value},bubbles:!0,composed:!0}))}onInput(e){let t=e.target;this.value=t.value}onInputKeydown(e){e.key===`Enter`&&(this.action||e.preventDefault(),this.dispatchSearch())}onSearchClick(e){this.action||e.preventDefault(),this.dispatchSearch()}onSuggestionClick(e,t,n){let r=new CustomEvent(`pkt-suggestion-click`,{detail:{index:n,suggestion:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r)||e.preventDefault()}renderSuggestion(t,n){let r=e.p`
+      ${t.title?e.p`<h3 class="pkt-searchinput__suggestion-title">${t.title}</h3>`:e.d}
+      ${t.text?e.p`<p class="pkt-searchinput__suggestion-text">${t.text}</p>`:e.d}
+    `;return t.href?e.p`<a
+        href=${t.href}
+        class="pkt-searchinput__suggestion"
+        @click=${e=>this.onSuggestionClick(e,t,n)}
+      >
+        ${r}
+      </a>`:t.nonInteractive?e.p`<div class="pkt-searchinput__suggestion">${r}</div>`:e.p`<button
+      type="button"
+      class="pkt-searchinput__suggestion"
+      @click=${e=>this.onSuggestionClick(e,t,n)}
+    >
+      ${r}
+    </button>`}render(){let r=t.t({"pkt-searchinput":!0,[`pkt-searchinput--${this.appearance}`]:!0,[`pkt-searchinput--${this.inputSize}`]:!0,"pkt-searchinput--fullwidth":this.fullwidth}),i=t.t({"pkt-searchinput__button":!0,"pkt-input-icon":this.appearance===`local`,"pkt-btn":!0,[`pkt-btn--${this.inputSize}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":this.appearance===`local`,"pkt-btn--primary":this.appearance===`global`||this.appearance===`local-with-button`,"pkt-btn--yellow":this.appearance===`global`}),a=t.t({"pkt-input":!0,[`pkt-input--${this.inputSize}`]:!0,"pkt-input--fullwidth":this.fullwidth}),o=this.appearance===`local`?`pkt-input__container pkt-input__container--${this.inputSize}`:`pkt-searchinput__field`,s=e.p`
+      ${this.label?e.p`<label for=${n.t(this.id||void 0)} class="pkt-inputwrapper__label"
+            >${this.label}</label
+          >`:e.d}
+      <div class=${o}>
+        <input
+          class=${a}
+          type="search"
+          name=${this.name||this.id}
+          id=${this.id}
+          placeholder=${this.placeholder||`Søk…`}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          autocomplete="off"
+          aria-label=${n.t(this.inputAriaLabel)}
+          aria-autocomplete=${this.suggestions?`list`:e.d}
+          aria-controls=${this.suggestions?this.suggestionsId:e.d}
+          @input=${this.onInput}
+          @keydown=${this.onInputKeydown}
+        />
+        <button
+          type="submit"
+          class=${i}
+          ?disabled=${this.disabled}
+          @click=${this.onSearchClick}
+        >
+          <pkt-icon class="pkt-btn__icon" name="magnifying-glass-big"></pkt-icon>
+          <span class="pkt-btn__text">${this.label||this.placeholder||`Søk…`}</span>
+        </button>
+      </div>
+      ${this.suggestions?e.p`<ul
+            id=${this.suggestionsId}
+            class="pkt-searchinput__suggestions"
+            aria-live="assertive"
+          >
+            ${this.suggestions.map((t,n)=>e.p` <li>${this.renderSuggestion(t,n)}</li> `)}
+          </ul>`:e.d}
+    `;return this.action?e.p`<form
+        role="search"
+        class=${r}
+        action=${this.action}
+        method=${n.t(this.method)}
+      >
+        ${s}
+      </form>`:e.p`<div role="search" class=${r}>${s}</div>`}};e.n([e.o({type:String})],i.prototype,`appearance`,void 0),e.n([e.o({type:String,attribute:`input-size`})],i.prototype,`inputSize`,void 0),e.n([e.o({type:Boolean,reflect:!0})],i.prototype,`disabled`,void 0),e.n([e.o({type:Boolean,reflect:!0})],i.prototype,`fullwidth`,void 0),e.n([e.o({type:String,reflect:!0})],i.prototype,`id`,void 0),e.n([e.o({type:String})],i.prototype,`label`,void 0),e.n([e.o({type:String})],i.prototype,`name`,void 0),e.n([e.o({type:String})],i.prototype,`placeholder`,void 0),e.n([e.o({type:String})],i.prototype,`value`,void 0),e.n([e.o({type:Array})],i.prototype,`suggestions`,void 0),e.n([e.o({type:String})],i.prototype,`action`,void 0),e.n([e.o({type:String})],i.prototype,`method`,void 0),e.n([e.a()],i.prototype,`inputAriaLabel`,void 0);try{e.s(`pkt-searchinput`)(i)}catch{console.warn(`Forsøker å definere <pkt-searchinput>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/dist/{select-D4_HQFkh.cjs → select-CZvAW7W2.cjs}

@@ -1,5 +1,6 @@
-const e=require("./element-DJzurxgt.cjs"),t=require("./element-with-slot-BY7Jc-q8.cjs"),n=require("./if-defined-DrwbxQOj.cjs"),r=require("./ref-DO7TzO4O.cjs"),i=require("./input-element-ZGOWsvKM.cjs"),a=require("./pkt-options-controller-CPrfqepu.cjs");require("./input-wrapper-BRjQB4zM.cjs");var o=class extends i.t{constructor(...e){super(...e),this._optionsProp=[],this._options=[]}get options(){return this._options.map(e=>({...e,selected:this.isOptionSelected(e)}))}set options(e){this._optionsProp=e,this.requestUpdate(`_optionsProp`,this._options)}isOptionSelected(e){return Array.isArray(this.value)?this.value.includes(e.value):e.value===this.value}findOptionByValue(e){return this._options.find(t=>t.value===e)}getSelectedOptions(){return this._options.filter(e=>this.isOptionSelected(e))}parseOptions(){let e=this._optionsProp.length>0,t=this.optionsController?.nodes?.length&&this.optionsController.nodes.length>0;e?this._options=this._optionsProp:t&&(this._options=this.optionsController.options)}willUpdate(e){super.willUpdate(e),this.parseOptions()}};e.n([e.o({type:Array,attribute:`options`})],o.prototype,`_optionsProp`,void 0),e.n([e.a()],o.prototype,`_options`,void 0);var s=class extends o{constructor(){super(),this.inputRef=r.t(),this.value=``,this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new a.t(this)}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(e=>{e.selected&&!this.value&&(this.value=e.value)})}add(e,t){let n={value:e.value||e.text,label:e.text||e.value,selected:e.selected,disabled:e.disabled};if(t===void 0)this._options.push(n);else if(typeof t==`number`)this._options.splice(t,0,n);else{let e=t.value||t.text,r=this._options.findIndex(t=>t.value===e);r>=0?this._options.splice(r,0,n):this._options.push(n)}e.selected&&(this.value=e.value||e.text,this.selectedIndex=this._options.findIndex(e=>e.value===this.value)),this.requestUpdate()}remove(e){typeof e==`number`&&(this.selectedIndex===e&&(this.value=this._options[0]?.value||``),this._options.splice(e,1),this.requestUpdate())}item(e){return this.inputRef.value?.item(e)}namedItem(e){return this.inputRef.value?.namedItem(e)}showPicker(){this.inputRef.value&&`showPicker`in this.inputRef.value&&this.inputRef.value.showPicker()}attributeChangedCallback(e,t,n){e===`options`&&(this._options=n?JSON.parse(n):[]),e===`value`&&this.value!==t&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===n),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}update(e){super.update(e),e.has(`_optionsProp`)&&this._optionsProp.length>0&&(this._options=this._optionsProp,this.requestUpdate(`_options`),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),e.has(`value`)&&this.value!==e.get(`value`)&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(e){super.firstUpdated(e),this._optionsProp.length&&(this._options=this._optionsProp),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions}render(){let i=`pkt-input ${this.fullwidth?`pkt-input--fullwidth`:``}`;return e.p`
+const e=require("./element-DJzurxgt.cjs"),t=require("./element-with-slot-BY7Jc-q8.cjs"),n=require("./if-defined-DrwbxQOj.cjs"),r=require("./ref-DO7TzO4O.cjs"),i=require("./input-element-B0qLbEdF.cjs"),a=require("./pkt-options-controller-CPrfqepu.cjs");require("./input-wrapper-DPkkiG7S.cjs");var o=class extends i.t{constructor(...e){super(...e),this._optionsProp=[],this._options=[]}get options(){return this._options.map(e=>({...e,selected:this.isOptionSelected(e)}))}set options(e){this._optionsProp=e,this.requestUpdate(`_optionsProp`,this._options)}isOptionSelected(e){return Array.isArray(this.value)?this.value.includes(e.value):e.value===this.value}findOptionByValue(e){return this._options.find(t=>t.value===e)}getSelectedOptions(){return this._options.filter(e=>this.isOptionSelected(e))}parseOptions(){let e=this._optionsProp.length>0,t=this.optionsController?.nodes?.length&&this.optionsController.nodes.length>0;e?this._options=this._optionsProp:t&&(this._options=this.optionsController.options)}willUpdate(e){super.willUpdate(e),this.parseOptions()}};e.n([e.o({type:Array,attribute:`options`})],o.prototype,`_optionsProp`,void 0),e.n([e.a()],o.prototype,`_options`,void 0);var s=class extends o{constructor(){super(),this.inputRef=r.t(),this.value=``,this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new a.t(this)}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(e=>{e.selected&&!this.value&&(this.value=e.value)})}add(e,t){let n={value:e.value||e.text,label:e.text||e.value,selected:e.selected,disabled:e.disabled};if(t===void 0)this._options.push(n);else if(typeof t==`number`)this._options.splice(t,0,n);else{let e=t.value||t.text,r=this._options.findIndex(t=>t.value===e);r>=0?this._options.splice(r,0,n):this._options.push(n)}e.selected&&(this.value=e.value||e.text,this.selectedIndex=this._options.findIndex(e=>e.value===this.value)),this.requestUpdate()}remove(e){typeof e==`number`&&(this.selectedIndex===e&&(this.value=this._options[0]?.value||``),this._options.splice(e,1),this.requestUpdate())}item(e){return this.inputRef.value?.item(e)}namedItem(e){return this.inputRef.value?.namedItem(e)}showPicker(){this.inputRef.value&&`showPicker`in this.inputRef.value&&this.inputRef.value.showPicker()}attributeChangedCallback(e,t,n){e===`options`&&(this._options=n?JSON.parse(n):[]),e===`value`&&this.value!==t&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===n),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}update(e){super.update(e),e.has(`_optionsProp`)&&this._optionsProp.length>0&&(this._options=this._optionsProp,this.requestUpdate(`_options`),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),e.has(`value`)&&this.value!==e.get(`value`)&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(e){super.firstUpdated(e),this._optionsProp.length&&(this._options=this._optionsProp),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions}render(){let i=`pkt-input pkt-input--${this.inputSize} ${this.fullwidth?`pkt-input--fullwidth`:``}`;return e.p`
       <pkt-input-wrapper
+        .size=${this.inputSize}
         ?counter=${this.counter}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}

package/dist/{select-BwHUIlwQ.js → select-CsBXXbLP.js}

@@ -2,9 +2,9 @@ import { a as e, n as t, o as n, p as r, s as i } from "./element-BoJrqauR.js";
 import { n as a } from "./element-with-slot-mXLg8gg8.js";
 import { t as o } from "./if-defined-D0bnetLJ.js";
 import { n as s, t as c } from "./ref-WGS0u7i2.js";
-import { t as l } from "./input-element-BFHpeoV8.js";
+import { t as l } from "./input-element-C0RnXi-J.js";
 import { t as u } from "./pkt-options-controller-DMxYwnnj.js";
-import "./input-wrapper-DaA98B5l.js";
+import "./input-wrapper-fWV5P4MN.js";
 //#region src/base-elements/options-input-element.ts
 var d = class extends l {
 	constructor(...e) {
@@ -88,9 +88,10 @@ var f = class extends d {
 		super.firstUpdated(e), this._optionsProp.length && (this._options = this._optionsProp), !this.value && this._options.length > 0 ? (this.value = this._options[0].value, this.selectedIndex = 0) : this.selectedIndex = this._options.findIndex((e) => e.value === this.value), this.selectedOptions = this.inputRef.value?.selectedOptions;
 	}
 	render() {
-		let e = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
+		let e = `pkt-input pkt-input--${this.inputSize} ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
 		return r`
       <pkt-input-wrapper
+        .size=${this.inputSize}
         ?counter=${this.counter}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}

package/dist/shared-types/footer.d.ts

@@ -0,0 +1,95 @@
+/**
+ * footer.ts
+ *
+ * Framework-agnostic prop types for the reworked footer components
+ * (`PktFooter` / `pkt-footer` and `PktFooterSimple` / `pkt-footer-simple`).
+ *
+ * Both components render an optional grey "secondary" band with the
+ * consumer's custom content, stacked on top of the global (blue) footer
+ * whose content comes from the same CDN payload as the global header —
+ * see `header-footer.ts`.
+ */
+import type { THeaderFooterApi, THeaderMenuLocale } from './header-footer';
+/** Custom link in the secondary (grey) footer. */
+export interface IPktFooterLink {
+    href: string;
+    text: string;
+    /**
+     * Mark the link as external: the link's top domain is shown in
+     * parentheses after the text ("Ledige stillinger (webcruiter.com)"),
+     * per Punkt's link-labelling guidance.
+     */
+    external?: boolean;
+    openInNewTab?: boolean;
+}
+/** Column of custom content in the secondary footer (1–3 per footer). */
+export interface IPktFooterColumn {
+    title: string;
+    /** Optional free-text paragraph shown above the links. */
+    text?: string;
+    links?: IPktFooterLink[];
+}
+/**
+ * @deprecated The social-media row now comes from the global footer's
+ * payload. Only rendered when explicitly supplied.
+ */
+export interface IPktFooterSocialLink {
+    href: string;
+    iconName?: string;
+    language?: string;
+    openInNewTab?: boolean;
+}
+/** Props shared by `PktFooter` and `PktFooterSimple` in both frameworks. */
+export interface IPktFooterBase<IconType = string> {
+    /** Pre-fetched header/footer payload. If supplied, the component skips its own fetch. */
+    data?: THeaderFooterApi<IconType>;
+    /** Endpoint to fetch the header/footer payload from. */
+    dataUrl?: string;
+    /** Locale key to select from the payload. Defaults to `nb-NO`. */
+    locale?: THeaderMenuLocale;
+    /** Skip the global (blue) footer entirely, e.g. when CSP blocks the CDN. Default: false */
+    skipGlobal?: boolean;
+    /** Open custom links in a new tab. Applies to custom content only. Default: false */
+    openLinksInNewTab?: boolean;
+    /**
+     * Replace the payload's cookie-settings link (`#cb-trigger`) with
+     * Punkt's own consent dialog. When unset the cookie-settings link is
+     * hidden. Default: false
+     */
+    includeConsent?: boolean;
+    hotjarId?: string | null;
+    googleAnalyticsId?: string | null;
+    devMode?: boolean;
+    cookieDomain?: string | null;
+    cookieSecure?: string | null;
+    cookieExpiryDays?: string | null;
+}
+export interface IPktFooterProps<IconType = string> extends IPktFooterBase<IconType> {
+    /** Custom content columns for the secondary (grey) footer. */
+    columns?: IPktFooterColumn[];
+    /** @deprecated Use `columns`. Mapped to the first entry of `columns`. */
+    columnOne?: IPktFooterColumn;
+    /** @deprecated Use `columns`. Mapped to the second entry of `columns`. */
+    columnTwo?: IPktFooterColumn;
+    /**
+     * @deprecated The privacy link now comes from the global footer's payload.
+     * Only rendered (in the secondary footer) when explicitly set to a
+     * non-default value.
+     */
+    personvernOgInfoLink?: string;
+    /**
+     * @deprecated The accessibility link now comes from the global footer's
+     * payload. Only rendered (in the secondary footer) when explicitly set
+     * to a non-default value.
+     */
+    tilgjengelighetLink?: string;
+    /** @deprecated The social-media row now comes from the global footer's payload. */
+    socialLinks?: IPktFooterSocialLink[];
+}
+export interface IPktFooterSimpleProps<IconType = string> extends IPktFooterBase<IconType> {
+    /** Custom links shown as a compact row in the secondary (grey) footer. */
+    links?: IPktFooterLink[];
+}
+/** Historical defaults for the deprecated link props — used to detect explicit overrides. */
+export declare const DEFAULT_FOOTER_PERSONVERN_URL = "https://www.oslo.kommune.no/personvern-og-informasjonskapsler/";
+export declare const DEFAULT_FOOTER_TILGJENGELIGHET_URL = "https://www.oslo.kommune.no/tilgjengelighet/";

package/dist/shared-types/{header-menu.d.ts → header-footer.d.ts}

@@ -1,18 +1,20 @@
 /**
- * header-menu.ts
+ * header-footer.ts
  *
- * Type definitions for the global header mega menu, shared between
- * @oslokommune/punkt-elements and (eventually) @oslokommune/punkt-react.
+ * Type definitions for the global header/footer payload (mega menu,
+ * footer, search and contact), shared between @oslokommune/punkt-elements
+ * and @oslokommune/punkt-react.
  *
  * The shape mirrors the live API response from
  * https://cdn.web.oslo.kommune.no/header-footer/header-footer.json
- * which the legacy oslo.kommune.no header consumes.
+ * which the "live" oslo.kommune.no header consumes.
  */
 /**
  * Locale keys present in the live payload. Typed as a string union with a
  * `string & {}` escape hatch so additional locales can be added without
  * a type-level breaking change.
  */
+import type { Representing, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, User, UserMenuItem } from './header';
 export type THeaderMenuLocale = 'nb-NO' | 'en-GB' | (string & {});
 /** Plain link without an icon. */
 export interface IHeaderMenuLink {
@@ -104,5 +106,50 @@ export interface IPktHeaderMenu<IconType = string> {
     /** Pixel breakpoint below which sections collapse into accordions. */
     mobileBreakpoint?: number;
 }
+/**
+ * Framework-agnostic props for the global (kommune-wide) header
+ * (`pkt-header-global` / `PktHeaderGlobal`). Elements narrows the
+ * boolean fields to `Booleanish` and React adds callback/className
+ * props on top — see each package's `header/types.ts`.
+ */
+export interface IPktHeaderGlobal<IconType = string> {
+    /** Endpoint to fetch the header/footer payload from. */
+    dataUrl?: string;
+    /** Pre-fetched payload. If supplied, the component (and its menu) skips its own fetch. */
+    data?: THeaderFooterApi<IconType>;
+    /** Locale key to select from the payload. Defaults to `nb-NO`. */
+    locale?: THeaderMenuLocale;
+    /** Logo link URL. When omitted the logo is rendered without a link. */
+    logoLink?: string;
+    /** Override the CDN path the logo assets load from. Can also be set
+     * globally via `window.pktLogoPath`. */
+    logoPath?: string;
+    /** Show the search field. Default: true */
+    showSearch?: boolean;
+    /** Placeholder for the search field. Falls back to the payload's search placeholder, then 'Søk'. */
+    searchPlaceholder?: string;
+    /** Show the contact link (from the payload's `header.contact`). Default: true */
+    showContact?: boolean;
+    /** User object for the logged-in user. When set, the user menu is shown. */
+    user?: User;
+    /** User menu items. */
+    userMenu?: UserMenuItem<IconType>[];
+    /** Representation object. */
+    representing?: Representing;
+    /** Allow the user to change representation. */
+    canChangeRepresentation?: boolean;
+    /** Logout button placement. */
+    logOutButtonPlacement?: TLogOutButtonPlacement;
+    /** Header position. Default: 'fixed' */
+    position?: THeaderPosition;
+    /** Scroll behavior. Default: 'hide' */
+    scrollBehavior?: THeaderScrollBehavior;
+    /** Width below which the header switches to mobile layout. Default: 768 */
+    mobileBreakpoint?: number;
+    /** Width below which the header switches to tablet layout. Default: 1024 */
+    tabletBreakpoint?: number;
+}
 /** Default URL of the live header/footer endpoint. */
 export declare const DEFAULT_HEADER_FOOTER_URL = "https://cdn.web.oslo.kommune.no/header-footer/header-footer.json";
+/** Default logo link for both header variants (unless overridden or hidden). */
+export declare const DEFAULT_HEADER_LOGO_LINK = "https://www.oslo.kommune.no";

package/dist/shared-types/header.d.ts

@@ -81,7 +81,7 @@ export type TLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none';
 /**
  * Position options for the header
  */
-export type THeaderPosition = 'fixed' | 'relative';
+export type THeaderPosition = 'fixed' | 'sticky' | 'relative';
 /**
  * Scroll behavior options for the header
  */

package/dist/shared-types/index.d.ts

@@ -4,12 +4,13 @@ export type { TAriaBoolean, TAriaBooleanMixed, TAriaCurrent, TAriaHasPopup, TAri
 export type { THeadingLevel, THeadingSize, THeadingWeight } from './heading';
 export type { User, Representing, UserMenuItem, InternalMenuItemBase, InternalMenuLink, InternalMenuButton, TInternalMenuItem, TSlotMenuVariant, THeaderMenu, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, } from './header';
 export { convertUserMenuItem } from './header';
-export type { THeaderMenuLocale, IHeaderMenuLink, IHeaderMenuIconLink, IHeaderMenuButton, IHeaderMenuServices, IHeaderMenuSection, IMegaMenu, IHeaderFooter, IHeaderFooterLocaleData, THeaderFooterApi, IPktHeaderMenu, } from './header-menu';
-export { DEFAULT_HEADER_FOOTER_URL } from './header-menu';
+export type { THeaderMenuLocale, IHeaderMenuLink, IHeaderMenuIconLink, IHeaderMenuButton, IHeaderMenuServices, IHeaderMenuSection, IMegaMenu, IHeaderFooter, IHeaderFooterLocaleData, THeaderFooterApi, IPktHeaderMenu, IPktHeaderGlobal, } from './header-footer';
+export { DEFAULT_HEADER_FOOTER_URL, DEFAULT_HEADER_LOGO_LINK } from './header-footer';
+export type { IPktFooterLink, IPktFooterColumn, IPktFooterSocialLink, IPktFooterBase, IPktFooterProps, IPktFooterSimpleProps, } from './footer';
+export { DEFAULT_FOOTER_PERSONVERN_URL, DEFAULT_FOOTER_TILGJENGELIGHET_URL } from './footer';
 export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPositionWithCenter, } from './layout';
 export type { THTMLButtonType, TSelectionMode } from './form';
-export type { TSelectOption } from './select';
-export type { TSize3, TSize5, TSize7 } from './size';
+export type { TPktInputSize, TSize3, TSize5, TSize7 } from './size';
 export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin, TTagSkin } from './skin';
 export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';
 export type { IDatepickerStrings } from './datepicker';
@@ -18,6 +19,7 @@ export type { ITimepickerStrings } from './timepicker';
 export { defaultTimepickerStrings } from './timepicker';
 export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition, } from './progressbar';
 export type { IPktComboboxOption, TPktComboboxTagSkin, TPktComboboxDisplayValue, TPktComboboxTagPlacement, } from './combobox';
+export type { IPktSelectOption, TSelectOption } from './select';
 export type { TPktSearchInputAppearance, TPktSearchInputMethod, IPktSearchInputSuggestion, IPktSearchInput, } from './searchinput';
 export type { TUploadStrategy as TFileUploadStrategy, TFileUploadItemRenderer, TFilesChangedReason, TFileValidator, TTransferProgress, IFileItem, IFileTransfer, IFileValidateDetail, ITransferCancelledDetail, IFilesChangedDetail, IFileUploadStrings, } from './fileupload';
 export { defaultFileUploadStrings } from './fileupload';

package/dist/shared-types/searchinput.d.ts

@@ -5,6 +5,7 @@
  * stay aligned. React extends suggestions with `ReactNode` and optional
  * `onClick` in the component layer — see `@oslokommune/punkt-react`.
  */
+import type { TPktInputSize } from './size';
 export type TPktSearchInputAppearance = 'local' | 'local-with-button' | 'global';
 export type TPktSearchInputMethod = 'get' | 'post' | 'dialog';
 /**
@@ -28,6 +29,7 @@ export interface IPktSearchInputSuggestion {
  */
 export interface IPktSearchInput {
     appearance?: TPktSearchInputAppearance;
+    inputSize?: TPktInputSize;
     disabled?: boolean;
     fullwidth?: boolean;
     id: string;

package/dist/shared-types/select.d.ts

@@ -3,10 +3,11 @@
  * Lives in shared-types so both `@oslokommune/punkt-elements` and
  * `@oslokommune/punkt-react` can re-export the same canonical type.
  */
-export type TSelectOption = {
+export interface IPktSelectOption {
     value: string;
     label: string;
     selected?: boolean;
     disabled?: boolean;
     hidden?: boolean;
-};
+}
+export type TSelectOption = IPktSelectOption;

package/dist/shared-types/size.d.ts

@@ -16,3 +16,7 @@ export type TSize5 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
  * Full 7-level size scale
  */
 export type TSize7 = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+/**
+ * Sizes used in our input components
+ */
+export type TPktInputSize = 'xsmall' | 'small' | 'medium';

package/dist/shared-types/timepicker.d.ts

@@ -1,9 +1,3 @@
-/**
- * timepicker.ts
- *
- * Type definitions for the timepicker component.
- * Used by both Elements and React implementations.
- */
 /**
  * Translation strings for the timepicker component.
  * Matches the shape of the `timepicker` key in no.json.

package/dist/shared-utils/datepicker-utils.d.ts

@@ -1,3 +1,4 @@
+import type { TPktInputSize } from '../shared-types/size';
 /**
  * Shared datepicker utility functions used by both Elements and React packages.
  * Only framework-agnostic functions belong here.
@@ -23,11 +24,11 @@ export declare const filterDates: (dates: string[], min?: string | null, max?: s
 /**
  * Generates input CSS classes for datepicker.
  */
-export declare const getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
+export declare const getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string, inputSize?: TPktInputSize) => Record<string, boolean>;
 /**
  * Generates button CSS classes for calendar toggle button.
  */
-export declare const getDatepickerButtonClasses: () => Record<string, boolean>;
+export declare const getDatepickerButtonClasses: (inputSize?: TPktInputSize) => Record<string, boolean>;
 /**
  * Generates range label CSS classes.
  */
@@ -62,8 +63,8 @@ declare const _default: {
     validateRangeOrder: (values: string[]) => boolean;
     sortDates: (dates: string[]) => string[];
     filterDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
-    getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
-    getDatepickerButtonClasses: () => Record<string, boolean>;
+    getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string, inputSize?: TPktInputSize) => Record<string, boolean>;
+    getDatepickerButtonClasses: (inputSize?: TPktInputSize) => Record<string, boolean>;
     getRangeLabelClasses: (showRangeLabels: boolean) => Record<string, boolean>;
     processDateSelection: (detail: string | string[], multiple: boolean, range: boolean) => string;
     handleCalendarPosition: (popup: HTMLElement | null, input: HTMLElement | null, hasCounter?: boolean) => void;

package/dist/shared-utils/fileupload/focus-trap.d.ts

@@ -1,12 +1,6 @@
 /**
- * Build a list of focusable elements inside a container (same selector used by
- * Lit and React fileupload preview modals). Hidden elements are filtered out.
+ * Re-export of the generic focus-trap helpers, kept here for backwards
+ * compatibility with existing `shared-utils/fileupload` imports. The canonical
+ * implementation now lives in `shared-utils/focus-trap`.
  */
-export declare function getFocusableElements(container: HTMLElement | null | undefined): HTMLElement[];
-/**
- * Keyboard handler that wraps Tab / Shift-Tab focus around the first and last
- * focusable elements inside a container. Returns `true` if the event was handled.
- *
- * Call from a `keydown` listener on the modal root.
- */
-export declare function trapTabInside(event: KeyboardEvent, container: HTMLElement | null | undefined): boolean;
+export { getFocusableElements, trapTabInside } from '../focus-trap';

package/dist/shared-utils/focus-trap/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Build a list of focusable elements inside a container (same selector used by
+ * the fileupload preview modals and the global header mega menu). Hidden
+ * elements are filtered out.
+ */
+export declare function getFocusableElements(container: HTMLElement | null | undefined): HTMLElement[];
+/**
+ * Like {@link getFocusableElements}, but descends open shadow roots, treats a
+ * native `<summary>` as focusable, and skips content hidden inside a collapsed
+ * `<details>`. Returned in flattened tree order. Use this when the container may
+ * hold web components or `<details>` accordions (e.g. the header mega menu).
+ */
+export declare function getFocusableElementsDeep(container: HTMLElement | null | undefined): HTMLElement[];
+/** Resolve the genuinely focused element, piercing nested open shadow roots. */
+export declare function getDeepActiveElement(doc?: Document): HTMLElement | null;
+/**
+ * Keyboard handler that wraps Tab / Shift-Tab focus around the first and last
+ * focusable elements inside a container. Returns `true` if the event was handled.
+ *
+ * Call from a `keydown` listener on the modal root.
+ */
+export declare function trapTabInside(event: KeyboardEvent, container: HTMLElement | null | undefined): boolean;

package/dist/shared-utils/{header-menu → header-footer}/example-data.d.ts

@@ -1,9 +1,10 @@
-import type { THeaderFooterApi } from '../../shared-types/header-menu';
+import type { THeaderFooterApi } from '../../shared-types/header-footer';
 /**
  * Example header/footer payload used by the dev/demo pages in both
- * Punkt Elements and Punkt React. Mirrors the live Oslo kommune
- * payload closely enough to exercise every region of the mega menu
- * (services grid, four section columns, footer + social links).
+ * Punkt Elements and Punkt React. Verbatim copy of the live Oslo
+ * kommune payload from
+ * https://cdn.web.oslo.kommune.no/header-footer/header-footer.json
+ * (hentet 2026-07-06).
  *
  * Tests use focused per-test fixtures with smaller shapes — this
  * dataset is for visual demos only.

package/dist/shared-utils/header-footer/external-domain.d.ts

@@ -0,0 +1,26 @@
+/**
+ * External-link labelling for the global footer.
+ *
+ * Punkt's link-labelling guidance (punkt.oslo.kommune.no/god-praksis/merking-av-lenker/)
+ * prefers spelling out the destination domain in parentheses after the link
+ * text — "Ledige stillinger (webcruiter.com)" — over an external-link icon.
+ */
+/**
+ * Return the top domain of an absolute http(s) URL, or `undefined` for
+ * relative URLs, fragments, and non-web schemes (`mailto:`, `tel:`).
+ * Unlike `getExternalDomainLabel` this does no internal-host check — use
+ * it when the consumer has explicitly flagged the link as external.
+ */
+export declare function getLinkDomainLabel(url: string | undefined): string | undefined;
+/**
+ * Return the top domain to display after an external link's text, or
+ * `undefined` when the link needs no label:
+ *
+ * - relative URLs and fragments (`/jobb`, `#cb-trigger`) — same site
+ * - non-http(s) schemes (`mailto:`, `tel:`) — not web navigation
+ * - hosts on `oslo.kommune.no` (or a subdomain) — internal
+ *
+ * `internalHost` can widen what counts as internal, e.g. for consumers
+ * hosting the payload themselves.
+ */
+export declare function getExternalDomainLabel(url: string | undefined, internalHost?: string): string | undefined;