@oslokommune/punkt-elements 17.1.3 → 18.0.0

package/dist/{timepicker-ClwgYywH.js → timepicker-ixs_E5RY.js}

@@ -1,11 +1,12 @@
-import { a as e, d as t, n, o as r, p as i, r as a, s as o } from "./element-ChsFgr_B.js";
-import { t as s } from "./class-map-CnWCnBSX.js";
-import { n as c } from "./element-with-slot-BvG9ctC-.js";
-import "./icon-D-LA22xD.js";
-import { t as l } from "./if-defined-CGzIlZ9-.js";
-import { n as u, t as d } from "./ref-CWD6PjVd.js";
-import { t as f } from "./input-element-DBMNBplu.js";
-import "./input-wrapper-BmxNvznr.js";
+import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-BKSPVgs2.js";
+import { t as o } from "./class-map-F1DJHyb7.js";
+import { t as s } from "./format-BTeSVkED.js";
+import { n as c } from "./element-with-slot-YUAUFRqw.js";
+import "./icon-HYU1f54x.js";
+import { t as l } from "./if-defined-BF8XcDi5.js";
+import { n as u, t as d } from "./ref-Chc_DZAb.js";
+import { t as f } from "./input-element-D07DmR34.js";
+import "./input-wrapper-Cci_wTvD.js";
 //#region ../../shared-utils/timepicker/time-utils.ts
 var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && parseInt(e.slice(3), 10) <= 59, m = (e) => {
 	let [t, n] = e.split(":").map(Number);
@@ -153,25 +154,26 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
 	manageValidity(e) {
 		let t = this.hoursInputRef.value;
 		if (!t) return;
+		let n = this.pktStrings.get("validation");
 		if (this.required && !this.value) {
-			this.internals.setValidity({ valueMissing: !0 }, a.forms.messages.required, t), this._setAriaInvalid(!0);
+			this.internals.setValidity({ valueMissing: !0 }, n.valueMissing, t), this._setAriaInvalid(!0);
 			return;
 		}
 		if (!this.value) {
 			this.internals.setValidity({}), this._setAriaInvalid(!1);
 			return;
 		}
-		let n = m(this.value), r = h(this.step);
-		if (this.min && n < m(String(this.min))) {
-			this.internals.setValidity({ rangeUnderflow: !0 }, a.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)), t), this._setAriaInvalid(!0);
+		let r = m(this.value), i = h(this.step);
+		if (this.min && r < m(String(this.min))) {
+			this.internals.setValidity({ rangeUnderflow: !0 }, s(n.rangeUnderflowMin, { min: String(this.min) }), t), this._setAriaInvalid(!0);
 			return;
 		}
-		if (this.max && n > m(String(this.max))) {
-			this.internals.setValidity({ rangeOverflow: !0 }, a.forms.messages.rangeOverflowMax.replace("{max}", String(this.max)), t), this._setAriaInvalid(!0);
+		if (this.max && r > m(String(this.max))) {
+			this.internals.setValidity({ rangeOverflow: !0 }, s(n.rangeOverflowMax, { max: String(this.max) }), t), this._setAriaInvalid(!0);
 			return;
 		}
-		if (this.step && n % r !== 0) {
-			let e = r === 60 ? a.forms.messages.timeStepMismatchHour : r === 30 ? a.forms.messages.timeStepMismatchHalfHour : a.forms.messages.timeStepMismatch.replace("{step}", `${r}, ${r * 2}, ${r * 3}`);
+		if (this.step && r % i !== 0) {
+			let e = i === 60 ? n.timeStepMismatchHour : i === 30 ? n.timeStepMismatchHalfHour : s(n.timeStepMismatch, { step: `${i}, ${i * 2}, ${i * 3}` });
 			this.internals.setValidity({ stepMismatch: !0 }, e, t), this._setAriaInvalid(!0);
 			return;
 		}
@@ -262,40 +264,40 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
 		let t = v(this._hours, this._minutes, e, this._minuteStep);
 		this._hours = t.hours, this._minutes = t.minutes, this._syncValueFromDisplay();
 	}
-	_renderOption(e, t) {
-		let n = String(e).padStart(2, "0"), r = e === (t === "hour" ? this._hours === "" ? NaN : parseInt(this._hours, 10) : this._minutes === "" ? NaN : parseInt(this._minutes, 10));
-		return i`
+	_renderOption(t, n) {
+		let r = String(t).padStart(2, "0"), i = t === (n === "hour" ? this._hours === "" ? NaN : parseInt(this._hours, 10) : this._minutes === "" ? NaN : parseInt(this._minutes, 10));
+		return e`
       <button
-        class=${s({
+        class=${o({
 			"pkt-btn": !0,
 			"pkt-btn--tertiary": !0,
 			"pkt-btn--small": !0,
 			"pkt-btn--label-only": !0,
 			"pkt-timepicker-popup__option": !0,
-			"pkt-timepicker-popup__option--selected": r
+			"pkt-timepicker-popup__option--selected": i
 		})}
         type="button"
         role="option"
-        aria-selected=${r ? "true" : "false"}
-        tabindex=${r ? "0" : "-1"}
-        data-type=${t}
-        data-value=${e}
-        @click=${(n) => {
-			n.stopImmediatePropagation(), this._handleOptionClick(e, t);
+        aria-selected=${i ? "true" : "false"}
+        tabindex=${i ? "0" : "-1"}
+        data-type=${n}
+        data-value=${t}
+        @click=${(e) => {
+			e.stopImmediatePropagation(), this._handleOptionClick(t, n);
 		}}
       >
-        <span class="pkt-btn__text pkt-txt-14-light">${n}</span>
+        <span class="pkt-btn__text pkt-txt-14-light">${r}</span>
       </button>
     `;
 	}
 	_renderPopup() {
-		return i`
+		return e`
       <div
         class="pkt-timepicker-popup"
         id=${this.id + "-popup"}
         ?hidden=${!this._isOpen}
         role="group"
-        aria-label=${this.strings.timepicker?.selectTime ?? "Velg tidspunkt"}
+        aria-label=${this.pktStrings.get("timepicker").selectTime}
         @keydown=${this._handlePopupKeydown}
         @focusout=${(e) => {
 			this.querySelector(".pkt-timepicker-popup")?.contains(e.relatedTarget) || this._closePopup();
@@ -304,7 +306,7 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
         <div
           class="pkt-timepicker-popup__col"
           role="listbox"
-          aria-label=${this.strings.timepicker?.hours ?? "Timer"}
+          aria-label=${this.pktStrings.get("timepicker").hours}
           aria-orientation="vertical"
         >
           ${this._hourOptions.map((e) => this._renderOption(e, "hour"))}
@@ -312,7 +314,7 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
         <div
           class="pkt-timepicker-popup__col"
           role="listbox"
-          aria-label=${this.strings.timepicker?.minutes ?? "Minutter"}
+          aria-label=${this.pktStrings.get("timepicker").minutes}
           aria-orientation="vertical"
         >
           ${this._minuteOptions.map((e) => this._renderOption(e, "minute"))}
@@ -321,28 +323,28 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
     `;
 	}
 	_renderContainer() {
-		let e = this.strings.timepicker?.hours ?? "Timer", n = this.strings.timepicker?.minutes ?? "Minutter", r = this.label ? `${e}, ${this.label}` : e, a = this.label ? `${n}, ${this.label}` : n;
-		return i`
+		let t = this.pktStrings.get("timepicker").hours, r = this.pktStrings.get("timepicker").minutes, i = this.label ? `${t}, ${this.label}` : t, a = this.label ? `${r}, ${this.label}` : r;
+		return e`
       <div
         class="pkt-input__container pkt-input__container--${this.inputSize}"
         @click=${(e) => {
 			e.target.closest("button, input") || this.hoursInputRef.value?.focus();
 		}}
       >
-        ${this.stepArrows ? i`
+        ${this.stepArrows ? e`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
-                aria-label=${this.strings.timepicker?.prevTime ?? "Forrige tidspunkt"}
+                aria-label=${this.pktStrings.get("timepicker").prevTime}
                 ?disabled=${this.disabled}
                 @click=${() => this._stepTime(-1)}
               >
                 <pkt-icon name="chevron-thin-left"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${this.strings.timepicker?.prevTime ?? "Forrige tidspunkt"}</span
+                  >${this.pktStrings.get("timepicker").prevTime}</span
                 >
               </button>
-            ` : t}
+            ` : n}
         <input
           ${u(this.hoursInputRef)}
           type="text"
@@ -355,14 +357,14 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
           data-max="23"
           .value=${this._hours}
           placeholder="––"
-          aria-label=${r}
+          aria-label=${i}
           role="spinbutton"
-          aria-invalid=${this.hasError ? "true" : t}
-          aria-errormessage=${this.hasError ? `${this.id}-hours-error` : t}
+          aria-invalid=${this.hasError ? "true" : n}
+          aria-errormessage=${this.hasError ? `${this.id}-hours-error` : n}
           aria-valuemin="0"
           aria-valuemax="23"
-          aria-valuenow=${this._hours === "" ? t : this._hours}
-          aria-valuetext=${this._hours === "" ? t : `${this._hours} ${e.toLowerCase()}`}
+          aria-valuenow=${this._hours === "" ? n : this._hours}
+          aria-valuetext=${this._hours === "" ? n : `${this._hours} ${t.toLowerCase()}`}
           autocomplete="off"
           ?disabled=${this.disabled}
           @keydown=${this._handleHoursKeydown}
@@ -386,12 +388,12 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
           placeholder="––"
           aria-label=${a}
           role="spinbutton"
-          aria-invalid=${this.hasError ? "true" : t}
-          aria-errormessage=${this.hasError ? `${this.id}-hours-error` : t}
+          aria-invalid=${this.hasError ? "true" : n}
+          aria-errormessage=${this.hasError ? `${this.id}-hours-error` : n}
           aria-valuemin="0"
           aria-valuemax="59"
-          aria-valuenow=${this._minutes === "" ? t : this._minutes}
-          aria-valuetext=${this._minutes === "" ? t : `${this._minutes} ${n.toLowerCase()}`}
+          aria-valuenow=${this._minutes === "" ? n : this._minutes}
+          aria-valuetext=${this._minutes === "" ? n : `${this._minutes} ${r.toLowerCase()}`}
           autocomplete="off"
           ?disabled=${this.disabled}
           @keydown=${this._handleMinutesKeydown}
@@ -400,17 +402,17 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
 			e.target.select(), e.stopImmediatePropagation();
 		}}
         />
-        ${this.hidePicker && !this.stepArrows ? i`<pkt-icon
+        ${this.hidePicker && !this.stepArrows ? e`<pkt-icon
               class="pkt-input-icon pkt-timepicker__icon"
               name="clock"
               aria-hidden="true"
-            ></pkt-icon>` : t}
-        ${!this.hidePicker && !this.stepArrows ? i`
+            ></pkt-icon>` : n}
+        ${!this.hidePicker && !this.stepArrows ? e`
               <button
                 ${u(this.buttonRef)}
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button"
                 type="button"
-                aria-label=${this.strings.timepicker?.openPicker ?? "Åpne tidspunkt-velger"}
+                aria-label=${this.pktStrings.get("timepicker").openPicker}
                 aria-haspopup="listbox"
                 aria-expanded=${this._isOpen ? "true" : "false"}
                 aria-controls=${this.id + "-popup"}
@@ -419,24 +421,24 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
               >
                 <pkt-icon name="clock"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${this.strings.timepicker?.openPicker ?? "Åpne tidspunkt-velger"}</span
+                  >${this.pktStrings.get("timepicker").openPicker}</span
                 >
               </button>
-            ` : t}
-        ${this.stepArrows ? i`
+            ` : n}
+        ${this.stepArrows ? e`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button pkt-timepicker__button--next"
                 type="button"
-                aria-label=${this.strings.timepicker?.nextTime ?? "Neste tidspunkt"}
+                aria-label=${this.pktStrings.get("timepicker").nextTime}
                 ?disabled=${this.disabled}
                 @click=${() => this._stepTime(1)}
               >
                 <pkt-icon name="chevron-thin-right"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${this.strings.timepicker?.nextTime ?? "Neste tidspunkt"}</span
+                  >${this.pktStrings.get("timepicker").nextTime}</span
                 >
               </button>
-            ` : t}
+            ` : n}
         <input
           ${u(this.hiddenInputRef)}
           type="time"
@@ -455,8 +457,9 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
     `;
 	}
 	render() {
-		return i`
+		return e`
       <pkt-input-wrapper
+        .strings=${this.strings}
         label="${this.label}"
         ?disabled=${this.disabled}
         ?fullwidth=${this.fullwidth}
@@ -479,7 +482,7 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
         .size=${this.inputSize}
       >
         <div class="pkt-contents" slot="helptext">${c(this, "helptext")}</div>
-        ${!this.hidePicker && !this.stepArrows ? i`
+        ${!this.hidePicker && !this.stepArrows ? e`
               <div class="pkt-timepicker__anchor">
                 ${this._renderContainer()} ${this._renderPopup()}
               </div>
@@ -488,20 +491,20 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
     `;
 	}
 };
-n([r({
+i([a({
 	type: String,
 	reflect: !0
-})], y.prototype, "value", void 0), n([r({
+})], y.prototype, "value", void 0), i([a({
 	type: Boolean,
 	reflect: !0,
 	attribute: "hide-picker"
-})], y.prototype, "hidePicker", void 0), n([r({
+})], y.prototype, "hidePicker", void 0), i([a({
 	type: Boolean,
 	reflect: !0,
 	attribute: "step-arrows"
-})], y.prototype, "stepArrows", void 0), n([e()], y.prototype, "_hours", void 0), n([e()], y.prototype, "_minutes", void 0), n([e()], y.prototype, "_isOpen", void 0);
+})], y.prototype, "stepArrows", void 0), i([r()], y.prototype, "_hours", void 0), i([r()], y.prototype, "_minutes", void 0), i([r()], y.prototype, "_isOpen", void 0);
 try {
-	o("pkt-timepicker")(y);
+	t("pkt-timepicker")(y);
 } catch {
 	console.warn("Forsøker å definere <pkt-timepicker>, men den er allerede definert");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "17.1.3",
+  "version": "18.0.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -41,7 +41,7 @@
     "@babel/plugin-transform-private-property-in-object": "^7.27.1",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.28.3",
-    "@oslokommune/punkt-assets": "^17.1.2",
+    "@oslokommune/punkt-assets": "^18.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest-axe": "^3.5.9",
@@ -83,5 +83,5 @@
   "engines": {
     "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
   },
-  "gitHead": "f378c0e71d923d9526bc9eea3a399e0d9e00b206"
+  "gitHead": "057d0045ccd1af4d0f6591f0e2b0e5ab6fda3843"
 }

package/src/components/backlink/backlink.ts

@@ -36,7 +36,7 @@ export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLin
   render() {
     return html`<nav
       class="pkt-back-link"
-      aria-label=${this.ariaLabel || 'Gå tilbake til forrige side'}
+      aria-label=${this.ariaLabel || this.pktStrings.get('backlink').label}
     >
       <a href=${ifDefined(this.href || '/')} class="pkt-link pkt-link--icon-left"
         ><pkt-icon

package/src/components/breadcrumbs/breadcrumbs.ts

@@ -39,7 +39,7 @@ export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
     const backLink = this.breadcrumbs[this.breadcrumbs.length - 2]
 
     return html`
-      <nav class="pkt-breadcrumbs" aria-label="brødsmulemeny">
+      <nav class="pkt-breadcrumbs" aria-label=${this.pktStrings.get('breadcrumbs').ariaLabel}>
         <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
           ${this.breadcrumbs.map((item, index) =>
             index === this.breadcrumbs.length - 1

package/src/components/calendar/calendar.ts

@@ -95,12 +95,32 @@ export class PktCalendar extends PktElement {
   today: string | null = null
 
   // Localization strings
-  @property({ type: Array, attribute: 'day-strings' }) dayStrings: string[] = this.strings.dates.daysShort
-  @property({ type: Array, attribute: 'day-strings-long' }) dayStringsLong: string[] = this.strings.dates.days
-  @property({ type: Array, attribute: 'month-strings' }) monthStrings: string[] = this.strings.dates.months
-  @property({ type: String, attribute: 'week-string' }) weekString: string = this.strings.dates.week
-  @property({ type: String, attribute: 'prev-month-string' }) prevMonthString: string = this.strings.dates.prevMonth
-  @property({ type: String, attribute: 'next-month-string' }) nextMonthString: string = this.strings.dates.nextMonth
+  /** @deprecated Bruk `strings={{ dates: { daysShort: [...] } }}` eller `setPktStrings()`. */
+  @property({ type: Array, attribute: 'day-strings' }) dayStrings?: string[]
+  /** @deprecated Bruk `strings={{ dates: { days: [...] } }}` eller `setPktStrings()`. */
+  @property({ type: Array, attribute: 'day-strings-long' }) dayStringsLong?: string[]
+  /** @deprecated Bruk `strings={{ dates: { months: [...] } }}` eller `setPktStrings()`. */
+  @property({ type: Array, attribute: 'month-strings' }) monthStrings?: string[]
+  /** @deprecated Bruk `strings={{ dates: { week: '...' } }}` eller `setPktStrings()`. */
+  @property({ type: String, attribute: 'week-string' }) weekString?: string
+  /** @deprecated Bruk `strings={{ calendar: { prevMonth: '...' } }}` eller `setPktStrings()`. */
+  @property({ type: String, attribute: 'prev-month-string' }) prevMonthString?: string
+  /** @deprecated Bruk `strings={{ calendar: { nextMonth: '...' } }}` eller `setPktStrings()`. */
+  @property({ type: String, attribute: 'next-month-string' }) nextMonthString?: string
+
+  /** Datonavn og navigasjonstekster, med de utfasede enkeltpropene lagt oppå. */
+  protected get calendarStrings() {
+    const dates = this.pktStrings.get('dates')
+    const calendar = this.pktStrings.get('calendar')
+    return {
+      daysShort: this.dayStrings ?? dates.daysShort,
+      days: this.dayStringsLong ?? dates.days,
+      months: this.monthStrings ?? dates.months,
+      week: this.weekString ?? dates.week,
+      prevMonth: this.prevMonthString ?? calendar.prevMonth,
+      nextMonth: this.nextMonthString ?? calendar.nextMonth,
+    }
+  }
 
   // Internal state - selection tracking
   @property({ type: Array }) private _selected: Date[] = []
@@ -230,8 +250,7 @@ export class PktCalendar extends PktElement {
         }}
       >
         <nav class="pkt-cal-month-nav">
-          ${this.renderMonthNavButton('prev')}
-          ${this.renderMonthNav()}
+          ${this.renderMonthNavButton('prev')} ${this.renderMonthNav()}
           ${this.renderMonthNavButton('next')}
         </nav>
         <table
@@ -253,7 +272,8 @@ export class PktCalendar extends PktElement {
   private renderMonthNavButton(direction: 'prev' | 'next'): TemplateResult {
     const isPrev = direction === 'prev'
     const isAllowed = isPrev ? this.isPrevMonthAllowed() : this.isNextMonthAllowed()
-    const label = isPrev ? this.prevMonthString : this.nextMonthString
+    const { prevMonth, nextMonth } = this.calendarStrings
+    const label = isPrev ? prevMonth : nextMonth
     const iconName = isPrev ? 'chevron-thin-left' : 'chevron-thin-right'
     const className = isPrev ? 'pkt-calendar__prev-month' : 'pkt-calendar__next-month'
     const onClick = isPrev ? () => this.prevMonth() : () => this.nextMonth()
@@ -284,28 +304,32 @@ export class PktCalendar extends PktElement {
     const days: TemplateResult[] = []
 
     if (this.weeknumbers) {
-      days.push(html`<th><div class="pkt-calendar__week-number">${this.weekString}</div></th>`)
+      days.push(
+        html`<th><div class="pkt-calendar__week-number">${this.calendarStrings.week}</div></th>`,
+      )
     }
 
-    for (let i = 0; i < this.dayStrings.length; i++) {
+    const { days: dayNames, daysShort } = this.calendarStrings
+    for (let i = 0; i < daysShort.length; i++) {
       days.push(
         html`<th>
-          <div class="pkt-calendar__day-name" aria-label="${this.dayStringsLong[i]}">
-            ${this.dayStrings[i]}
-          </div>
+          <div class="pkt-calendar__day-name" aria-label="${dayNames[i]}">${daysShort[i]}</div>
         </th>`,
       )
     }
 
-    return html`<tr class="pkt-cal-week-row">${days}</tr>`
+    return html`<tr class="pkt-cal-week-row">
+      ${days}
+    </tr>`
   }
 
   private renderMonthNav(): TemplateResult {
+    const dates = this.pktStrings.get('dates')
     if (this.withcontrols) {
       return html`<div class="pkt-cal-month-picker">
-        <label for="${this.id}-monthnav" class="pkt-hide">${this.strings.dates.month}</label>
+        <label for="${this.id}-monthnav" class="pkt-hide">${dates.month}</label>
         <select
-          aria-label="${this.strings.dates.month}"
+          aria-label="${dates.month}"
           class="pkt-input pkt-input-compact"
           id="${this.id}-monthnav"
           @change=${(e: Event) => {
@@ -314,14 +338,14 @@ export class PktCalendar extends PktElement {
             this.changeMonth(this.year, parseInt(target.value))
           }}
         >
-          ${this.monthStrings.map(
+          ${this.calendarStrings.months.map(
             (month, index) =>
               html`<option value=${index} ?selected=${this.month === index}>${month}</option>`,
           )}
         </select>
-        <label for="${this.id}-yearnav" class="pkt-hide">${this.strings.dates.year}</label>
+        <label for="${this.id}-yearnav" class="pkt-hide">${dates.year}</label>
         <input
-          aria-label="${this.strings.dates.year}"
+          aria-label="${dates.year}"
           class="pkt-input pkt-cal-input-year pkt-input-compact"
           id="${this.id}-yearnav"
           type="number"
@@ -338,7 +362,7 @@ export class PktCalendar extends PktElement {
     }
 
     return html`<div class="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
-      ${this.monthStrings[this.month]} ${this.year}
+      ${this.calendarStrings.months[this.month]} ${this.year}
     </div>`
   }
 
@@ -393,10 +417,12 @@ export class PktCalendar extends PktElement {
 
   private getDayCellClasses(data: TDayViewData) {
     const { currentDateISO, isToday, isSelected } = data
-    const isRangeStart = this.range &&
+    const isRangeStart =
+      this.range &&
       (this.selected.length === 2 || this.rangeHovered !== null) &&
       currentDateISO === this.selected[0]
-    const isRangeEnd = this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
+    const isRangeEnd =
+      this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
 
     return {
       'pkt-cal-today': isToday,
@@ -412,10 +438,12 @@ export class PktCalendar extends PktElement {
 
   private getDayButtonClasses(data: TDayViewData) {
     const { currentDateISO, isToday, isSelected, isDisabled } = data
-    const isRangeStart = this.range &&
+    const isRangeStart =
+      this.range &&
       (this.selected.length === 2 || this.rangeHovered !== null) &&
       currentDateISO === this.selected[0]
-    const isRangeEnd = this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
+    const isRangeEnd =
+      this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
 
     return {
       'pkt-calendar__date': true,
@@ -489,7 +517,9 @@ export class PktCalendar extends PktElement {
   }
 
   private renderWeekRow(cells: TemplateResult[]): TemplateResult {
-    return html`<tr class="pkt-cal-week-row" role="row">${cells}</tr>`
+    return html`<tr class="pkt-cal-week-row" role="row">
+      ${cells}
+    </tr>`
   }
 
   private renderCalendarBody() {

package/src/components/checkbox/checkbox.test.ts

@@ -406,7 +406,6 @@ describe('PktCheckbox', () => {
       await checkbox.updateComplete
 
       expect(checkbox.optionalTag).toBe(true)
-      expect(checkbox.optionalText).toBe('Valgfritt')
 
       const optionalTag = checkbox.querySelector('.pkt-tag--blue-light')
       expect(optionalTag).toBeInTheDocument()
@@ -423,7 +422,6 @@ describe('PktCheckbox', () => {
       await checkbox.updateComplete
 
       expect(checkbox.requiredTag).toBe(true)
-      expect(checkbox.requiredText).toBe('Må fylles ut')
 
       const requiredTag = checkbox.querySelector('.pkt-tag--beige')
       expect(requiredTag).toBeInTheDocument()

package/src/components/checkbox/checkbox.ts

@@ -36,9 +36,11 @@ export class PktCheckbox extends PktInputElement<Props> {
   @property({ type: String, reflect: true }) type: string = 'checkbox'
   @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) optionalTag: boolean = false
-  @property({ type: String }) optionalText: string = 'Valgfritt'
+  /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) optionalText?: string
   @property({ type: Boolean }) requiredTag: boolean = false
-  @property({ type: String }) requiredText: string = 'Må fylles ut'
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) requiredText?: string
 
   connectedCallback() {
     super.connectedCallback()
@@ -108,16 +110,18 @@ export class PktCheckbox extends PktInputElement<Props> {
 
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
+    const formStrings = this.pktStrings.get('forms')
+
     const tags = () => {
       return html`
         ${this.tagText
           ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
           : nothing}
         ${this.optionalTag
-          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText ?? formStrings.optional}</span>`
           : nothing}
         ${this.requiredTag
-          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText ?? formStrings.required}</span>`
           : nothing}
       `
     }

package/src/components/combobox/combobox-base.ts

@@ -7,6 +7,7 @@ import specs from 'componentSpecs/combobox.json'
 
 import type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types'
 import PktListbox from '../listbox'
+import type { TComboboxMessageKey } from 'shared-utils/combobox'
 
 /**
  * Base class for PktCombobox.
@@ -42,7 +43,7 @@ export class ComboboxBase extends PktInputElement {
   @state() override _options: IPktComboboxOption[] = []
   @state() protected _value: string[] = []
   @state() protected _isOptionsOpen = false
-  @state() protected _userInfoMessage: string = ''
+  @state() protected _userInfoMessage: TComboboxMessageKey = ''
   @state() protected _addValueText: string | null = null
   @state() protected _maxIsReached: boolean = false
   @state() protected _search: string = ''