@oslokommune/punkt-react 18.1.0 → 18.3.0

package/dist/punkt-react.js

@@ -62,7 +62,7 @@ var M = /* @__PURE__ */ O((/* @__PURE__ */ E(((e, t) => {
 			return n;
 		}) : window.classNames = n;
 	})();
-})))(), 1), N = "https://punkt-cdn.oslo.kommune.no/18.1/icons/";
+})))(), 1), N = "https://punkt-cdn.oslo.kommune.no/18.3/icons/";
 typeof window < "u" && (window.pktFetch = window.pktFetch === void 0 ? fetch : window.pktFetch, window.pktIconPath = window.pktIconPath || N);
 var P = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>", ee = {}, te = 2, ne = 1500, F = typeof Storage < "u" && typeof sessionStorage < "u", re = typeof window < "u" ? d : c, ie = (e, t) => !e || !F ? "" : sessionStorage.getItem(t + e + ".svg") ?? "", ae = (e) => window.pktFetch(e).then((t) => {
 	if (!t.ok) throw Error("Missing icon: " + e);
@@ -526,7 +526,7 @@ var ge = {
 };
 //#endregion
 //#region src/components/button/Button.tsx
-typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/18.1/animations/");
+typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/18.3/animations/");
 var Y = i(({ children: e, className: t, iconName: n = "user", secondIconName: r = "user", iconPath: i, secondIconPath: a, size: o = "medium", fullWidth: s = !1, fullWidthOnMobile: c = !1, skin: l = "primary", type: u = "button", variant: d = "label-only", state: f, color: p, isLoading: m = void 0, disabled: h = void 0, loadingAnimationPath: g = window.pktAnimationPath, ...y }, b) => {
 	let x = [
 		t,
@@ -7074,7 +7074,7 @@ var co = i(({ appearance: e = "local", inputSize: t = "medium", disabled: n = !1
 co.displayName = "PktSearchInput";
 //#endregion
 //#region src/components/header/HeaderGlobal.tsx
-var lo = "https://punkt-cdn.oslo.kommune.no/18.1/logos/";
+var lo = "https://punkt-cdn.oslo.kommune.no/18.3/logos/";
 typeof window < "u" && (window.pktLogoPath = window.pktLogoPath || lo);
 var uo = "pkt-header-global-menu", fo = "pkt-header-global-menu-toggle", po = "pkt-header-global-search-panel", mo = "pkt-header-global-search-toggle", ho = i(({ className: e, "data-mode": t, dataUrl: n, data: r, locale: i = "nb-NO", logoLink: a = ga, logoClick: s, logoPath: l = typeof window < "u" ? window.pktLogoPath : lo, showSearch: u = !0, searchPlaceholder: h, onSearch: y, showContact: b = !0, user: x, userMenu: S, representing: C, canChangeRepresentation: w = !1, changeRepresentation: T, logOutButtonPlacement: E = "none", logOut: D, position: O = "fixed", scrollBehavior: k = "hide", mobileBreakpoint: A = 768, tabletBreakpoint: j = 1024, onDataLoaded: N, onDataError: P, strings: ee }, te) => {
 	let ne = k === "hide", [F, re] = m("none"), [ie, ae] = m(void 0), [oe, se] = m(!1), I = p(N), R = p(P);
@@ -7431,7 +7431,7 @@ var go = i(({ id: e, ariaDescribedby: t, ariaLabelledby: n, autocomplete: r = "o
 go.displayName = "PktTextinput";
 //#endregion
 //#region src/components/header/HeaderService.tsx
-var _o = "https://punkt-cdn.oslo.kommune.no/18.1/logos/";
+var _o = "https://punkt-cdn.oslo.kommune.no/18.3/logos/";
 typeof window < "u" && (window.pktLogoPath = window.pktLogoPath || _o);
 var vo = i(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n, className: r, compact: i = !1, "data-mode": a, logOutButtonPlacement: s = "none", logOut: l, openedMenu: u, showSearch: d = !1, onSearch: h, onSearchChange: y, searchValue: b, searchPlaceholder: x, representing: S, serviceLink: C, serviceClick: w, serviceName: T, user: E, userMenu: D, userMenuFooter: O, userOptions: k, canChangeRepresentation: A = !1, changeRepresentation: j, hideLogo: N = !1, logoLink: P = ga, logoClick: ee, logoPath: te = typeof window < "u" ? window.pktLogoPath : _o, position: ne = "fixed", scrollBehavior: F = "hide", slotMenuVariant: re = "icon-only", slotMenuText: ie = "Meny", strings: ae }, oe) => {
 	let se = F === "hide";
@@ -7778,7 +7778,7 @@ var wo = ({ children: e, skin: t, title: n, href: r, iconName: i, openInNewTab:
 };
 //#endregion
 //#region src/components/loader/Loader.tsx
-wo.displayName = "PktLinkCard", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/18.1/animations/");
+wo.displayName = "PktLinkCard", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/18.3/animations/");
 var To = (e) => {
 	switch (e) {
 		case "blue": return "spinner-blue";
@@ -7972,7 +7972,7 @@ var Ao = /* @__PURE__ */ _("svg", {
 		cx: "12",
 		cy: "12",
 		r: "7",
-		style: { fill: "var(--pkt-color-grays-grey-200, #CCC)" }
+		style: { fill: "var(--pkt-color-brand-neutrals-300, #CCC)" }
 	})
 }), jo = /* @__PURE__ */ v("svg", {
 	xmlns: "http://www.w3.org/2000/svg",

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-react",
-  "version": "18.1.0",
+  "version": "18.3.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -45,7 +45,7 @@
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
     "@oslokommune/punkt-assets": "^18.0.0",
-    "@oslokommune/punkt-css": "^18.0.0",
+    "@oslokommune/punkt-css": "^18.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -102,5 +102,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "087459aca13f8ff3a34afc42f8e1cd73900d4896"
+  "gitHead": "72a1389ecb1c277a463dfe5d2c020d96dd4c7ded"
 }

package/src/components/alert/Alert.tsx

@@ -10,7 +10,7 @@ import { PktIcon } from '../icon/Icon'
 import { usePktStrings } from '../../hooks/usePktStrings'
 
 export interface IPktAlert
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, IPktStringsProps {
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, IPktStringsProps<'alert' | 'generic'> {
   skin?: TAlertSkin
   closeAlert?: boolean
   title?: ReactNode

package/src/components/calendar/types.ts

@@ -1,6 +1,6 @@
 import type { IDateConstraints, TDateRangeMap } from 'shared-types/calendar'
 
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
 /** Datonavn og navigasjonstekster slik kalender-underkomponentene forventer dem. */
 export interface IPktCalendarStrings {
@@ -23,7 +23,7 @@ export interface PktCalendarHandle {
   close: () => void
 }
 
-export interface IPktCalendar {
+export interface IPktCalendar extends IPktStringsProps<'dates' | 'calendar'> {
   // Selection
   selected?: string[]
   multiple?: boolean
@@ -42,10 +42,6 @@ export interface IPktCalendar {
   currentmonth?: Date | string | null
   today?: string
 
-  // Localization
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
-
   // Callbacks
   onDateSelected?: (selected: string[]) => void
   onClose?: () => void

package/src/components/checkbox/Checkbox.tsx

@@ -9,9 +9,9 @@ import {
   useRef,
 } from 'react'
 import { usePktStrings } from '../../hooks/usePktStrings'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
-export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
+export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement>, IPktStringsProps<'forms'> {
   id: string
   hasTile?: boolean
   disabled?: boolean
@@ -31,8 +31,6 @@ export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   requiredTag?: boolean
   /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
   requiredText?: string
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
   tagText?: string | null
   onChange?: ChangeEventHandler<HTMLInputElement>
 }

package/src/components/combobox/types.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps, TPktStringsOverride } from 'shared-strings'
 
 import type {
   ChangeEvent,
@@ -14,7 +14,7 @@ import type {
 } from 'react'
 import type { IPktComboboxOption, TPktComboboxDisplayValue, TPktComboboxTagPlacement } from 'shared-types/combobox'
 
-export interface IPktCombobox {
+export interface IPktCombobox extends IPktStringsProps<'combobox' | 'listbox' | 'forms' | 'validation'> {
   // Values & options
   value?: string | string[]
   defaultValue?: string | string[]
@@ -54,8 +54,6 @@ export interface IPktCombobox {
   useWrapper?: boolean
   inline?: boolean
   counter?: boolean
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
   hasFieldset?: boolean
   inputSize?: 'small' | 'medium' | 'xsmall'
 
@@ -70,7 +68,7 @@ export interface IPktCombobox {
 
 export interface IComboboxState {
   /** Tekstoverstyring sendt inn på komponenten. */
-  strings?: TPktStringsOverride
+  strings?: TPktStringsOverride<'combobox' | 'listbox' | 'forms' | 'validation'>
   // Identity
   id: string
   inputId: string

package/src/components/datepicker/DateTags.tsx

@@ -3,16 +3,14 @@
 import { sortDateStrings, fromISOtoLocal } from 'shared-utils/date-utils'
 import { PktTag } from '../tag/Tag'
 import { usePktStrings } from '../../hooks/usePktStrings'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
-interface DateTagsProps {
+interface DateTagsProps extends IPktStringsProps<'datepicker'> {
   dates: string[]
   dateformat: string
   idBase: string
-  strings?: TPktStringsOverride
   onDateRemoved: (date: string) => void
 }
-
 export const DateTags = ({
   dates,
   dateformat,

package/src/components/datepicker/types.ts

@@ -1,8 +1,11 @@
-import type { TPktStrings, TPktStringsOverride } from 'shared-strings'
+import type { TPktStrings, IPktStringsProps, TPktStringsOverride } from 'shared-strings'
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react'
 import type { TPktInputSize } from 'shared-types/size'
 
-export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+export type TDatepickerStrings = 'generic' | 'datepicker' | 'validation' | 'forms' | 'dates' | 'calendar'
+
+export interface IPktDatepicker
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>, IPktStringsProps<TDatepickerStrings> {
   id: string
   label: string
   ariaDescribedby?: string
@@ -41,10 +44,6 @@ export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElemen
   tagText?: string
   useWrapper?: boolean
 
-  // Localization
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
-
   // Events
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   onValueChange?: (values: string[]) => void
@@ -106,7 +105,7 @@ export interface IDatepickerState {
   isIOSDevice: boolean
   strings: Pick<TPktStrings, 'generic' | 'datepicker' | 'validation'>
   /** Rå tekstoverstyring, til videresending til underkomponenter. */
-  stringsOverride?: TPktStringsOverride
+  stringsOverride?: TPktStringsOverride<TDatepickerStrings>
   inputClasses: string
   buttonClasses: string
   rangeLabelClasses: string

package/src/components/fileupload/DropZone.tsx

@@ -16,7 +16,7 @@ import {
 import { PktIcon } from '../icon/Icon'
 import { FileItem, TFileItemList, TUploadStrategy } from './types'
 import { usePktStrings } from '../../hooks/usePktStrings'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
 /**
  * Props for the internal `DropZone` building block.
@@ -27,9 +27,8 @@ import type { TPktStringsOverride } from 'shared-strings'
  * - optionally rendering hidden inputs with file IDs when `uploadStrategy="custom"`
  */
 interface IDropZoneProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width'> {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width'>,
+    IPktStringsProps<'fileupload'> {
   /** Called with `FileItem`s created from dropped/selected files. */
   onFilesAdded?: (files: TFileItemList) => void
   /** Used for the native input `id` and related label/ARIA wiring. */

package/src/components/header/types.ts

@@ -9,7 +9,7 @@ import type {
   THeaderMenuLocale,
   IPktHeaderGlobal as ISharedPktHeaderGlobal,
 } from 'shared-types'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
 export type {
   THeaderMenu,
@@ -53,10 +53,7 @@ export interface UserMenuFooterItem {
   target: string | (() => void)
 }
 
-export interface IPktHeader {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
-
+export interface IPktHeader extends IPktStringsProps<'header'> {
   children?: ReactNode
   /** Additional CSS class name(s) to apply to the header */
   className?: string
@@ -130,9 +127,7 @@ export interface IPktHeader {
  * Extends the framework-agnostic {@link ISharedPktHeaderGlobal} base
  * (in shared-types) with React-specific callbacks and DOM props.
  */
-export interface IPktHeaderGlobal extends ISharedPktHeaderGlobal {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
+export interface IPktHeaderGlobal extends ISharedPktHeaderGlobal, IPktStringsProps<'header'> {
   /** Additional CSS class name(s) to apply to the header */
   className?: string
   /** Set dark mode on the header */

package/src/components/inputwrapper/InputWrapper.tsx

@@ -4,12 +4,12 @@ import { ForwardedRef, forwardRef, type ReactNode, RefAttributes } from 'react'
 
 import { useFocusModality } from '../../hooks/useFocusModality'
 import { usePktStrings } from '../../hooks/usePktStrings'
-import { formatString, type TPktStringsOverride } from 'shared-strings'
+import { formatString, type IPktStringsProps } from 'shared-strings'
 import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
 import { PktAlert } from '../alert/Alert'
 import { PktHelptext } from '../helptext/Helptext'
 
-export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
+export interface IPktInputWrapper extends RefAttributes<HTMLElement>, IPktStringsProps<'forms' | 'validation'> {
   forId: string
   label: string
   helptext?: string | ReactNode
@@ -38,8 +38,6 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   role?: string
   counterPosition?: 'top' | 'bottom'
   size?: 'small' | 'medium' | 'xsmall'
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
 }
 
 export const PktInputWrapper = forwardRef(

package/src/components/radio/RadioButton.tsx

@@ -7,9 +7,9 @@ import {
   ReactNode,
 } from 'react'
 import { usePktStrings } from '../../hooks/usePktStrings'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
-export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
+export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement>, IPktStringsProps<'forms'> {
   id: string
   name: string
   label: string
@@ -26,8 +26,6 @@ export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   requiredTag?: boolean
   /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
   requiredText?: string
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
   tagText?: string | null
   onChange?: ChangeEventHandler<HTMLInputElement>
 }

package/src/components/searchinput/SearchInput.tsx

@@ -7,7 +7,7 @@ import type { IPktSearchInputSuggestion } from 'shared-types/searchinput'
 import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktButton } from '../button/Button'
 import { usePktStrings } from '../../hooks/usePktStrings'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
 /**
  * React suggestion item: portable fields from {@link IPktSearchInputSuggestion}
@@ -19,10 +19,7 @@ export type PktSearchInputSuggestion = Omit<IPktSearchInputSuggestion, 'title' |
   onClick?: () => void
 }
 
-interface ISearch extends HTMLProps<HTMLInputElement> {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
-
+interface ISearch extends HTMLProps<HTMLInputElement>, IPktStringsProps<'searchinput'> {
   appearance?: 'local' | 'local-with-button' | 'global'
   inputSize?: 'small' | 'medium' | 'xsmall'
   disabled?: boolean

package/src/components/select/Select.tsx

@@ -4,13 +4,12 @@ import { ForwardedRef, forwardRef, ReactNode, SelectHTMLAttributes } from 'react
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { describedByIds } from 'shared-utils/forms/described-by'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
 export type { IPktSelectOption, TSelectOption } from 'shared-types/select'
 
-export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
+export interface IPktSelectProps
+  extends SelectHTMLAttributes<HTMLSelectElement>, IPktStringsProps<'forms' | 'validation'> {
   ariaDescribedby?: string
   ariaLabelledby?: string
   children?: ReactNode | ReactNode[]

package/src/components/stepper/Step.tsx

@@ -26,7 +26,7 @@ export interface IPktStep {
 
 const incompleteStepSVG = (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-    <circle cx="12" cy="12" r="7" style={{ fill: 'var(--pkt-color-grays-grey-200, #CCC)' }} />
+    <circle cx="12" cy="12" r="7" style={{ fill: 'var(--pkt-color-brand-neutrals-300, #CCC)' }} />
   </svg>
 )
 

package/src/components/tag/Tag.tsx

@@ -18,12 +18,9 @@ import type { TTagSkin } from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
 import { usePktStrings } from '../../hooks/usePktStrings'
-import { formatString, type TPktStringsOverride } from 'shared-strings'
-
-interface BasePktTagProps {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
+import { formatString, type IPktStringsProps } from 'shared-strings'
 
+interface BasePktTagProps extends IPktStringsProps<'tag'> {
   skin?: TTagSkin
   textStyle?: 'normal-text' | 'thin-text'
   size?: 'small' | 'medium' | 'large'

package/src/components/textarea/Textarea.tsx

@@ -14,11 +14,10 @@ import {
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { TPktInputSize } from 'shared-types/size'
 import { describedByIds } from 'shared-utils/forms/described-by'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
-export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
+export interface IPktTextarea
+  extends TextareaHTMLAttributes<HTMLTextAreaElement>, IPktStringsProps<'forms' | 'validation'> {
   id: string
   ariaDescribedby?: string
   ariaLabelledby?: string

package/src/components/textinput/Textinput.tsx

@@ -14,11 +14,10 @@ import {
 import { PktIcon } from '../icon/Icon'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { describedByIds } from 'shared-utils/forms/described-by'
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 
-export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
+export interface IPktTextinput
+  extends InputHTMLAttributes<HTMLInputElement>, IPktStringsProps<'forms' | 'validation'> {
   id: string
   ariaDescribedby?: string
   ariaLabelledby?: string

package/src/components/timepicker/types.ts

@@ -1,4 +1,4 @@
-import type { TPktStringsOverride } from 'shared-strings'
+import type { IPktStringsProps } from 'shared-strings'
 import type { ChangeEvent, FocusEvent, InputHTMLAttributes, ReactNode } from 'react'
 import { TPktInputSize } from 'shared-types/size'
 
@@ -11,7 +11,7 @@ import { TPktInputSize } from 'shared-types/size'
 export interface IPktTimepicker extends Omit<
   InputHTMLAttributes<HTMLInputElement>,
   'value' | 'onChange' | 'onInput' | 'min' | 'max' | 'step' | 'onFocus' | 'onBlur'
-> {
+>, IPktStringsProps<'timepicker' | 'forms' | 'validation'> {
   /** Unique id; used for hour, minute, popup, and hidden input ids. */
   id: string
 
@@ -94,10 +94,6 @@ export interface IPktTimepicker extends Omit<
   /** Passed through to InputWrapper as `aria-describedby`. */
   ariaDescribedby?: string
 
-  /** Copy for hours, minutes, buttons, and popup. */
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
-
   /** Change event from the hidden input (`e.target.value` is `HH:MM`). In React, `onChange` already fires on input. */
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void