@oslokommune/punkt-react 16.26.5 → 17.0.0

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

@@ -0,0 +1,95 @@
+/**
+ * footer.ts
+ *
+ * Framework-agnostic prop types for the reworked footer components
+ * (`PktFooter` / `pkt-footer` and `PktFooterSimple` / `pkt-footer-simple`).
+ *
+ * Both components render an optional grey "secondary" band with the
+ * consumer's custom content, stacked on top of the global (blue) footer
+ * whose content comes from the same CDN payload as the global header —
+ * see `header-footer.ts`.
+ */
+import type { THeaderFooterApi, THeaderMenuLocale } from './header-footer';
+/** Custom link in the secondary (grey) footer. */
+export interface IPktFooterLink {
+    href: string;
+    text: string;
+    /**
+     * Mark the link as external: the link's top domain is shown in
+     * parentheses after the text ("Ledige stillinger (webcruiter.com)"),
+     * per Punkt's link-labelling guidance.
+     */
+    external?: boolean;
+    openInNewTab?: boolean;
+}
+/** Column of custom content in the secondary footer (1–3 per footer). */
+export interface IPktFooterColumn {
+    title: string;
+    /** Optional free-text paragraph shown above the links. */
+    text?: string;
+    links?: IPktFooterLink[];
+}
+/**
+ * @deprecated The social-media row now comes from the global footer's
+ * payload. Only rendered when explicitly supplied.
+ */
+export interface IPktFooterSocialLink {
+    href: string;
+    iconName?: string;
+    language?: string;
+    openInNewTab?: boolean;
+}
+/** Props shared by `PktFooter` and `PktFooterSimple` in both frameworks. */
+export interface IPktFooterBase<IconType = string> {
+    /** Pre-fetched header/footer payload. If supplied, the component skips its own fetch. */
+    data?: THeaderFooterApi<IconType>;
+    /** Endpoint to fetch the header/footer payload from. */
+    dataUrl?: string;
+    /** Locale key to select from the payload. Defaults to `nb-NO`. */
+    locale?: THeaderMenuLocale;
+    /** Skip the global (blue) footer entirely, e.g. when CSP blocks the CDN. Default: false */
+    skipGlobal?: boolean;
+    /** Open custom links in a new tab. Applies to custom content only. Default: false */
+    openLinksInNewTab?: boolean;
+    /**
+     * Replace the payload's cookie-settings link (`#cb-trigger`) with
+     * Punkt's own consent dialog. When unset the cookie-settings link is
+     * hidden. Default: false
+     */
+    includeConsent?: boolean;
+    hotjarId?: string | null;
+    googleAnalyticsId?: string | null;
+    devMode?: boolean;
+    cookieDomain?: string | null;
+    cookieSecure?: string | null;
+    cookieExpiryDays?: string | null;
+}
+export interface IPktFooterProps<IconType = string> extends IPktFooterBase<IconType> {
+    /** Custom content columns for the secondary (grey) footer. */
+    columns?: IPktFooterColumn[];
+    /** @deprecated Use `columns`. Mapped to the first entry of `columns`. */
+    columnOne?: IPktFooterColumn;
+    /** @deprecated Use `columns`. Mapped to the second entry of `columns`. */
+    columnTwo?: IPktFooterColumn;
+    /**
+     * @deprecated The privacy link now comes from the global footer's payload.
+     * Only rendered (in the secondary footer) when explicitly set to a
+     * non-default value.
+     */
+    personvernOgInfoLink?: string;
+    /**
+     * @deprecated The accessibility link now comes from the global footer's
+     * payload. Only rendered (in the secondary footer) when explicitly set
+     * to a non-default value.
+     */
+    tilgjengelighetLink?: string;
+    /** @deprecated The social-media row now comes from the global footer's payload. */
+    socialLinks?: IPktFooterSocialLink[];
+}
+export interface IPktFooterSimpleProps<IconType = string> extends IPktFooterBase<IconType> {
+    /** Custom links shown as a compact row in the secondary (grey) footer. */
+    links?: IPktFooterLink[];
+}
+/** 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/{header-menu.d.ts → header-footer.d.ts}

@@ -1,18 +1,20 @@
 /**
- * header-menu.ts
+ * header-footer.ts
  *
- * Type definitions for the global header mega menu, shared between
- * @oslokommune/punkt-elements and (eventually) @oslokommune/punkt-react.
+ * Type definitions for the global header/footer payload (mega menu,
+ * footer, search and contact), shared between @oslokommune/punkt-elements
+ * and @oslokommune/punkt-react.
  *
  * The shape mirrors the live API response from
  * https://cdn.web.oslo.kommune.no/header-footer/header-footer.json
- * which the legacy oslo.kommune.no header consumes.
+ * which the "live" oslo.kommune.no header consumes.
  */
 /**
  * Locale keys present in the live payload. Typed as a string union with a
  * `string & {}` escape hatch so additional locales can be added without
  * a type-level breaking change.
  */
+import type { Representing, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, User, UserMenuItem } from './header';
 export type THeaderMenuLocale = 'nb-NO' | 'en-GB' | (string & {});
 /** Plain link without an icon. */
 export interface IHeaderMenuLink {
@@ -104,5 +106,50 @@ export interface IPktHeaderMenu<IconType = string> {
     /** Pixel breakpoint below which sections collapse into accordions. */
     mobileBreakpoint?: number;
 }
+/**
+ * Framework-agnostic props for the global (kommune-wide) header
+ * (`pkt-header-global` / `PktHeaderGlobal`). Elements narrows the
+ * boolean fields to `Booleanish` and React adds callback/className
+ * props on top — see each package's `header/types.ts`.
+ */
+export interface IPktHeaderGlobal<IconType = string> {
+    /** Endpoint to fetch the header/footer payload from. */
+    dataUrl?: string;
+    /** Pre-fetched payload. If supplied, the component (and its menu) skips its own fetch. */
+    data?: THeaderFooterApi<IconType>;
+    /** Locale key to select from the payload. Defaults to `nb-NO`. */
+    locale?: THeaderMenuLocale;
+    /** Logo link URL. When omitted the logo is rendered without a link. */
+    logoLink?: string;
+    /** Override the CDN path the logo assets load from. Can also be set
+     * globally via `window.pktLogoPath`. */
+    logoPath?: string;
+    /** Show the search field. Default: true */
+    showSearch?: boolean;
+    /** Placeholder for the search field. Falls back to the payload's search placeholder, then 'Søk'. */
+    searchPlaceholder?: string;
+    /** Show the contact link (from the payload's `header.contact`). Default: true */
+    showContact?: boolean;
+    /** User object for the logged-in user. When set, the user menu is shown. */
+    user?: User;
+    /** User menu items. */
+    userMenu?: UserMenuItem<IconType>[];
+    /** Representation object. */
+    representing?: Representing;
+    /** Allow the user to change representation. */
+    canChangeRepresentation?: boolean;
+    /** Logout button placement. */
+    logOutButtonPlacement?: TLogOutButtonPlacement;
+    /** Header position. Default: 'fixed' */
+    position?: THeaderPosition;
+    /** Scroll behavior. Default: 'hide' */
+    scrollBehavior?: THeaderScrollBehavior;
+    /** Width below which the header switches to mobile layout. Default: 768 */
+    mobileBreakpoint?: number;
+    /** Width below which the header switches to tablet layout. Default: 1024 */
+    tabletBreakpoint?: number;
+}
 /** Default URL of the live header/footer endpoint. */
 export declare const DEFAULT_HEADER_FOOTER_URL = "https://cdn.web.oslo.kommune.no/header-footer/header-footer.json";
+/** Default logo link for both header variants (unless overridden or hidden). */
+export declare const DEFAULT_HEADER_LOGO_LINK = "https://www.oslo.kommune.no";

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

@@ -81,7 +81,7 @@ export type TLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none';
 /**
  * Position options for the header
  */
-export type THeaderPosition = 'fixed' | 'relative';
+export type THeaderPosition = 'fixed' | 'sticky' | 'relative';
 /**
  * Scroll behavior options for the header
  */

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

@@ -4,12 +4,13 @@ export type { TAriaBoolean, TAriaBooleanMixed, TAriaCurrent, TAriaHasPopup, TAri
 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 type { THeaderMenuLocale, IHeaderMenuLink, IHeaderMenuIconLink, IHeaderMenuButton, IHeaderMenuServices, IHeaderMenuSection, IMegaMenu, IHeaderFooter, IHeaderFooterLocaleData, THeaderFooterApi, IPktHeaderMenu, } from './header-menu';
-export { DEFAULT_HEADER_FOOTER_URL } from './header-menu';
+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 { 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 { TSelectOption } from './select';
-export type { TSize3, TSize5, TSize7 } from './size';
+export type { TPktInputSize, TSize3, TSize5, TSize7 } from './size';
 export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin, TTagSkin } from './skin';
 export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';
 export type { IDatepickerStrings } from './datepicker';
@@ -18,6 +19,7 @@ export type { ITimepickerStrings } from './timepicker';
 export { defaultTimepickerStrings } from './timepicker';
 export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition, } from './progressbar';
 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';

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 { TPktInputSize } from './size';
 export type TPktSearchInputAppearance = 'local' | 'local-with-button' | 'global';
 export type TPktSearchInputMethod = 'get' | 'post' | 'dialog';
 /**
@@ -28,6 +29,7 @@ export interface IPktSearchInputSuggestion {
  */
 export interface IPktSearchInput {
     appearance?: TPktSearchInputAppearance;
+    inputSize?: TPktInputSize;
     disabled?: boolean;
     fullwidth?: boolean;
     id: string;

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

@@ -3,10 +3,11 @@
  * Lives in shared-types so both `@oslokommune/punkt-elements` and
  * `@oslokommune/punkt-react` can re-export the same canonical type.
  */
-export type TSelectOption = {
+export interface IPktSelectOption {
     value: string;
     label: string;
     selected?: boolean;
     disabled?: boolean;
     hidden?: boolean;
-};
+}
+export type TSelectOption = IPktSelectOption;

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

@@ -16,3 +16,7 @@ export type TSize5 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
  * Full 7-level size scale
  */
 export type TSize7 = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+/**
+ * Sizes used in our input components
+ */
+export type TPktInputSize = 'xsmall' | 'small' | 'medium';

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

@@ -1,9 +1,3 @@
-/**
- * timepicker.ts
- *
- * Type definitions for the timepicker component.
- * Used by both Elements and React implementations.
- */
 /**
  * Translation strings for the timepicker component.
  * Matches the shape of the `timepicker` key in no.json.

package/dist/shared-utils/datepicker-utils.d.ts

@@ -1,3 +1,4 @@
+import type { TPktInputSize } from '../shared-types/size';
 /**
  * Shared datepicker utility functions used by both Elements and React packages.
  * Only framework-agnostic functions belong here.
@@ -23,11 +24,11 @@ export declare const filterDates: (dates: string[], min?: string | null, max?: s
 /**
  * Generates input CSS classes for datepicker.
  */
-export declare const getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
+export declare const getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string, inputSize?: TPktInputSize) => Record<string, boolean>;
 /**
  * Generates button CSS classes for calendar toggle button.
  */
-export declare const getDatepickerButtonClasses: () => Record<string, boolean>;
+export declare const getDatepickerButtonClasses: (inputSize?: TPktInputSize) => Record<string, boolean>;
 /**
  * Generates range label CSS classes.
  */
@@ -62,8 +63,8 @@ declare const _default: {
     validateRangeOrder: (values: string[]) => boolean;
     sortDates: (dates: string[]) => string[];
     filterDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
-    getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
-    getDatepickerButtonClasses: () => Record<string, boolean>;
+    getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string, inputSize?: TPktInputSize) => Record<string, boolean>;
+    getDatepickerButtonClasses: (inputSize?: TPktInputSize) => Record<string, boolean>;
     getRangeLabelClasses: (showRangeLabels: boolean) => Record<string, boolean>;
     processDateSelection: (detail: string | string[], multiple: boolean, range: boolean) => string;
     handleCalendarPosition: (popup: HTMLElement | null, input: HTMLElement | null, hasCounter?: boolean) => void;

package/dist/shared-utils/fileupload/focus-trap.d.ts

@@ -1,12 +1,6 @@
 /**
- * Build a list of focusable elements inside a container (same selector used by
- * Lit and React fileupload preview modals). Hidden elements are filtered out.
+ * Re-export of the generic focus-trap helpers, kept here for backwards
+ * compatibility with existing `shared-utils/fileupload` imports. The canonical
+ * implementation now lives in `shared-utils/focus-trap`.
  */
-export declare function getFocusableElements(container: HTMLElement | null | undefined): HTMLElement[];
-/**
- * Keyboard handler that wraps Tab / Shift-Tab focus around the first and last
- * focusable elements inside a container. Returns `true` if the event was handled.
- *
- * Call from a `keydown` listener on the modal root.
- */
-export declare function trapTabInside(event: KeyboardEvent, container: HTMLElement | null | undefined): boolean;
+export { getFocusableElements, trapTabInside } from '../focus-trap';

package/dist/shared-utils/focus-trap/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Build a list of focusable elements inside a container (same selector used by
+ * the fileupload preview modals and the global header mega menu). Hidden
+ * elements are filtered out.
+ */
+export declare function getFocusableElements(container: HTMLElement | null | undefined): HTMLElement[];
+/**
+ * Like {@link getFocusableElements}, but descends open shadow roots, treats a
+ * native `<summary>` as focusable, and skips content hidden inside a collapsed
+ * `<details>`. Returned in flattened tree order. Use this when the container may
+ * hold web components or `<details>` accordions (e.g. the header mega menu).
+ */
+export declare function getFocusableElementsDeep(container: HTMLElement | null | undefined): HTMLElement[];
+/** Resolve the genuinely focused element, piercing nested open shadow roots. */
+export declare function getDeepActiveElement(doc?: Document): HTMLElement | null;
+/**
+ * Keyboard handler that wraps Tab / Shift-Tab focus around the first and last
+ * focusable elements inside a container. Returns `true` if the event was handled.
+ *
+ * Call from a `keydown` listener on the modal root.
+ */
+export declare function trapTabInside(event: KeyboardEvent, container: HTMLElement | null | undefined): boolean;

package/dist/shared-utils/{header-menu → header-footer}/example-data.d.ts

@@ -1,9 +1,10 @@
-import type { THeaderFooterApi } from '../../shared-types/header-menu';
+import type { THeaderFooterApi } from '../../shared-types/header-footer';
 /**
  * Example header/footer payload used by the dev/demo pages in both
- * Punkt Elements and Punkt React. Mirrors the live Oslo kommune
- * payload closely enough to exercise every region of the mega menu
- * (services grid, four section columns, footer + social links).
+ * Punkt Elements and Punkt React. Verbatim copy of the live Oslo
+ * kommune payload from
+ * https://cdn.web.oslo.kommune.no/header-footer/header-footer.json
+ * (hentet 2026-07-06).
  *
  * Tests use focused per-test fixtures with smaller shapes — this
  * dataset is for visual demos only.

package/dist/shared-utils/header-footer/external-domain.d.ts

@@ -0,0 +1,26 @@
+/**
+ * External-link labelling for the global footer.
+ *
+ * Punkt's link-labelling guidance (punkt.oslo.kommune.no/god-praksis/merking-av-lenker/)
+ * prefers spelling out the destination domain in parentheses after the link
+ * text — "Ledige stillinger (webcruiter.com)" — over an external-link icon.
+ */
+/**
+ * Return the top domain of an absolute http(s) URL, or `undefined` for
+ * relative URLs, fragments, and non-web schemes (`mailto:`, `tel:`).
+ * Unlike `getExternalDomainLabel` this does no internal-host check — use
+ * it when the consumer has explicitly flagged the link as external.
+ */
+export declare function getLinkDomainLabel(url: string | undefined): string | undefined;
+/**
+ * Return the top domain to display after an external link's text, or
+ * `undefined` when the link needs no label:
+ *
+ * - relative URLs and fragments (`/jobb`, `#cb-trigger`) — same site
+ * - non-http(s) schemes (`mailto:`, `tel:`) — not web navigation
+ * - hosts on `oslo.kommune.no` (or a subdomain) — internal
+ *
+ * `internalHost` can widen what counts as internal, e.g. for consumers
+ * hosting the payload themselves.
+ */
+export declare function getExternalDomainLabel(url: string | undefined, internalHost?: string): string | undefined;

package/dist/shared-utils/{header-menu → header-footer}/fetch-header-footer-data.d.ts

@@ -1,5 +1,7 @@
-import { DEFAULT_HEADER_FOOTER_URL, type THeaderFooterApi } from '../../shared-types/header-menu';
+import { DEFAULT_HEADER_FOOTER_URL, type THeaderFooterApi } from '../../shared-types/header-footer';
 export { DEFAULT_HEADER_FOOTER_URL };
+/** Clear the shared payload cache. Intended for tests. */
+export declare function resetHeaderFooterDataCache(): void;
 /**
  * Fetch and parse the Oslo kommune header/footer JSON payload.
  *
@@ -7,6 +9,8 @@ export { DEFAULT_HEADER_FOOTER_URL };
  * for surfacing or hiding errors — the Lit element, for example, hides
  * the menu and dispatches a `data-error` event.
  *
- * `signal` lets callers abort the fetch when the component disconnects.
+ * `signal` lets callers abort their own wait when the component
+ * disconnects; the underlying request is shared and keeps running for
+ * any other component awaiting the same URL.
  */
 export declare function fetchHeaderFooterData<IconType = string>(url?: string, signal?: AbortSignal): Promise<THeaderFooterApi<IconType>>;

package/dist/shared-utils/{header-menu → header-footer}/index.d.ts

@@ -7,5 +7,6 @@
  */
 export { ICON_MAP_ODS_TO_PUNKT, mapOdsIcon, deriveSocialIcon } from './icon-map';
 export { selectLocaleData, selectMegamenu } from './select-megamenu';
-export { DEFAULT_HEADER_FOOTER_URL, fetchHeaderFooterData, } from './fetch-header-footer-data';
+export { getExternalDomainLabel, getLinkDomainLabel } from './external-domain';
+export { DEFAULT_HEADER_FOOTER_URL, fetchHeaderFooterData, resetHeaderFooterDataCache, } from './fetch-header-footer-data';
 export { EXAMPLE_HEADER_FOOTER_DATA } from './example-data';

package/dist/shared-utils/{header-menu → header-footer}/select-megamenu.d.ts

@@ -1,4 +1,4 @@
-import type { IHeaderFooterLocaleData, IMegaMenu, THeaderFooterApi, THeaderMenuLocale } from '../../shared-types/header-menu';
+import type { IHeaderFooterLocaleData, IMegaMenu, THeaderFooterApi, THeaderMenuLocale } from '../../shared-types/header-footer';
 /**
  * Pick the locale slice from a header/footer payload. Falls back to
  * `nb-NO` when the requested locale is missing — the same fallback the

package/dist/shared-utils/scroll-lock/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared body scroll-lock used by every overlay in the design system (modal,
+ * service/global header menus, search and user dropdowns).
+ *
+ * Strategy: an iOS-safe `position: fixed` lock — `overflow: hidden` alone is
+ * ignored by iOS Safari. The current scroll position is saved, the body is
+ * pinned, scrollbar width is reserved to avoid a layout shift, and the scroll
+ * position is restored on release.
+ *
+ * Reference-counted so several open overlays don't unlock the page when one of
+ * them closes. Each caller holds a token (see {@link createScrollLockToken}) so
+ * repeated lock/unlock calls from the same source are idempotent — only the
+ * first lock and the last unlock touch the DOM.
+ */
+export interface ScrollLockToken {
+    locked: boolean;
+}
+export declare const createScrollLockToken: () => ScrollLockToken;
+/**
+ * Lock or unlock body scroll for a single source. Pass a token created with
+ * {@link createScrollLockToken} so the call is idempotent — locking an already
+ * locked token (or unlocking an unlocked one) is a no-op.
+ */
+export declare const setScrollLock: (token: ScrollLockToken, shouldLock: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.26.5",
+  "version": "17.0.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": "^16.26.2",
-    "@oslokommune/punkt-css": "^16.26.3",
+    "@oslokommune/punkt-assets": "^17.0.0",
+    "@oslokommune/punkt-css": "^17.0.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -101,5 +101,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0a1e6fef1813b2de00696cbdd075f060fdc1e22c"
+  "gitHead": "16ef60f40da1a44e59bb72380712e4636768e2c5"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -76,6 +76,57 @@ describe('PktAccordion', () => {
     expect(ref.current?.tagName).toBe('DIV')
     expect(ref.current).toHaveClass('pkt-accordion')
   })
+
+  test('propagates plus-minus skin to items', () => {
+    const { container } = render(
+      <PktAccordion skin="plus-minus">
+        <PktAccordionItem title="Title" id="item1">
+          Content
+        </PktAccordionItem>
+      </PktAccordion>,
+    )
+
+    expect(container.querySelector('.pkt-accordion-item__icon--plus')).toBeInTheDocument()
+    expect(container.querySelector('.pkt-accordion-item__icon--minus')).toBeInTheDocument()
+    expect(container.querySelector('[name="chevron-thin-down"]')).not.toBeInTheDocument()
+  })
+
+  test('updates item icons when skin changes', () => {
+    const { container, rerender } = render(
+      <PktAccordion skin="outlined">
+        <PktAccordionItem title="Title" id="item1">
+          Content
+        </PktAccordionItem>
+      </PktAccordion>,
+    )
+
+    expect(container.querySelector('[name="chevron-thin-down"]')).toBeInTheDocument()
+    expect(container.querySelector('.pkt-accordion-item__icon--plus')).not.toBeInTheDocument()
+
+    rerender(
+      <PktAccordion skin="plus-minus">
+        <PktAccordionItem title="Title" id="item1">
+          Content
+        </PktAccordionItem>
+      </PktAccordion>,
+    )
+
+    expect(container.querySelector('[name="chevron-thin-down"]')).not.toBeInTheDocument()
+    expect(container.querySelector('.pkt-accordion-item__icon--plus')).toBeInTheDocument()
+  })
+
+  test('item skin prop overrides accordion skin', () => {
+    const { container } = render(
+      <PktAccordion skin="plus-minus">
+        <PktAccordionItem title="Title" id="item1" skin="outlined">
+          Content
+        </PktAccordionItem>
+      </PktAccordion>,
+    )
+
+    expect(container.querySelector('[name="chevron-thin-down"]')).toBeInTheDocument()
+    expect(container.querySelector('.pkt-accordion-item__icon--plus')).not.toBeInTheDocument()
+  })
 })
 
 describe('PktAccordionItem', () => {

package/src/components/accordion/Accordion.tsx

@@ -20,8 +20,8 @@ export interface IPktAccordion {
   className?: string
 }
 
-// Send name som context til AccordionItem-children
-const AccordionContext = createContext<{ name?: string }>({})
+// Send name og skin som context til AccordionItem-children
+const AccordionContext = createContext<{ name?: string; skin?: TPktAccordionSkin }>({})
 
 export const useAccordionContext = () => useContext(AccordionContext)
 
@@ -37,7 +37,7 @@ export const PktAccordion = forwardRef<HTMLDivElement, IPktAccordion>(
       .join(' ')
 
     return (
-      <AccordionContext.Provider value={{ name }}>
+      <AccordionContext.Provider value={{ name, skin }}>
         <div
           ref={ref}
           className={accordionClasses}

package/src/components/accordion/AccordionItem.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { forwardRef, type MouseEvent, type ReactNode, type SyntheticEvent,useEffect, useState } from 'react'
+import { forwardRef, type MouseEvent, type ReactNode, type SyntheticEvent, useState } from 'react'
 import type { TAccordionSkin } from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
@@ -40,20 +40,17 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
     ref,
   ) => {
     const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen)
-    const { name: contextName } = useAccordionContext()
+    const { name: contextName, skin: contextSkin } = useAccordionContext()
 
     // Bruk name fra props eller fra context
     const actualName = name || contextName
 
+    // Bruk skin fra props eller fra context
+    const actualSkin = skin || contextSkin
+
     // Bruk controlled isOpen om prop, ellers bruk intern state
     const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen
 
-    useEffect(() => {
-      if (controlledIsOpen === undefined) {
-        setInternalIsOpen(defaultOpen)
-      }
-    }, [defaultOpen, controlledIsOpen])
-
     const handleToggle = (e: SyntheticEvent<HTMLDetailsElement>) => {
       const detailsElement = e.currentTarget
       const newOpenState = detailsElement.open
@@ -96,7 +93,7 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
       >
         <summary className="pkt-accordion-item__title" id={`pkt-accordion-item-summary-${id}`}>
           {title}
-          {skin === 'plus-minus' ? (
+          {actualSkin === 'plus-minus' ? (
             <>
               <PktIcon
                 name="plus-sign"
@@ -110,11 +107,7 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
               />
             </>
           ) : (
-            <PktIcon
-              name="chevron-thin-down"
-              className="pkt-accordion-item__icon"
-              aria-hidden="true"
-            />
+            <PktIcon name="chevron-thin-down" className="pkt-accordion-item__icon" aria-hidden="true" />
           )}
         </summary>
         <div className="pkt-accordion-item__content" id={`pkt-accordion-item__content-${id}`} role="region">