@oslokommune/punkt-elements 18.1.0 → 18.2.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [18.2.0](https://github.com/oslokommune/punkt/compare/18.1.0...18.2.0) (2026-09-01)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [18.1.0](https://github.com/oslokommune/punkt/compare/18.0.0...18.1.0) (2026-08-31)
 
 ### ⚠ BREAKING CHANGES

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

@@ -3,6 +3,11 @@ import { ElementProps } from '../types/typeUtils';
 import { PktStringsController } from '../controllers/strings-controller';
 import { TPktStringsOverride } from '../shared-strings';
 type Props = ElementProps<PktElement, 'strings' | 'role'>;
+/**
+ * `strings` on `$props` comes from `T` when the component includes `IPktStringsProps<NS>`.
+ * Unmigrated components keep the full catalogue from the base class.
+ */
+type PropsFor<T> = T & Omit<Props, 'strings'> & ('strings' extends keyof T ? unknown : Pick<Props, 'strings'>);
 /**
  * Base class for Punkt shadow DOM elements
  * @extends LitElement
@@ -24,7 +29,7 @@ export declare class PktShadowElement<T = {}> extends LitElement {
     /**
      * Here to support prop typing in Vue
      */
-    $props: T & Props;
+    $props: PropsFor<T>;
     /**
      * Add support for Hot Module Reloading in dev mode
      */

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

@@ -2,6 +2,7 @@ import { PropertyValues } from 'lit';
 import { Booleanish } from '../shared-types';
 import { ElementProps } from '../types/typeUtils';
 import { PktOptionsSlotController } from '../controllers/pkt-options-controller';
+import { IPktStringsProps } from '../shared-strings';
 import { PktElementWithSlot } from './element-with-slot';
 /**
  * Base interface for input options used in select, combobox, etc.
@@ -13,7 +14,7 @@ export interface PktInputOption {
     disabled?: boolean;
     hidden?: boolean;
 }
-type Props = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedby' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'hasFieldset' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'tagText' | 'inputSize' | 'dataTestid'>;
+type Props = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedby' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'hasFieldset' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'tagText' | 'inputSize' | 'dataTestid'> & IPktStringsProps<'forms' | 'validation'>;
 /**
  * Base class for all Punkt input elements
  * @extends PktElementWithSlot

package/dist/components/alert/alert.d.ts

@@ -1,8 +1,9 @@
 import { PropertyValues } from 'lit';
 import { PktElementWithSlot } from '../../base-elements/element-with-slot';
 import { TAriaLive, TAlertSkin, TAlertSize } from '../../shared-types';
+import { IPktStringsProps } from '../../shared-strings';
 export type { TAlertSkin };
-export interface IPktAlert {
+export interface IPktAlert extends IPktStringsProps<'alert' | 'generic'> {
     skin?: TAlertSkin;
     closeAlert?: boolean;
     title?: string;
@@ -15,7 +16,7 @@ export interface IPktAlert {
     role?: string;
     size?: TAlertSize;
 }
-export declare class PktAlert extends PktElementWithSlot implements IPktAlert {
+export declare class PktAlert extends PktElementWithSlot<IPktAlert> implements IPktAlert {
     constructor();
     compact: boolean;
     title: string;

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -6,7 +6,7 @@ export type { IBreadcrumb };
 export type IBreadcrumbItem = IBreadcrumb;
 export interface IPktBreadcrumbs extends IPktBreadcrumbsBase {
 }
-export declare class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
+export declare class PktBreadcrumbs extends PktElement<IPktBreadcrumbs> implements IPktBreadcrumbs {
     breadcrumbs: IBreadcrumb[];
     private handleLinkClick;
     render(): typeof nothing | import('lit-html').TemplateResult<1>;

package/dist/components/calendar/calendar.d.ts

@@ -1,6 +1,7 @@
 import { PropertyValues, TemplateResult } from 'lit';
 import { PktElement } from '../../base-elements/element';
-export declare class PktCalendar extends PktElement {
+import { IPktStringsProps } from '../../shared-strings';
+export declare class PktCalendar extends PktElement<IPktStringsProps<'dates' | 'calendar'>> {
     selected: string | string[];
     multiple: boolean;
     maxMultiple: number;

package/dist/components/combobox/combobox-base.d.ts

@@ -1,13 +1,14 @@
 import { Ref } from 'lit/directives/ref.js';
 import { PktInputElement } from '../../base-elements/input-element';
 import { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types';
+import { IPktStringsProps } from '../../shared-strings';
 import { default as PktListbox } from '../listbox';
 import { TComboboxMessageKey } from '../../shared-utils/combobox';
 /**
  * Base class for PktCombobox.
  * Declares all reactive properties, state, refs, and simple helpers.
  */
-export declare class ComboboxBase extends PktInputElement {
+export declare class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' | 'listbox'>> {
     constructor();
     value: string | string[];
     options: IPktComboboxOption[];

package/dist/components/combobox/combobox.d.ts

@@ -1,8 +1,9 @@
 import { PropertyValues } from 'lit';
 import { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types';
 import { ComboboxHandlers } from './combobox-handlers';
+import { IPktStringsProps } from '../../shared-strings';
 export type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types';
-export interface IPktCombobox {
+export interface IPktCombobox extends IPktStringsProps<'combobox' | 'listbox'> {
     allowUserInput?: boolean;
     typeahead?: boolean;
     disabled?: boolean;

package/dist/components/datepicker/date-tags.d.ts

@@ -1,4 +1,5 @@
 import { PktElement } from '../../base-elements/element';
+import { IPktStringsProps } from '../../shared-strings';
 type TYear = `${number}${number}${number}${number}`;
 type TMonth = `${number}${number}`;
 type TDay = `${number}${number}`;
@@ -10,7 +11,7 @@ export type TISODate = `${TYear}-${TMonth}-${TDay}`;
  * Følger denne unicode-standarden:
  * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
  */
-export declare class PktDateTags extends PktElement {
+export declare class PktDateTags extends PktElement<IPktStringsProps<'datepicker'>> {
     dates: TISODate[];
     dateformat: string;
     className: string;

package/dist/components/datepicker/datepicker.d.ts

@@ -7,7 +7,8 @@ import { PktDatepickerSingle } from './datepicker-single';
 import { PktDatepickerRange } from './datepicker-range';
 import { PktDatepickerMultiple } from './datepicker-multiple';
 import { ElementProps } from '../../types/typeUtils';
-type Props = ElementProps<PktDatepicker, 'label' | 'dateformat' | 'multiple' | 'maxlength' | 'range' | 'showRangeLabels' | 'min' | 'max' | 'weeknumbers' | 'withcontrols' | 'excludedates' | 'excludeweekdays' | 'currentmonth' | 'calendarOpen' | 'timezone'>;
+import { IPktStringsProps } from '../../shared-strings';
+type Props = ElementProps<PktDatepicker, 'label' | 'dateformat' | 'multiple' | 'maxlength' | 'range' | 'showRangeLabels' | 'min' | 'max' | 'weeknumbers' | 'withcontrols' | 'excludedates' | 'excludeweekdays' | 'currentmonth' | 'calendarOpen' | 'timezone'> & IPktStringsProps<'generic' | 'datepicker' | 'dates' | 'calendar'>;
 export declare class PktDatepicker extends PktInputElement<Props> {
     /**
      * Element attributes and properties

package/dist/components/header/types.d.ts

@@ -1,5 +1,6 @@
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
 import { booleanishConverter, Booleanish, User as SharedUser, Representing as SharedRepresenting, UserMenuItem as SharedUserMenuItem, TInternalMenuItem as SharedTInternalMenuItem, TSlotMenuVariant, THeaderMenu, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, THeaderFooterApi, THeaderMenuLocale, IPktHeaderGlobal as ISharedPktHeaderGlobal } from '../../shared-types';
+import { IPktStringsProps } from '../../shared-strings';
 export type { Booleanish, TSlotMenuVariant, THeaderMenu, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, THeaderFooterApi, THeaderMenuLocale, };
 /** Which header variant `<pkt-header>` renders. */
 export type THeaderType = 'service' | 'global';
@@ -17,7 +18,7 @@ export declare const convertUserMenuItem: (item: UserMenuItem) => TInternalMenuI
 /**
  * Interface for the Header component props
  */
-export interface IPktHeader {
+export interface IPktHeader extends IPktStringsProps<'header'> {
     /** Hide the Oslo logo */
     hideLogo?: Booleanish;
     /** Logo link URL */
@@ -73,7 +74,7 @@ export interface IPktHeader {
  * `userMenu` icons as `PktIconName`, and adding the Lit-only `hasLogOut`
  * signal.
  */
-export interface IPktHeaderGlobal extends Omit<ISharedPktHeaderGlobal, 'showSearch' | 'showContact' | 'canChangeRepresentation' | 'userMenu'> {
+export interface IPktHeaderGlobal extends Omit<ISharedPktHeaderGlobal, 'showSearch' | 'showContact' | 'canChangeRepresentation' | 'userMenu'>, IPktStringsProps<'header'> {
     /** Show the search field. Default: true */
     showSearch?: Booleanish;
     /** Show the contact link (from the payload's `header.contact`). Default: true */

package/dist/components/helptext/helptext.d.ts

@@ -1,5 +1,6 @@
 import { PktElementWithSlot } from '../../base-elements/element-with-slot';
-export declare class PktHelptext extends PktElementWithSlot {
+import { IPktStringsProps } from '../../shared-strings';
+export declare class PktHelptext extends PktElementWithSlot<IPktStringsProps<'forms'>> {
     forId: string;
     helptext: string;
     helptextDropdown: string;

package/dist/components/input-wrapper/input-wrapper.d.ts

@@ -1,11 +1,12 @@
 import { PktElementWithSlot } from '../../base-elements/element-with-slot';
+import { IPktStringsProps } from '../../shared-strings';
 import { PropertyValues } from 'lit';
 import { ElementProps } from '../../types/typeUtils';
 import { Booleanish } from '../../shared-types';
 import { FocusModalityController } from '../../controllers/focus-modality-controller';
 type TCounterPosition = 'top' | 'bottom';
 type TInputWrapperSize = 'small' | 'medium' | 'xsmall';
-type Props = ElementProps<PktInputWrapper, 'forId' | 'label' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'counter' | 'counterCurrent' | 'counterMaxLength' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText' | 'tagText' | 'hasError' | 'errorMessage' | 'disabled' | 'inline' | 'ariaDescribedby' | 'hasFieldset' | 'useWrapper' | 'role'>;
+type Props = ElementProps<PktInputWrapper, 'forId' | 'label' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'counter' | 'counterCurrent' | 'counterMaxLength' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText' | 'tagText' | 'hasError' | 'errorMessage' | 'disabled' | 'inline' | 'ariaDescribedby' | 'hasFieldset' | 'useWrapper' | 'role'> & IPktStringsProps<'forms' | 'validation'>;
 export declare class PktInputWrapper extends PktElementWithSlot<Props> {
     /**
      * Element attributes

package/dist/components/listbox/listbox.d.ts

@@ -1,12 +1,13 @@
 import { PropertyValues } from 'lit';
 import { PktElement } from '../../base-elements/element';
 import { IPktComboboxOption } from '../../shared-types/combobox';
+import { IPktStringsProps } from '../../shared-strings';
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-listbox': PktListbox;
     }
 }
-export interface IPktListbox {
+export interface IPktListbox extends IPktStringsProps<'listbox'> {
     options: IPktComboboxOption[];
     isOpen: boolean;
     disabled: boolean;
@@ -20,7 +21,7 @@ export interface IPktListbox {
     maxLength: number;
     userMessage: string | null;
 }
-export declare class PktListbox extends PktElement implements IPktListbox {
+export declare class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
     id: string;
     label: string | null;
     options: IPktComboboxOption[];

package/dist/components/tag/tag.d.ts

@@ -3,9 +3,10 @@ import { PktElementWithSlot } from '../../base-elements/element-with-slot';
 import { TPktSize } from '../../types/size';
 import { IAriaAttributes, THTMLButtonType } from '../../shared-types';
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
+import { IPktStringsProps } from '../../shared-strings';
 export type TTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey';
 export type TTagType = THTMLButtonType;
-export interface IPktTag {
+export interface IPktTag extends IPktStringsProps<'tag'> {
     closeTag?: boolean;
     size?: TPktSize;
     skin?: TTagSkin;

package/dist/components/timepicker/timepicker.d.ts

@@ -2,8 +2,9 @@ import { PropertyValues } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
 import { PktInputElement } from '../../base-elements/input-element';
 import { ElementProps } from '../../types/typeUtils';
+import { IPktStringsProps } from '../../shared-strings';
 import { TPktInputSize } from '../../shared-types/size';
-type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'>;
+type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'> & IPktStringsProps<'timepicker'>;
 export interface IPktTimepicker {
     value?: string;
     min?: string;

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

@@ -28,11 +28,17 @@ export type TPktStringsOverride<NS extends TPktStringsNamespace = TPktStringsNam
 /** Verdier som kan settes inn i en `{plassholder}`. */
 export type TPktStringParams = Record<string, string | number>;
 /**
- * `strings`-propen som alle Punkt-komponenter som viser katalogtekst skal ha.
- * Elements har den på `PktShadowElement`; React-interfaces extender denne slicen.
+ * `strings`-propen for komponenter som viser katalogtekst.
+ * Send namespace-unionen komponenten faktisk leser, ellers tillates hele katalogen:
  *
- * TODO: Consider adding a type parameter for the namespace, so that the strings object can be narrowed to the namespace.
- * f.eks. ÌPktFileUploadProps<'fileupload'|'forms'> for å kunne sette tekster for felt i skjema og valideringsmeldinger.
+ * ```ts
+ * export type IPktFileUploadBase = IFormFieldCommonProps<'forms' | 'fileupload'> & {
+ *   name: string
+ * }
+ * ```
+ *
+ * React-interfaces extender slicen. Elements har `strings` på `PktShadowElement`
+ * (hele katalogen i runtime); `$props` smalnes via komponentens `T`.
  */
 export type IPktStringsProps<NS extends TPktStringsNamespace = TPktStringsNamespace> = {
     /** Overstyrer tekster for denne komponenten. */

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

@@ -7,7 +7,7 @@
 import type { IPktStringsProps } from '../shared-strings';
 import type { TRenderLink } from './render-link';
 /** Shared backlink props for React, Elements, and typed specs. */
-export type IPktBackLinkBase = IPktStringsProps & {
+export type IPktBackLinkBase = IPktStringsProps<'backlink'> & {
     href?: string;
     text?: string;
     /** @deprecated Bruk `strings={{ backlink: { label: '…' } }}` eller `setPktStrings()`. */

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

@@ -19,7 +19,7 @@ export type IBreadcrumbItem = IBreadcrumb;
 /** @deprecated Use `IBreadcrumb` — former React export name (singular type, plural alias). */
 export type IBreadcrumbs = IBreadcrumb;
 /** Shared breadcrumbs props for React, Elements, and typed specs. */
-export type IPktBreadcrumbsBase = IPktStringsProps & {
+export type IPktBreadcrumbsBase = IPktStringsProps<'breadcrumbs'> & {
     breadcrumbs: IBreadcrumb[];
 };
 /** Documented props for typed component specs. */

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

@@ -58,7 +58,7 @@ export interface IFilesChangedDetail {
  * @remarks React widens `helptext`, `helptextDropdown`, `itemRenderer`, and `extraOperations`
  * in `FileUpload.tsx`. Elements adds `id`, `accept`, and uses events instead of some callbacks.
  */
-export interface IPktFileUploadBase extends IFormFieldCommonProps {
+export interface IPktFileUploadBase extends IFormFieldCommonProps<'forms' | 'fileupload'> {
     /** Field name. Used for native input (`form`) or hidden ID inputs (`custom`). */
     name: string;
     required?: boolean;

package/dist/shared-types/form-field.d.ts

@@ -5,10 +5,10 @@
  * Compose slices into `IFormFieldCommonProps`, then extend with component-specific props.
  *
  * @example
- * IPktInputWrapperBase = IFormFieldCommonProps & { forId, counter, … }
- * IPktFileUploadBase = IFormFieldCommonProps & { name, uploadStrategy, … }
+ * IPktInputWrapperBase = IFormFieldCommonProps<'forms' | 'validation'> & { forId, counter, … }
+ * IPktFileUploadBase = IFormFieldCommonProps<'forms' | 'fileupload'> & { name, uploadStrategy, … }
  */
-import type { IPktStringsProps } from '../shared-strings';
+import type { IPktStringsProps, TPktStringsNamespace } from '../shared-strings';
 /** Expandable helptext props used by pkt-input-wrapper and several form controls. */
 export type IHelptextProps = {
     helptext?: string;
@@ -38,8 +38,9 @@ export type IFormFieldErrorProps = {
 };
 /**
  * Shared form-field props — helptext, tags, label, error state, and `strings`.
- * Input-wrapper adds wrapper-only props (forId, counter, inline, …) on top of this.
+ * `NS` defaults to `'forms'` (optional/required/read more). Pass extra namespaces
+ * when the component also reads other catalogue slices (e.g. FileUpload).
  */
-export type IFormFieldCommonProps = IHelptextProps & ITagOptionalRequiredProps & IFormFieldLabelProps & IFormFieldErrorProps & IPktStringsProps;
+export type IFormFieldCommonProps<NS extends TPktStringsNamespace = 'forms'> = IHelptextProps & ITagOptionalRequiredProps & IFormFieldLabelProps & IFormFieldErrorProps & IPktStringsProps<NS>;
 /** Keys from `IFormFieldCommonProps` — reuse in `I*SpecProps` Pick unions across form components. */
-export type TFormFieldCommonSpecKeys = keyof IFormFieldCommonProps;
+export type TFormFieldCommonSpecKeys = keyof IFormFieldCommonProps<'forms'>;

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 { IPktStringsProps } from '../shared-strings';
 import type { TPktInputSize } from './size';
 export type TPktSearchInputAppearance = 'local' | 'local-with-button' | 'global';
 export type TPktSearchInputMethod = 'get' | 'post' | 'dialog';
@@ -27,7 +28,7 @@ export interface IPktSearchInputSuggestion {
  * Public props for the web component (Elements). React mirrors these and adds
  * callback props in its wrapper.
  */
-export interface IPktSearchInput {
+export interface IPktSearchInput extends IPktStringsProps<'searchinput'> {
     appearance?: TPktSearchInputAppearance;
     inputSize?: TPktInputSize;
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -83,5 +83,5 @@
   "engines": {
     "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
   },
-  "gitHead": "087459aca13f8ff3a34afc42f8e1cd73900d4896"
+  "gitHead": "3e850f524f546977081c875a222256fb2e63eb5a"
 }

package/src/components/alert/alert.ts

@@ -5,7 +5,7 @@ import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
 import type { TAriaLive, TAlertSkin, TAlertSize } from 'shared-types'
 import { updateClassAttribute } from '@/utils/classutils'
-import { formatString } from 'shared-strings'
+import { formatString, type IPktStringsProps } from 'shared-strings'
 import specs from 'componentSpecs/alert.spec'
 
 import '@/components/icon'
@@ -13,7 +13,7 @@ import '@/components/button'
 
 export type { TAlertSkin }
 
-export interface IPktAlert {
+export interface IPktAlert extends IPktStringsProps<'alert' | 'generic'> {
   skin?: TAlertSkin
   closeAlert?: boolean
   title?: string
@@ -26,7 +26,7 @@ export interface IPktAlert {
   role?: string
   size?: TAlertSize
 }
-export class PktAlert extends PktElementWithSlot implements IPktAlert {
+export class PktAlert extends PktElementWithSlot<IPktAlert> implements IPktAlert {
   constructor() {
     super()
     this._isClosed = false

package/src/components/breadcrumbs/breadcrumbs.ts

@@ -12,7 +12,7 @@ export type IBreadcrumbItem = IBreadcrumb
 
 export interface IPktBreadcrumbs extends IPktBreadcrumbsBase {}
 
-export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
+export class PktBreadcrumbs extends PktElement<IPktBreadcrumbs> implements IPktBreadcrumbs {
   @property({ type: Array }) breadcrumbs: IBreadcrumb[] = []
 
   private handleLinkClick(event: MouseEvent, item: IBreadcrumb, index: number) {

package/src/components/calendar/calendar.ts

@@ -11,6 +11,7 @@ import {
 } from 'shared-utils/date-utils'
 import { html, nothing, PropertyValues, TemplateResult } from 'lit'
 import { PktElement } from '@/base-elements/element'
+import type { IPktStringsProps } from 'shared-strings'
 import converters from '../../helpers/converters'
 import specs from 'componentSpecs/calendar.json'
 import '@/components/icon'
@@ -54,7 +55,7 @@ type TDayViewData = {
   tabindex: string
 }
 
-export class PktCalendar extends PktElement {
+export class PktCalendar extends PktElement<IPktStringsProps<'dates' | 'calendar'>> {
   // Selection properties
   @property({ converter: converters.csvToArray })
   selected: string | string[] = []

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

@@ -6,6 +6,7 @@ import { isMaxSelectionReached } from 'shared-utils/combobox/option-utils'
 import specs from 'componentSpecs/combobox.json'
 
 import type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types'
+import type { IPktStringsProps } from 'shared-strings'
 import PktListbox from '../listbox'
 import type { TComboboxMessageKey } from 'shared-utils/combobox'
 
@@ -13,7 +14,7 @@ import type { TComboboxMessageKey } from 'shared-utils/combobox'
  * Base class for PktCombobox.
  * Declares all reactive properties, state, refs, and simple helpers.
  */
-export class ComboboxBase extends PktInputElement {
+export class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' | 'listbox'>> {
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)

package/src/components/combobox/combobox.ts

@@ -15,6 +15,7 @@ import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
 import { slotUtils, optionStateUtils } from './combobox-utils'
 import { slotContent } from '@/directives/slot-content'
 import { ComboboxHandlers } from './combobox-handlers'
+import type { IPktStringsProps } from 'shared-strings'
 
 import '../input-wrapper'
 import '../icon'
@@ -24,7 +25,7 @@ import '../listbox'
 // Re-export types for backward compatibility
 export type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types'
 
-export interface IPktCombobox {
+export interface IPktCombobox extends IPktStringsProps<'combobox' | 'listbox'> {
   allowUserInput?: boolean
   typeahead?: boolean
   disabled?: boolean

package/src/components/datepicker/date-tags.ts

@@ -8,6 +8,7 @@ import '@/components/tag'
 import { fromISOtoLocal } from 'shared-utils/date-utils'
 import { uuidish } from 'shared-utils/utils'
 import { sortDateStrings } from 'shared-utils/date-utils'
+import type { IPktStringsProps } from 'shared-strings'
 
 type TYear = `${number}${number}${number}${number}`
 type TMonth = `${number}${number}`
@@ -22,7 +23,7 @@ export type TISODate = `${TYear}-${TMonth}-${TDay}`
  * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
  */
 
-export class PktDateTags extends PktElement {
+export class PktDateTags extends PktElement<IPktStringsProps<'datepicker'>> {
   @property({ type: Array }) dates: TISODate[] = []
   @property({ type: String }) dateformat: string = 'dd.MM.yyyy' // se kommentar over
   @property({ type: String, attribute: 'class' }) className: string = 'pkt-datepicker__tags'

package/src/components/datepicker/datepicker.ts

@@ -31,6 +31,7 @@ import { PktDatepickerSingle } from './datepicker-single'
 import { PktDatepickerRange } from './datepicker-range'
 import { PktDatepickerMultiple } from './datepicker-multiple'
 import { ElementProps } from '@/types/typeUtils'
+import type { IPktStringsProps } from 'shared-strings'
 
 type Props = ElementProps<
   PktDatepicker,
@@ -49,7 +50,8 @@ type Props = ElementProps<
   | 'currentmonth'
   | 'calendarOpen'
   | 'timezone'
->
+> &
+  IPktStringsProps<'generic' | 'datepicker' | 'dates' | 'calendar'>
 
 export class PktDatepicker extends PktInputElement<Props> {
   /**

package/src/components/header/types.ts

@@ -16,6 +16,7 @@ import type {
   THeaderMenuLocale,
   IPktHeaderGlobal as ISharedPktHeaderGlobal,
 } from 'shared-types'
+import type { IPktStringsProps } from 'shared-strings'
 
 export type {
   Booleanish,
@@ -51,7 +52,7 @@ export const convertUserMenuItem = (item: UserMenuItem): TInternalMenuItem => {
 /**
  * Interface for the Header component props
  */
-export interface IPktHeader {
+export interface IPktHeader extends IPktStringsProps<'header'> {
   /** Hide the Oslo logo */
   hideLogo?: Booleanish
   /** Logo link URL */
@@ -110,9 +111,10 @@ export interface IPktHeader {
  */
 export interface IPktHeaderGlobal
   extends Omit<
-    ISharedPktHeaderGlobal,
-    'showSearch' | 'showContact' | 'canChangeRepresentation' | 'userMenu'
-  > {
+      ISharedPktHeaderGlobal,
+      'showSearch' | 'showContact' | 'canChangeRepresentation' | 'userMenu'
+    >,
+    IPktStringsProps<'header'> {
   /** Show the search field. Default: true */
   showSearch?: Booleanish
   /** Show the contact link (from the payload's `header.contact`). Default: true */

package/src/components/helptext/helptext.ts

@@ -4,10 +4,11 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { uuidish } from 'shared-utils/utils'
+import type { IPktStringsProps } from 'shared-strings'
 import '@/components/icon'
 import { slotContent } from '@/directives/slot-content'
 
-export class PktHelptext extends PktElementWithSlot {
+export class PktHelptext extends PktElementWithSlot<IPktStringsProps<'forms'>> {
   @property({ type: String, reflect: true })
   forId: string = uuidish()
 

package/src/components/input-wrapper/input-wrapper.ts

@@ -1,7 +1,7 @@
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
 import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
-import { formatString } from 'shared-strings'
+import { formatString, type IPktStringsProps } from 'shared-strings'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
@@ -40,7 +40,8 @@ type Props = ElementProps<
   | 'hasFieldset'
   | 'useWrapper'
   | 'role'
->
+> &
+  IPktStringsProps<'forms' | 'validation'>
 
 export class PktInputWrapper extends PktElementWithSlot<Props> {
   /**

package/src/components/listbox/listbox.ts

@@ -5,6 +5,7 @@ import { PktElement } from '@/base-elements/element'
 import { repeat } from 'lit/directives/repeat.js'
 import { classMap } from 'lit/directives/class-map.js'
 import type { IPktComboboxOption } from 'shared-types/combobox'
+import type { IPktStringsProps } from 'shared-strings'
 import { uuidish } from 'shared-utils/utils'
 import { filterOptionsBySearch } from 'shared-utils/combobox/option-utils'
 import {
@@ -28,7 +29,7 @@ declare global {
   }
 }
 
-export interface IPktListbox {
+export interface IPktListbox extends IPktStringsProps<'listbox'> {
   options: IPktComboboxOption[]
   isOpen: boolean
   disabled: boolean
@@ -43,7 +44,7 @@ export interface IPktListbox {
   userMessage: string | null
 }
 
-export class PktListbox extends PktElement implements IPktListbox {
+export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
   @property({ type: String }) id: string = uuidish()
   @property({ type: String }) label: string | null = null
   @property({ type: Array }) options: IPktComboboxOption[] = []

package/src/components/tag/tag.ts

@@ -10,7 +10,7 @@ import '@/components/icon'
 import type { IAriaAttributes, THTMLButtonType } from 'shared-types'
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { formatString } from 'shared-strings'
+import { formatString, type IPktStringsProps } from 'shared-strings'
 
 export type TTagSkin =
   | 'blue'
@@ -24,7 +24,7 @@ export type TTagSkin =
   | 'grey'
 export type TTagType = THTMLButtonType
 
-export interface IPktTag {
+export interface IPktTag extends IPktStringsProps<'tag'> {
   closeTag?: boolean
   size?: TPktSize
   skin?: TTagSkin

package/src/components/timepicker/timepicker.ts

@@ -6,7 +6,7 @@ import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
 import { slotContent } from '@/directives/slot-content'
 import { ElementProps } from '@/types/typeUtils'
-import { formatString } from 'shared-strings'
+import { formatString, type IPktStringsProps } from 'shared-strings'
 import { isValidTimeString, timeToMinutes } from 'shared-utils/timepicker/time-utils'
 import { getMinuteStep, getHourOptions, getMinuteOptions } from 'shared-utils/timepicker/options'
 import { stepTime } from 'shared-utils/timepicker/stepper'
@@ -14,7 +14,8 @@ import '@/components/icon'
 import '@/components/input-wrapper'
 import { TPktInputSize } from 'shared-types/size'
 
-type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'>
+type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'> &
+  IPktStringsProps<'timepicker'>
 
 export interface IPktTimepicker {
   value?: string