@oslokommune/punkt-react 18.0.0 → 18.1.0

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

@@ -10,5 +10,5 @@ export { nb } from './nb';
 export { formatString, plural } from './format';
 export { getPktStrings, resetPktStrings, setPktStrings, subscribePktStrings } from './store';
 export { resolveNamespace, resolveStrings } from './resolve';
-export type { TPktStringParams, TPktStrings, TPktStringsNamespace, TPktStringsOverride, TPktStringsShape, TPktStringValue, } from './types';
+export type { IPktStringsProps, TPktStringParams, TPktStrings, TPktStringsNamespace, TPktStringsOverride, TPktStringsShape, TPktStringValue, } from './types';
 export { consentStrings } from './consent';

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

@@ -66,6 +66,9 @@ export declare const nb: {
     breadcrumbs: {
         ariaLabel: string;
     };
+    alert: {
+        lastUpdated: string;
+    };
     tag: {
         remove: string;
     };

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

@@ -27,3 +27,14 @@ 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.
+ *
+ * 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.
+ */
+export type IPktStringsProps<NS extends TPktStringsNamespace = TPktStringsNamespace> = {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride<NS>;
+};

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

@@ -0,0 +1,58 @@
+/**
+ * accordion.ts
+ *
+ * Type definisjoner for pkt-accordion og pkt-accordion-item.
+ * Brukes av React, Elements, og typed component specs.
+ *
+ * @remarks React ekspanderer `title` streng typen til `string`|`ReactNode` på accordion-items.
+ * Form-field common props (`IFormFieldCommonProps`) gjelder ikke accordion —
+ * bruk `IAccordionVisualProps` for delte visuelle props (`skin`, `compact`).
+ */
+/** Accordion skin varianter — delt runtime source for types, specs, og Preview. */
+export declare const ACCORDION_SKINS: readonly ['borderless', 'outlined', 'beige', 'blue', 'plus-minus'];
+export type TAccordionSkin = (typeof ACCORDION_SKINS)[number];
+/** Visual props delt med pkt-accordion og pkt-accordion-item. */
+export type IAccordionVisualProps = {
+    skin?: TAccordionSkin;
+    compact?: boolean;
+};
+/**
+ * Accordion props delt med React, Elements, og typed specs.
+ */
+export type IPktAccordionBase = IAccordionVisualProps & {
+    /** ID of the element that labels the accordion group (`aria-labelledby`). */
+    ariaLabelledBy?: string;
+    /** Groups accordion items so only one panel is open at a time within the group. */
+    name?: string;
+};
+/**
+ * Accordion-item props delt med React, Elements, og typed specs.
+ *
+ * @remarks Item `skin` / `compact` overrider verdier arvet fra parent-kontekst når satt.
+ */
+export type IPktAccordionItemBase = IAccordionVisualProps & {
+    id: string;
+    /** Summary label — string in Elements; React may pass `ReactNode`. */
+    title: string;
+    /** Open on first render (uncontrolled initial state). */
+    defaultOpen?: boolean;
+    /** Controlled open state — overrides internal toggle state when set. */
+    isOpen?: boolean;
+    /** Accordion group name — inherits from parent pkt-accordion when omitted. */
+    name?: string;
+};
+/** Pkt-accordion props for typed component specs. */
+export type IAccordionSpecProps = Pick<IPktAccordionBase, 'skin' | 'compact' | 'ariaLabelledBy' | 'name'>;
+/** Pkt-accordion-item props for typed component specs. */
+export type IAccordionItemSpecProps = Pick<IPktAccordionItemBase, 'id' | 'title' | 'defaultOpen' | 'isOpen' | 'name' | 'skin' | 'compact'> & {
+    /**
+     * React-only click handler on the `<details>` element.
+     * @remarks Elements has no equivalent — use native DOM events if needed.
+     */
+    onClick?: (event: Event) => void;
+    /**
+     * React-only toggle handler on the `<details>` element.
+     * @remarks Elements has no equivalent — use native DOM events if needed.
+     */
+    onToggle?: (event: Event) => void;
+};

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

@@ -0,0 +1,20 @@
+import type { TAriaLive } from './aria';
+/** Alert skin variants — shared runtime source for types, specs, and Preview. */
+export declare const ALERT_SKINS: readonly ['info', 'success', 'warning', 'error'];
+export type TAlertSkin = (typeof ALERT_SKINS)[number];
+/** Alert size variants — shared runtime source for types, specs, and Preview. */
+export declare const ALERT_SIZES: readonly ['medium', 'small', 'xsmall'];
+/** Alert size type derived from ALERT_SIZES */
+export type TAlertSize = (typeof ALERT_SIZES)[number];
+/**
+ * Documented Alert props (subset of React `IPktAlert` / Elements `IPktAlert`).
+ * Used for typed component specs in documentation.
+ */
+export type IAlertSpecProps = {
+    title?: string;
+    skin?: TAlertSkin;
+    date?: string;
+    ariaLive?: TAriaLive;
+    size?: TAlertSize;
+    closeAlert?: boolean;
+};

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

@@ -9,7 +9,8 @@ export type TAriaBooleanMixed = TAriaBoolean | 'mixed';
 export type TAriaCurrent = TAriaBoolean | 'page' | 'step' | 'location' | 'date' | 'time';
 export type TAriaHasPopup = TAriaBoolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 export type TAriaInvalid = TAriaBoolean | 'grammar' | 'spelling';
-export type TAriaLive = 'off' | 'polite' | 'assertive';
+export declare const ARIA_LIVE_VALUES: readonly ['off', 'polite', 'assertive'];
+export type TAriaLive = (typeof ARIA_LIVE_VALUES)[number];
 export type TAriaRelevant = 'additions' | 'removals' | 'text' | 'all';
 export type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
 export type TAriaAutoComplete = 'none' | 'inline' | 'list' | 'both';

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

@@ -0,0 +1,23 @@
+/**
+ * backlink.ts
+ *
+ * Type definitions for pkt-backlink.
+ * Used by React, Elements, and typed component specs.
+ */
+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 & {
+    href?: string;
+    text?: string;
+    /** @deprecated Bruk `strings={{ backlink: { label: '…' } }}` eller `setPktStrings()`. */
+    ariaLabel?: string | null;
+};
+/** Documented props for typed component specs. */
+export type IBacklinkSpecProps = Pick<IPktBackLinkBase, 'href' | 'text' | 'ariaLabel'> & {
+    /**
+     * React-only custom link renderer (e.g. Next.js Link).
+     * @remarks Elements has no equivalent — uses a native `<a>`.
+     */
+    renderLink?: TRenderLink;
+};

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

@@ -0,0 +1,33 @@
+/**
+ * breadcrumbs.ts
+ *
+ * Type definitions for pkt-breadcrumbs.
+ * Used by React, Elements, and typed component specs.
+ */
+import type { IPktStringsProps } from '../shared-strings';
+import type { TRenderLink } from './render-link';
+/** Navigation mode for React `PktBreadcrumbs` (router vs native anchor). */
+export declare const BREADCRUMBS_NAVIGATION_TYPES: readonly ['router', 'anchor'];
+export type TBreadcrumbsNavigationType = (typeof BREADCRUMBS_NAVIGATION_TYPES)[number];
+/** One crumb in a breadcrumbs trail. */
+export type IBreadcrumb = {
+    text: string;
+    href: string;
+};
+/** @deprecated Use `IBreadcrumb` — former Elements export name. */
+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 & {
+    breadcrumbs: IBreadcrumb[];
+};
+/** Documented props for typed component specs. */
+export type IBreadcrumbsSpecProps = Pick<IPktBreadcrumbsBase, 'breadcrumbs'> & {
+    navigationType?: TBreadcrumbsNavigationType;
+    /**
+     * React-only custom link renderer (e.g. Next.js Link).
+     * When set, `navigationType` is effectively `router`.
+     */
+    renderLink?: TRenderLink;
+};

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

@@ -4,8 +4,16 @@
  * Type definitions for the fileupload component.
  * Used by both Elements and React implementations.
  */
-export type TUploadStrategy = 'form' | 'custom';
-export type TFileUploadItemRenderer = 'filename' | 'thumbnail';
+import type { IFormFieldCommonProps, TFormFieldCommonSpecKeys } from './form-field';
+/** Upload strategy variants — shared runtime source for types, specs, and Preview. */
+export declare const UPLOAD_STRATEGIES: readonly ['form', 'custom'];
+export type TUploadStrategy = (typeof UPLOAD_STRATEGIES)[number];
+/** Queue item renderer variants — shared runtime source for types, specs, and Preview. */
+export declare const FILE_UPLOAD_ITEM_RENDERERS: readonly ['filename', 'thumbnail'];
+export type TFileUploadItemRenderer = (typeof FILE_UPLOAD_ITEM_RENDERERS)[number];
+/** Preview-only upload status display — used in docs demo props. */
+export declare const PREVIEW_UPLOAD_STATUS: readonly ['progressbar', 'text'];
+export type TPreviewUploadStatus = (typeof PREVIEW_UPLOAD_STATUS)[number];
 export type TFilesChangedReason = 'add' | 'remove' | 'update';
 export type TFileValidator = (file: File) => string | null;
 export type TTransferProgress = number | 'done' | 'error' | 'canceled' | 'queued';
@@ -44,3 +52,49 @@ export interface IFilesChangedDetail {
     reason: TFilesChangedReason;
     changedFileIds?: string[];
 }
+/**
+ * Framework-agnostic FileUpload props shared by React, Elements, and typed specs.
+ *
+ * @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 {
+    /** Field name. Used for native input (`form`) or hidden ID inputs (`custom`). */
+    name: string;
+    required?: boolean;
+    value?: IFileItem[];
+    defaultValue?: IFileItem[];
+    /** React callback — Elements uses the `files-changed` event instead. */
+    onFilesChanged?: (files: IFileItem[]) => void;
+    uploadStrategy?: TUploadStrategy;
+    multiple?: boolean;
+    itemRenderer?: TFileUploadItemRenderer;
+    allowedFormats?: string[];
+    formatErrorMessage?: string;
+    maxFileSize?: string | number;
+    onFileValidation?: TFileValidator;
+    /**
+     * Low-level validation escape hatch — Lit parity with the `file-validate` event.
+     * React: callback prop. Elements: listen for `file-validate` and mutate `detail.errorMessage`.
+     */
+    onFileValidate?: (detail: IFileValidateDetail) => void;
+    sizeErrorMessage?: string;
+    addCommentsEnabled?: boolean;
+    enableImagePreview?: boolean;
+    /** Experimental queue operations — typed per framework in React/Elements. */
+    extraOperations?: unknown[];
+    fullwidth?: boolean;
+    /** React callback — Elements uses the `file-upload-requested` event instead. */
+    onFileUploadRequested?: (fileItem: IFileItem) => void;
+    /** React callback — Elements uses the `transfer-cancelled` event instead. */
+    onTransferCancelled?: (fileItemId: string) => void;
+    renameFilesEnabled?: boolean;
+    transfers?: IFileTransfer[];
+    truncateTail?: number;
+}
+/** Documented props for typed component specs — subset of base + docs-only demo props. */
+export type IFileUploadSpecProps = Pick<IPktFileUploadBase, TFormFieldCommonSpecKeys | 'name' | 'required' | 'value' | 'defaultValue' | 'onFilesChanged' | 'uploadStrategy' | 'multiple' | 'itemRenderer' | 'allowedFormats' | 'formatErrorMessage' | 'maxFileSize' | 'onFileValidation' | 'onFileValidate' | 'sizeErrorMessage' | 'addCommentsEnabled' | 'enableImagePreview' | 'extraOperations' | 'fullwidth' | 'onFileUploadRequested' | 'onTransferCancelled' | 'renameFilesEnabled' | 'transfers' | 'truncateTail'> & {
+    previewUploadIntervalMs?: number;
+    previewSimulateUploadError?: boolean;
+    previewUploadStatus?: TPreviewUploadStatus;
+};

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

@@ -90,6 +90,16 @@ export interface IPktFooterSimpleProps<IconType = string> extends IPktFooterBase
     /** Custom links shown as a compact row in the secondary (grey) footer. */
     links?: IPktFooterLink[];
 }
+/**
+ * Documented FooterSimple props (subset of `IPktFooterSimpleProps`).
+ * Used for typed component specs in documentation.
+ */
+export type IFooterSimpleSpecProps = Pick<IPktFooterSimpleProps, 'links' | 'skipGlobal' | 'data' | 'dataUrl' | 'locale' | 'openLinksInNewTab' | 'includeConsent' | 'googleAnalyticsId' | 'hotjarId'>;
+/**
+ * Documented Footer props (subset of `IPktFooterProps`).
+ * Used for typed component specs in documentation.
+ */
+export type IFooterSpecProps = Pick<IPktFooterProps, 'columns' | 'skipGlobal' | 'data' | 'dataUrl' | 'locale' | 'openLinksInNewTab' | 'includeConsent' | 'googleAnalyticsId' | 'hotjarId'>;
 /** Historical defaults for the deprecated link props — used to detect explicit overrides. */
 export declare const DEFAULT_FOOTER_PERSONVERN_URL = "https://www.oslo.kommune.no/personvern-og-informasjonskapsler/";
 export declare const DEFAULT_FOOTER_TILGJENGELIGHET_URL = "https://www.oslo.kommune.no/tilgjengelighet/";

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

@@ -0,0 +1,45 @@
+/**
+ * form-field.ts
+ *
+ * Reusable prop slices for form-field components (input-wrapper, fileupload, etc.).
+ * Compose slices into `IFormFieldCommonProps`, then extend with component-specific props.
+ *
+ * @example
+ * IPktInputWrapperBase = IFormFieldCommonProps & { forId, counter, … }
+ * IPktFileUploadBase = IFormFieldCommonProps & { name, uploadStrategy, … }
+ */
+import type { IPktStringsProps } from '../shared-strings';
+/** Expandable helptext props used by pkt-input-wrapper and several form controls. */
+export type IHelptextProps = {
+    helptext?: string;
+    helptextDropdown?: string;
+    /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
+    helptextDropdownButton?: string;
+};
+/** Optional/required tag labelling shared by pkt-input-wrapper and form controls. */
+export type ITagOptionalRequiredProps = {
+    tagText?: string | null;
+    optionalTag?: boolean;
+    /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
+    optionalText?: string;
+    requiredTag?: boolean;
+    /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
+    requiredText?: string;
+};
+/** Label prop shared by pkt-input-wrapper and form controls that use PktInputWrapper. */
+export type IFormFieldLabelProps = {
+    label?: string;
+};
+/** Error/disabled state shared by pkt-input-wrapper and form controls. */
+export type IFormFieldErrorProps = {
+    disabled?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+};
+/**
+ * Shared form-field props — helptext, tags, label, error state, and `strings`.
+ * Input-wrapper adds wrapper-only props (forId, counter, inline, …) on top of this.
+ */
+export type IFormFieldCommonProps = IHelptextProps & ITagOptionalRequiredProps & IFormFieldLabelProps & IFormFieldErrorProps & IPktStringsProps;
+/** Keys from `IFormFieldCommonProps` — reuse in `I*SpecProps` Pick unions across form components. */
+export type TFormFieldCommonSpecKeys = keyof IFormFieldCommonProps;

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

@@ -16,6 +16,8 @@
  */
 import type { Representing, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, User, UserMenuItem } from './header';
 export type THeaderMenuLocale = 'nb-NO' | 'en-GB' | (string & {});
+/** Documented locale keys — shared runtime source for specs and Preview dropdowns. */
+export declare const HEADER_MENU_LOCALES: readonly ['nb-NO', 'en-GB'];
 /** Plain link without an icon. */
 export interface IHeaderMenuLink {
     text: string;

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,4 +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, } 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "18.0.0",
+  "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",
@@ -102,5 +102,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "057d0045ccd1af4d0f6591f0e2b0e5ab6fda3843"
+  "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,15 @@
 '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'
-import type { TPktStringsOverride } from 'shared-strings'
-
-export interface IPktBackLink extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
-
-  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>
 }
 
@@ -46,7 +37,7 @@ export const PktBackLink = forwardRef<HTMLElement, IPktBackLink>(
     const classes = ['pkt-back-link', className].filter(Boolean).join(' ')
 
     return (
-      <nav className={classes} aria-label={ariaLabel || s.backlink.label} 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,26 @@
 
 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'
-import type { TPktStringsOverride } from 'shared-strings'
 
-export interface IBreadcrumbs {
-  text: string
-  href: string
-}
+export type { IBreadcrumb }
 
-export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Overstyrer tekster for denne komponenten. */
-  strings?: TPktStringsOverride
+/** @deprecated Use `IBreadcrumb`. */
+export type IBreadcrumbs = IBreadcrumb
 
-  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(