@oslokommune/punkt-react 17.1.3 → 18.1.0

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

@@ -1,17 +1,26 @@
 export type { Booleanish } from './booleanish';
 export { booleanishConverter, nullableBooleanishConverter } from './booleanish';
-export type { TAriaBoolean, TAriaBooleanMixed, TAriaCurrent, TAriaHasPopup, TAriaInvalid, TAriaLive, TAriaRelevant, TAriaSort, TAriaAutoComplete, TAriaOrientation, IAriaAttributes, TAlertRole, } from './aria';
+export { ARIA_LIVE_VALUES, type TAriaBoolean, type TAriaBooleanMixed, type TAriaCurrent, type TAriaHasPopup, type TAriaInvalid, type TAriaLive, type TAriaRelevant, type TAriaSort, type TAriaAutoComplete, type TAriaOrientation, type IAriaAttributes, type TAlertRole, } from './aria';
+export { ALERT_SKINS, ALERT_SIZES, type TAlertSkin, type TAlertSize, type IAlertSpecProps, } from './alert';
 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 { HEADER_MENU_LOCALES, DEFAULT_HEADER_FOOTER_URL, DEFAULT_HEADER_LOGO_LINK, } from './header-footer';
 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 type { IPktFooterLink, IPktFooterColumn, IPktFooterSocialLink, IPktFooterBase, IPktFooterProps, IPktFooterSimpleProps, IFooterSimpleSpecProps, IFooterSpecProps, } 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 { TPktInputSize, TSize3, TSize5, TSize7 } from './size';
-export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin, TTagSkin } from './skin';
+export { ACCORDION_SKINS } from './accordion';
+export type { TAccordionSkin, IPktAccordionBase, IPktAccordionItemBase, IAccordionSpecProps, IAccordionItemSpecProps, IAccordionVisualProps, } from './accordion';
+export type { IPktBackLinkBase, IBacklinkSpecProps } from './backlink';
+export { BREADCRUMBS_NAVIGATION_TYPES } from './breadcrumbs';
+export type { TBreadcrumbsNavigationType, IBreadcrumb, IBreadcrumbItem, IBreadcrumbs, IPktBreadcrumbsBase, IBreadcrumbsSpecProps, } from './breadcrumbs';
+export type { IRenderLink, TRenderLink } from './render-link';
+export type { IPktStringsProps } from '../shared-strings';
+export type { IHelptextProps, ITagOptionalRequiredProps, IFormFieldLabelProps, IFormFieldErrorProps, IFormFieldCommonProps, TFormFieldCommonSpecKeys, } from './form-field';
+export type { TMessageboxSkin, TCardSkin, TTagSkin } from './skin';
 export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';
 export type { IDatepickerStrings } from './datepicker';
 export { defaultSingleStrings, defaultRangeStrings } from './datepicker';
@@ -21,5 +30,5 @@ export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, T
 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';
+export { UPLOAD_STRATEGIES, FILE_UPLOAD_ITEM_RENDERERS, PREVIEW_UPLOAD_STATUS, } from './fileupload';
+export type { TUploadStrategy as TFileUploadStrategy, TFileUploadItemRenderer, TPreviewUploadStatus, TFilesChangedReason, TFileValidator, TTransferProgress, IFileItem, IFileTransfer, IFileValidateDetail, ITransferCancelledDetail, IFilesChangedDetail, IFileUploadSpecProps, IPktFileUploadBase, } from './fileupload';

package/dist/shared-types/render-link.d.ts

@@ -0,0 +1,22 @@
+/**
+ * render-link.ts
+ *
+ * Shared React `renderLink` callback shape used by Link, BackLink, and Breadcrumbs.
+ * Elements components do not expose this prop.
+ */
+/** Object passed to a custom link renderer (`renderLink` prop). */
+export type IRenderLink<TChildren = unknown, TAnchorProps = Record<string, unknown>> = {
+    href: string;
+    className: string;
+    /** Link label/content — typically `ReactNode` in `@oslokommune/punkt-react`. */
+    children: TChildren;
+    /** Remaining anchor attributes spread onto the rendered link. */
+    props: TAnchorProps;
+};
+/**
+ * React-only callback to render a custom link component (Next.js Link, React Router, etc.).
+ *
+ * @typeParam TReturn — Return value / children type (typically `ReactNode`).
+ * @typeParam TAnchorProps — Anchor attribute bag passed in `args.props`.
+ */
+export type TRenderLink<TReturn = unknown, TAnchorProps = Record<string, unknown>> = (args: IRenderLink<TReturn, TAnchorProps>) => TReturn;

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

@@ -5,19 +5,12 @@
  * Only includes skin types that are identical across packages.
  * Component-specific skin types should remain in their respective component files.
  */
-/**
- * Alert component skin variants
- * Used for semantic color coding of alerts (error, success, warning, info)
- */
-export type TAlertSkin = 'error' | 'success' | 'warning' | 'info';
+export { ALERT_SKINS, type TAlertSkin } from './alert';
+export { ACCORDION_SKINS, type TAccordionSkin } from './accordion';
 /**
  * Messagebox component skin variants
  */
 export type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
-/**
- * Accordion component skin variants
- */
-export type TAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue' | 'plus-minus';
 /**
  * Card component skin variants
  */

package/dist/shared-utils/combobox/index.d.ts

@@ -8,3 +8,4 @@ export { isLetterOrSpace, createTypeaheadHandler, findTypeaheadOptionMatch } fro
 export { getInputKeyAction, isArrowToggleKey, getInputValueAction, checkForMatches, getSingleValueForInput, } from './input-utils';
 export type { TInputKeyAction, TFocusOutAction, IFocusOutResult, ICheckForMatchesResult, } from './input-utils';
 export { focusAndScrollIntoView, getOptionElements, focusNextOption, focusPreviousOption, focusFirstOption, focusLastOption, focusFirstOrSelectedOption, } from './keyboard-navigation';
+export type { TComboboxMessageKey } from './messages';

package/dist/shared-utils/combobox/input-utils.d.ts

@@ -1,3 +1,4 @@
+import type { TComboboxMessageKey } from './messages';
 /**
  * Shared combobox input utility functions used by both Elements and React packages.
  * Covers keyboard actions, focus-out validation, match checking, and input display.
@@ -23,7 +24,7 @@ export interface IFocusOutResult {
 export declare const getInputValueAction: (inputValue: string, currentValues: string[], options: IPktComboboxOption[], allowUserInput: boolean, multiple: boolean) => IFocusOutResult;
 export interface ICheckForMatchesResult {
     addValueText: string | null;
-    userInfoMessage: string;
+    userInfoMessage: TComboboxMessageKey;
     shouldRemoveValue: boolean;
     shouldResetInput: boolean;
 }

package/dist/shared-utils/combobox/messages.d.ts

@@ -0,0 +1,7 @@
+import type { TPktStrings } from '../../shared-strings';
+/**
+ * Nøkkelen til en statusmelding i comboboxen, eller tom streng når det ikke er
+ * noe å melde. Utvalgslogikken her returnerer nøkler i stedet for ferdig tekst,
+ * slik at Elements og React kan slå opp teksten i sin egen tekstkatalog.
+ */
+export type TComboboxMessageKey = keyof TPktStrings['combobox'] | '';

package/dist/shared-utils/combobox/option-utils.d.ts

@@ -1,3 +1,4 @@
+import type { TComboboxMessageKey } from './messages';
 /**
  * Shared combobox option utility functions used by both Elements and React packages.
  * Only framework-agnostic functions belong here.
@@ -46,5 +47,5 @@ export declare const findTypeaheadMatches: (options: IPktComboboxOption[], searc
  */
 export declare const getSearchInfoMessage: (searchValue: string, selectedValues: string[], options: IPktComboboxOption[], allowUserInput: boolean) => {
     addValueText: string | null;
-    userInfoMessage: string;
+    userInfoMessage: TComboboxMessageKey;
 };

package/dist/shared-utils/combobox/selection-manager.d.ts

@@ -1,3 +1,4 @@
+import type { TComboboxMessageKey } from './messages';
 /**
  * Shared combobox selection management functions used by both Elements and React packages.
  * Only framework-agnostic functions belong here.
@@ -20,7 +21,7 @@ export interface IToggleSelectionResult {
     options: IPktComboboxOption[];
     shouldOptionsBeOpen: boolean;
     shouldResetInput: boolean;
-    userInfoMessage: string;
+    userInfoMessage: TComboboxMessageKey;
     searchValue: string;
     newUserOption: IPktComboboxOption | null;
 }
@@ -47,7 +48,7 @@ export declare const deselectOption: (value: string | null, currentValues: strin
 export declare const selectAllOptions: (options: IPktComboboxOption[], maxlength: number | null) => {
     values: string[];
     options: IPktComboboxOption[];
-    userInfoMessage: string;
+    userInfoMessage: TComboboxMessageKey;
 };
 /**
  * Clears all selections.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "17.1.3",
+  "version": "18.1.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -44,8 +44,8 @@
     "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@oslokommune/punkt-assets": "^17.1.2",
-    "@oslokommune/punkt-css": "^17.1.3",
+    "@oslokommune/punkt-assets": "^18.0.0",
+    "@oslokommune/punkt-css": "^18.0.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": "f378c0e71d923d9526bc9eea3a399e0d9e00b206"
+  "gitHead": "087459aca13f8ff3a34afc42f8e1cd73900d4896"
 }

package/src/components/accordion/Accordion.tsx

@@ -1,22 +1,12 @@
 'use client'
 
 import { createContext, forwardRef, ReactNode, useContext } from 'react'
-import type { TAccordionSkin } from 'shared-types'
+import type { IPktAccordionBase, TAccordionSkin } from 'shared-types'
 
 export type TPktAccordionSkin = TAccordionSkin
 
-export interface IPktAccordion {
-  compact?: boolean
-  /**
-   * @default skin: "borderless"
-   */
-  skin?: TPktAccordionSkin
-  /**
-   * @description A unique identifier to connect the accordion with a heading
-   */
-  ariaLabelledBy?: string
+export interface IPktAccordion extends IPktAccordionBase {
   children?: ReactNode
-  name?: string
   className?: string
 }
 

package/src/components/accordion/AccordionItem.tsx

@@ -1,22 +1,16 @@
 'use client'
 
 import { forwardRef, type MouseEvent, type ReactNode, type SyntheticEvent, useState } from 'react'
-import type { TAccordionSkin } from 'shared-types'
+import type { IPktAccordionItemBase, TAccordionSkin } from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
 import { useAccordionContext } from './Accordion'
 
 export type TPktAccordionSkin = TAccordionSkin
 
-export interface IPktAccordionItem {
-  defaultOpen?: boolean
-  id: string
+export interface IPktAccordionItem extends Omit<IPktAccordionItemBase, 'title'> {
   title: string | ReactNode
-  skin?: TPktAccordionSkin
-  compact?: boolean
-  isOpen?: boolean
   children?: ReactNode
-  name?: string
   className?: string
   onClick?: (e: MouseEvent<HTMLDetailsElement>) => void
   onToggle?: (e: SyntheticEvent<HTMLDetailsElement>) => void

package/src/components/alert/Alert.tsx

@@ -2,12 +2,15 @@
 
 import classNames from 'classnames'
 import { FC, HTMLAttributes, ReactElement, ReactNode, useCallback, useState } from 'react'
-import type { TAlertRole, TAlertSkin, TAriaLive } from 'shared-types'
+import type { TAlertRole, TAlertSkin, TAlertSize, TAriaLive } from 'shared-types'
+import { formatString, type IPktStringsProps } from 'shared-strings'
 
 import { PktButton } from '../button/Button'
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
-export interface IPktAlert extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface IPktAlert
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, IPktStringsProps {
   skin?: TAlertSkin
   closeAlert?: boolean
   title?: ReactNode
@@ -23,7 +26,7 @@ export interface IPktAlert extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
    *
    * @default medium
    */
-  size?: 'medium' | 'small' | 'xsmall'
+  size?: TAlertSize
   onClose?: (e: CustomEvent) => void
 }
 
@@ -41,9 +44,11 @@ export const PktAlert: FC<IPktAlert> = ({
   role = 'status',
   skin = 'info' as TAlertSkin,
   className,
+  strings,
   ...props
 }: IPktAlert): ReactElement => {
   const [isClosed, setIsClosed] = useState(false)
+  const s = usePktStrings(['generic', 'alert'], strings)
 
   const classes = {
     'pkt-alert': true,
@@ -87,7 +92,7 @@ export const PktAlert: FC<IPktAlert> = ({
               variant="icon-only"
               onClick={onClose}
             >
-              <span className="sr-only">Lukk</span>
+              <span className="sr-only">{s.generic.close}</span>
             </PktButton>
           </div>
         )}
@@ -95,7 +100,9 @@ export const PktAlert: FC<IPktAlert> = ({
 
         <div className="pkt-alert__text">{children}</div>
 
-        {date && <div className="pkt-alert__date">Sist oppdatert: {date}</div>}
+        {date && (
+          <div className="pkt-alert__date">{formatString(s.alert.lastUpdated, { date })}</div>
+        )}
       </div>
     </div>
   )

package/src/components/backlink/BackLink.tsx

@@ -1,24 +1,23 @@
 'use client'
 
 import { AnchorHTMLAttributes, forwardRef, ReactNode, Ref } from 'react'
+import type { IPktBackLinkBase, TRenderLink } from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
-export interface IPktBackLink extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
-  href?: string
-  text?: string
-  ariaLabel?: string
-  renderLink?: (args: {
-    href: string
-    className: string
-    children: ReactNode
-    props: AnchorHTMLAttributes<HTMLAnchorElement>
-  }) => ReactNode
+export interface IPktBackLink
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
+    IPktBackLinkBase {
+  renderLink?: TRenderLink<ReactNode, AnchorHTMLAttributes<HTMLAnchorElement>>
   ref?: Ref<HTMLElement>
 }
 
 export const PktBackLink = forwardRef<HTMLElement, IPktBackLink>(
-  ({ href = '/', text = 'Forsiden', ariaLabel, renderLink, className, ...props }, ref) => {
+  (
+    { href = '/', text = 'Forsiden', ariaLabel, renderLink, className, strings, ...props },
+    ref,
+  ) => {
     const linkChildren = (
       <>
         <PktIcon className="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left" aria-hidden="true" />
@@ -34,10 +33,11 @@ export const PktBackLink = forwardRef<HTMLElement, IPktBackLink>(
         </a>
       ))
 
+    const s = usePktStrings(['backlink'], strings)
     const classes = ['pkt-back-link', className].filter(Boolean).join(' ')
 
     return (
-      <nav className={classes} aria-label={ariaLabel || 'Gå tilbake til forrige side'} ref={ref}>
+      <nav className={classes} aria-label={ariaLabel ?? s.backlink.label} ref={ref}>
         {linkRenderer({
           href,
           className: 'pkt-link pkt-link--icon-left',

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -2,28 +2,31 @@
 
 import { ForwardedRef, forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react'
 import { Link } from 'react-router-dom'
+import type {
+  IBreadcrumb,
+  IPktBreadcrumbsBase,
+  TBreadcrumbsNavigationType,
+  TRenderLink,
+} from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
-export interface IBreadcrumbs {
-  text: string
-  href: string
-}
+export type { IBreadcrumb }
+
+/** @deprecated Use `IBreadcrumb`. */
+export type IBreadcrumbs = IBreadcrumb
 
-export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  breadcrumbs: IBreadcrumbs[]
-  navigationType?: 'router' | 'anchor'
-  renderLink?: (args: {
-    href: string
-    className: string
-    children: ReactNode
-    props: AnchorHTMLAttributes<HTMLAnchorElement>
-  }) => ReactNode
+export interface IPktBreadcrumbs
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>,
+    IPktBreadcrumbsBase {
+  navigationType?: TBreadcrumbsNavigationType
+  renderLink?: TRenderLink<ReactNode, AnchorHTMLAttributes<HTMLAnchorElement>>
 }
 
 export const PktBreadcrumbs = forwardRef(
   (
-    { breadcrumbs, navigationType, renderLink, className, ...props }: IPktBreadcrumbs,
+    { breadcrumbs, navigationType, renderLink, className, strings, ...props }: IPktBreadcrumbs,
     ref: ForwardedRef<HTMLAnchorElement>,
   ) => {
     const slicedBreadcrumbs = breadcrumbs
@@ -31,6 +34,7 @@ export const PktBreadcrumbs = forwardRef(
     const backLink = slicedBreadcrumbs[slicedBreadcrumbs.length - 2]
 
     // Define the classes
+    const s = usePktStrings(['breadcrumbs'], strings)
     const classes = [className, 'pkt-breadcrumbs'].filter(Boolean).join(' ')
 
     // Create a default renderLink implementation based on navigationType
@@ -50,7 +54,7 @@ export const PktBreadcrumbs = forwardRef(
 
     // Mobile and desktop have different markup
     return (
-      <nav ref={ref} aria-label="brødsmulemeny" className={classes}>
+      <nav ref={ref} aria-label={s.breadcrumbs.ariaLabel} className={classes}>
         <ol className="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
           {slicedBreadcrumbs.map((item, index) => (
             <li key={`breadcrumb-${index}`} className="pkt-breadcrumbs__item">

package/src/components/calendar/Calendar.core.test.tsx

@@ -223,7 +223,7 @@ describe('PktCalendar', () => {
 
     test('handles custom day strings', () => {
       const { container } = createCalendar({
-        strings: { daysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] },
+        strings: { dates: { daysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] } },
       })
 
       const dayHeaders = container.querySelectorAll('.pkt-calendar__day-name')
@@ -235,10 +235,12 @@ describe('PktCalendar', () => {
       const { container } = createCalendar({
         withcontrols: true,
         strings: {
-          months: [
-            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
-          ],
+          dates: {
+            months: [
+              'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+            ],
+          },
         },
       })
 

package/src/components/calendar/types.ts

@@ -1,38 +1,17 @@
 import type { IDateConstraints, TDateRangeMap } from 'shared-types/calendar'
 
-export const DEFAULT_STRINGS: Required<IPktCalendarStrings> = {
-  month: 'Måned',
-  year: 'År',
-  days: ['Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag', 'Søndag'],
-  daysShort: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
-  months: [
-    'Januar',
-    'Februar',
-    'Mars',
-    'April',
-    'Mai',
-    'Juni',
-    'Juli',
-    'August',
-    'September',
-    'Oktober',
-    'November',
-    'Desember',
-  ],
-  week: 'Uke',
-  prevMonth: 'Forrige måned',
-  nextMonth: 'Neste måned',
-}
+import type { TPktStringsOverride } from 'shared-strings'
 
+/** Datonavn og navigasjonstekster slik kalender-underkomponentene forventer dem. */
 export interface IPktCalendarStrings {
-  month?: string
-  year?: string
-  days?: string[]
-  daysShort?: string[]
-  months?: string[]
-  week?: string
-  prevMonth?: string
-  nextMonth?: string
+  month: string
+  year: string
+  days: string[]
+  daysShort: string[]
+  months: string[]
+  week: string
+  prevMonth: string
+  nextMonth: string
 }
 
 export interface PktCalendarHandle {
@@ -64,7 +43,8 @@ export interface IPktCalendar {
   today?: string
 
   // Localization
-  strings?: IPktCalendarStrings
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
 
   // Callbacks
   onDateSelected?: (selected: string[]) => void
@@ -87,7 +67,7 @@ export type TDayViewData = {
 
 export interface ICalendarState {
   componentId: string
-  strings: Required<IPktCalendarStrings>
+  strings: IPktCalendarStrings
 
   // Navigation
   year: number
@@ -148,7 +128,7 @@ export interface ICalendarState {
 
 export interface ICalendarNavProps {
   componentId: string
-  strings: Required<IPktCalendarStrings>
+  strings: IPktCalendarStrings
   year: number
   month: number
   earliest: string | null

package/src/components/calendar/useCalendarState.ts

@@ -17,7 +17,8 @@ import {
   getKeyDirection,
 } from 'shared-utils/calendar/keyboard-navigation'
 
-import { DEFAULT_STRINGS, type IPktCalendar, type ICalendarState } from './types'
+import { type IPktCalendar, type ICalendarState } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 export function useCalendarState(props: IPktCalendar): ICalendarState {
   const {
@@ -43,7 +44,20 @@ export function useCalendarState(props: IPktCalendar): ICalendarState {
   const generatedId = useId()
   const componentId = idProp ?? generatedId
 
-  const strings = useMemo(() => ({ ...DEFAULT_STRINGS, ...stringsProp }), [stringsProp])
+  const catalog = usePktStrings(['dates', 'calendar'], stringsProp)
+  const strings = useMemo(
+    () => ({
+      month: catalog.dates.month,
+      year: catalog.dates.year,
+      week: catalog.dates.week,
+      days: catalog.dates.days,
+      daysShort: catalog.dates.daysShort,
+      months: catalog.dates.months,
+      prevMonth: catalog.calendar.prevMonth,
+      nextMonth: catalog.calendar.nextMonth,
+    }),
+    [catalog],
+  )
 
   const todayDate = useMemo(
     () => (todayProp ? parseISODateString(todayProp) : todayInTz()),

package/src/components/checkbox/Checkbox.tsx

@@ -8,6 +8,8 @@ import {
   useEffect,
   useRef,
 } from 'react'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -24,9 +26,13 @@ export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   hideLabel?: boolean
   labelPosition?: 'right' | 'left'
   optionalTag?: boolean
+  /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
   optionalText?: string
   requiredTag?: boolean
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
   requiredText?: string
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   tagText?: string | null
   onChange?: ChangeEventHandler<HTMLInputElement>
 }
@@ -48,14 +54,16 @@ export const PktCheckbox = forwardRef(
       checked,
       indeterminate,
       optionalTag,
-      optionalText = 'Valgfritt',
+      optionalText,
       requiredTag,
-      requiredText = 'Må fylles ut',
+      requiredText,
+      strings,
       tagText,
       ...props
     }: IPktCheckbox,
     ref: ForwardedRef<HTMLInputElement>,
   ): ReactElement => {
+    const s = usePktStrings(['forms'], strings)
     const internalRef = useRef<HTMLInputElement>(null)
 
     useEffect(() => {
@@ -97,8 +105,16 @@ export const PktCheckbox = forwardRef(
       return (
         <>
           {tagText && <span className={tagClasses + ` pkt-tag--gray`}>{tagText}</span>}
-          {optionalTag && <span className={tagClasses + ` pkt-tag--blue-light`}>{optionalText}</span>}
-          {requiredTag && <span className={tagClasses + ` pkt-tag--beige`}>{requiredText}</span>}
+          {optionalTag && (
+            <span className={tagClasses + ` pkt-tag--blue-light`}>
+              {optionalText ?? s.forms.optional}
+            </span>
+          )}
+          {requiredTag && (
+            <span className={tagClasses + ` pkt-tag--beige`}>
+              {requiredText ?? s.forms.required}
+            </span>
+          )}
         </>
       )
     }

package/src/components/combobox/Combobox.tsx

@@ -27,6 +27,7 @@ export const PktCombobox = forwardRef<HTMLDivElement, IPktCombobox>((props, ref)
   return (
     <div className={outerClasses} ref={state.wrapperRef} id={state.id || undefined}>
       <PktInputWrapper
+        strings={state.strings}
         forId={wrapperForId}
         hasFieldset={props.hasFieldset ?? !hasTextInput}
         label={state.label || ''}

package/src/components/combobox/Listbox.tsx

@@ -2,12 +2,14 @@
 
 import type { IComboboxState } from './types'
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 interface IListboxProps {
   state: IComboboxState
 }
 
 export const Listbox = ({ state }: IListboxProps) => {
+  const s = usePktStrings(['listbox'], state.strings)
   const {
     listboxId,
     label,
@@ -59,9 +61,9 @@ export const Listbox = ({ state }: IListboxProps) => {
               <input
                 className="pkt-txt-16-light"
                 type="text"
-                aria-label="Søk i listen"
+                aria-label={s.listbox.searchLabel}
                 form=""
-                placeholder={searchPlaceholder || 'Søk...'}
+                placeholder={searchPlaceholder ?? s.listbox.searchPlaceholder}
                 onChange={handleSearchInput}
                 onKeyDown={handleSearchKeydown}
                 value={searchValue}