@oslokommune/punkt-elements 13.21.0 → 14.0.0

package/CHANGELOG.md

@@ -5,6 +5,67 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [14.0.0](https://github.com/oslokommune/punkt/compare/13.22.0...14.0.0) (2026-02-02)
+
+### ⚠ BREAKING CHANGES
+* Header (Service) (#3192) Nå også som custom element!. BREAKING CHANGE: Fjernet 'logIn' event (kun 'logOut' støttes nå)
+  BREAKING CHANGE: Erstattet 'fixed' prop med 'position' (verdier: 'fixed' | 'relative', default: 'fixed')
+  BREAKING CHANGE: Erstattet 'scrollToHide' prop med 'scrollBehavior' (verdier: 'hide' | 'none', default: 'hide')
+  BREAKING CHANGE: Erstattet 'showLogOutButton' med 'logOutButtonPlacement' (verdier: 'userMenu' | 'header' | 'both' | 'none', default: 'none')
+  BREAKING CHANGE: Fjernet 'showMenuButton' prop
+  BREAKING CHANGE: Fjernet 'user.shortname' fra user-objektet
+  BREAKING CHANGE: Fjernet 'representing.shortname' fra representing-objektet
+  BREAKING CHANGE: Endret 'userMenu.items.target' type fra 'string' til 'string | function'
+  BREAKING CHANGE: Utdatert 'userMenuFooter' og 'userOptions' props (bruk 'userMenu' i stedet)
+  BREAKING CHANGE: Fjernet default verdi for 'logoLink' (var `https://www.oslo.kommune.no/`)
+  
+  NYE FEATURES:
+  - Lagt til søkefunksjonalitet med props: 'showSearch', 'searchPlaceholder', 'searchValue'
+  - Nye events: 'onSearch' og 'onSearchChange' for søkeinteraksjon
+  - Nye events: 'logoClick' og 'serviceClick' for klikkhåndtering
+  - Nye React-props: 'logoClick' og 'serviceClick' callbacks
+  - Lagt til 'serviceLink' prop for tjenestenavnlenke
+  - Lagt til 'hideLogo' prop for å skjule Oslo-logoen
+  - Lagt til 'compact' prop for kompakt header-høyde
+  - Lagt til 'mobileBreakpoint' prop (default: 768px) for mobil-layout
+  - Lagt til 'tabletBreakpoint' prop (default: 1280px) for tablet-layout
+  - Lagt til 'openedMenu' prop for å kontrollere hvilken meny som er åpen ved oppstart
+  
+  FUNKSJONELLE ENDRINGER:
+  - Alle events har nå 'attribute' felt for custom element-støtte
+  - Forbedret type-dokumentasjon for 'user.lastLoggedIn' (string | Date)
+  - Forbedret type-dokumentasjon for 'representing.orgNumber' (string | number)
+
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [13.22.0](https://github.com/oslokommune/punkt/compare/13.21.0...13.22.0) (2026-01-30)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.21.0](https://github.com/oslokommune/punkt/compare/13.20.0...13.21.0) (2026-01-30)
 
 ### ⚠ BREAKING CHANGES

package/dist/{card-VdZNKsoO.js → card-0F02tcJV.js}

@@ -77,6 +77,7 @@ let a = class extends u {
               .level=${this.headinglevel || 3}
               size="medium"
               nospacing
+              weight="regular"
             >
               ${this.heading}
             </pkt-heading>
@@ -90,6 +91,7 @@ let a = class extends u {
               class="pkt-card__link-heading pkt-card__heading"
               .level=${this.headinglevel || 3}
               size="medium"
+              weight="regular"
               nospacing
             >
               <a

package/dist/{card-BF2QqCMC.cjs → card-BAoH1g6O.cjs}

@@ -1,4 +1,4 @@
-"use strict";const p=require("./class-map-C_erArZz.cjs"),h=require("./if-defined-Bc9-_I01.cjs"),t=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-BFa5Utho.cjs");require("./icon-BGuizDwk.cjs");require("./tag-BkuJjOy7.cjs");require("./heading-Dv_cH6N1.cjs");const k={layout:{default:"vertical"},skin:{type:["outlined","outlined-beige","gray","blue","beige","green"],default:"outlined"},padding:{default:"default"}},o={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(i,a,s,n)=>{for(var r=n>1?void 0:n?m(a,s):a,d=i.length-1,l;d>=0;d--)(l=i[d])&&(r=(n?l(a,s,r):l(r))||r);return n&&r&&u(a,s,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=o.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=o.props.padding.default,this.skin=o.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,d;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},s=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),n=((d=this.ariaLabel)==null?void 0:d.trim())||(this.heading?this.heading:"kort");return t.x`
+"use strict";const p=require("./class-map-C_erArZz.cjs"),h=require("./if-defined-Bc9-_I01.cjs"),t=require("./element-CJ_QKaki.cjs"),c=require("./pkt-slot-controller-BzddBp7z.cjs"),g=require("./ref-BFa5Utho.cjs");require("./icon-BGuizDwk.cjs");require("./tag-BkuJjOy7.cjs");require("./heading-Dv_cH6N1.cjs");const k={layout:{default:"vertical"},skin:{type:["outlined","outlined-beige","gray","blue","beige","green"],default:"outlined"},padding:{default:"default"}},o={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(i,a,s,n)=>{for(var r=n>1?void 0:n?m(a,s):a,d=i.length-1,l;d>=0;d--)(l=i[d])&&(r=(n?l(a,s,r):l(r))||r);return n&&r&&u(a,s,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=g.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=o.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=o.props.padding.default,this.skin=o.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new c.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,d;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},s=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),n=((d=this.ariaLabel)==null?void 0:d.trim())||(this.heading?this.heading:"kort");return t.x`
       <article
         class=${p.e(a)}
         aria-label=${h.o(this.clickCardLink?s:n)}
@@ -25,6 +25,7 @@
               .level=${this.headinglevel||3}
               size="medium"
               nospacing
+              weight="regular"
             >
               ${this.heading}
             </pkt-heading>
@@ -35,6 +36,7 @@
               class="pkt-card__link-heading pkt-card__heading"
               .level=${this.headinglevel||3}
               size="medium"
+              weight="regular"
               nospacing
             >
               <a
@@ -76,7 +78,7 @@
             </div>
           `:t.E}
     `}renderSlot(){return t.x`
-      ${this.defaultSlot&&t.x`<section class="pkt-card__content" ${c.n(this.defaultSlot)}></section>`}
+      ${this.defaultSlot&&t.x`<section class="pkt-card__content" ${g.n(this.defaultSlot)}></section>`}
     `}renderMetadata(){return t.x`
       ${this.metaLead||this.metaTrail?t.x`
             <footer class="pkt-card__metadata">

package/dist/header.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/index.d.ts

@@ -11,8 +11,14 @@ declare type Booleanish = boolean | 'true' | 'false';
 
 declare type Booleanish_2 = boolean | 'true' | 'false';
 
+/**
+ * Booleanish type that accepts boolean or string "true"/"false"
+ * This allows attributes to be set as strings in HTML
+ */
 declare type Booleanish_3 = boolean | 'true' | 'false';
 
+declare type Booleanish_4 = boolean | 'true' | 'false';
+
 /**
  * We define all props as optional. Native HTML attributes are optional by default,
  * but the TS definition require either null or value. This way we can support showing a value as optional
@@ -207,6 +213,95 @@ export declare interface IPktConsent {
     triggerText?: string | null;
 }
 
+/**
+ * Interface for the Header component props
+ */
+export declare interface IPktHeader {
+    /** Hide the Oslo logo */
+    hideLogo?: Booleanish_3;
+    /** Logo link URL */
+    logoLink?: string;
+    /** Service name displayed in the header */
+    serviceName?: string;
+    /** Service link URL */
+    serviceLink?: string;
+    /** Use compact header height */
+    compact?: Booleanish_3;
+    /** Header position. 'fixed' fixes to top of viewport, 'relative' follows document flow. Default: 'fixed' */
+    position?: THeaderPosition;
+    /** Scroll behavior. 'hide' hides header on scroll down, 'none' keeps it visible. Default: 'hide' */
+    scrollBehavior?: THeaderScrollBehavior;
+    /** User object for logged-in user */
+    user?: IPktHeaderUser;
+    /** User menu items */
+    userMenu?: IPktHeaderUserMenuItem[];
+    /** Representation object */
+    representing?: IPktHeaderRepresenting;
+    /** Allow user to change representation */
+    canChangeRepresentation?: Booleanish_3;
+    /** Logout button placement */
+    logOutButtonPlacement?: TPktHeaderLogOutButtonPlacement;
+    /** Whether there's a logout handler attached (required for logout button to show) */
+    hasLogOut?: Booleanish_3;
+    /** Show search field */
+    showSearch?: Booleanish_3;
+    /** Search field placeholder */
+    searchPlaceholder?: string;
+    /** Controlled search value */
+    searchValue?: string;
+    /** Custom breakpoint for responsive behavior in pixels. Default: 1024 */
+    mobileBreakpoint?: number;
+    /** Custom breakpoint for tablet responsive behavior in pixels. Default: 1280 */
+    tabletBreakpoint?: number;
+    /** Which menu is initially open */
+    openedMenu?: TPktHeaderMenu;
+}
+
+/**
+ * Representation object containing information about the organization/entity being represented
+ */
+export declare interface IPktHeaderRepresenting {
+    /** Name of the organization or entity */
+    name: string;
+    /** Short name or initials (deprecated) */
+    shortname?: string;
+    /** Organization number */
+    orgNumber?: string | number;
+}
+
+/**
+ * User object containing information about the logged-in user
+ */
+export declare interface IPktHeaderUser {
+    /** Full name of the user */
+    name: string;
+    /** Short name or initials (deprecated) */
+    shortname?: string;
+    /** Last login timestamp (ISO string or Date) */
+    lastLoggedIn?: Date | string;
+}
+
+declare interface IPktHeaderUserMenu {
+    user: IPktHeaderUser;
+    formattedLastLoggedIn?: string;
+    representing?: IPktHeaderRepresenting;
+    userMenu?: IPktHeaderUserMenuItem[];
+    canChangeRepresentation?: Booleanish_3;
+    logoutOnClick?: Booleanish_3;
+}
+
+/**
+ * Menu item in the user menu
+ */
+export declare interface IPktHeaderUserMenuItem {
+    /** Icon name to display */
+    iconName?: PktIconName;
+    /** Text for the menu item */
+    title: string;
+    /** Link URL or click handler function */
+    target: string | (() => void);
+}
+
 export declare interface IPktHeading {
     size?: TPktHeadingSize;
     level?: TPktHeadingLevel;
@@ -899,6 +994,149 @@ declare class PktElement<T = {}> extends PktShadowElement<T> {
     createRenderRoot(): this;
 }
 
+/**
+ * PktHeader - Main header component for Oslo kommune services
+ *
+ * This component provides a complete header solution with:
+ * - Logo and service name
+ * - User menu with login/logout functionality
+ * - Search functionality
+ * - Responsive mobile menu
+ * - Fixed positioning with scroll-to-hide
+ *
+ * TODO: Add `type` prop to switch between `service` and `global` header types
+ */
+export declare class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
+    defaultSlot: Ref<HTMLElement>;
+    slotController: PktSlotController;
+    serviceName?: string;
+    serviceLink?: string;
+    logoLink?: string;
+    searchPlaceholder: string;
+    searchValue: string;
+    mobileBreakpoint: number;
+    tabletBreakpoint: number;
+    openedMenu: TPktHeaderMenu;
+    logOutButtonPlacement: TPktHeaderLogOutButtonPlacement;
+    position: THeaderPosition;
+    scrollBehavior: THeaderScrollBehavior;
+    hideLogo: Booleanish_3;
+    compact: Booleanish_3;
+    showSearch: Booleanish_3;
+    canChangeRepresentation: Booleanish_3;
+    hasLogOut: Booleanish_3;
+    user?: IPktHeaderUser;
+    userMenu?: IPktHeaderUserMenuItem[];
+    representing?: IPktHeaderRepresenting;
+    userMenuFooter?: IPktHeaderUserMenuItem[];
+    userOptions?: IPktHeaderUserMenuItem[];
+    constructor();
+    firstUpdated(changedProperties: PropertyValues): void;
+    private emitDeprecationWarnings;
+    /**
+     * Convert deprecated props to new props
+     */
+    private get effectiveUserMenu();
+    render(): TemplateResult<1>;
+}
+
+export declare class PktHeaderService extends PktElement<IPktHeader> implements IPktHeader {
+    serviceName?: string;
+    serviceLink?: string;
+    logoLink?: string;
+    searchPlaceholder: string;
+    searchValue: string;
+    mobileBreakpoint: number;
+    tabletBreakpoint: number;
+    openedMenu: TPktHeaderMenu;
+    logOutButtonPlacement: TPktHeaderLogOutButtonPlacement;
+    position: THeaderPosition;
+    scrollBehavior: THeaderScrollBehavior;
+    hideLogo: Booleanish_3;
+    compact: Booleanish_3;
+    showSearch: Booleanish_3;
+    canChangeRepresentation: Booleanish_3;
+    hasLogOut: Booleanish_3;
+    user?: IPktHeaderUser;
+    userMenu?: IPktHeaderUserMenuItem[];
+    representing?: IPktHeaderRepresenting;
+    private isMobile;
+    private isTablet;
+    private openMenu;
+    private isHidden;
+    private componentWidth;
+    private hasSlotContent;
+    private alignSlotRight;
+    private alignSearchRight;
+    defaultSlot: Ref<HTMLElement>;
+    slotController: PktSlotController;
+    private headerRef;
+    private userContainerRef;
+    private slotContainerRef;
+    private searchContainerRef;
+    private slotContentRef;
+    private searchMenuRef;
+    private resizeObserver?;
+    private lastScrollPosition;
+    private savedScrollY;
+    private lastFocusedElement;
+    private shouldRestoreFocus;
+    constructor();
+    updateSlots(filledSlots: Set<string | null | undefined>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private updateIsMobile;
+    private updateIsTablet;
+    private updateScrollLock;
+    private lockScroll;
+    private unlockScroll;
+    private setupScrollListener;
+    private handleScroll;
+    private handleClickOutside;
+    private handleFocusOut;
+    private handleEscapeKey;
+    private restoreFocus;
+    private checkDropdownAlignment;
+    private handleMenuToggle;
+    private handleLogoClick;
+    private handleServiceClick;
+    private handleLogout;
+    private handleSearch;
+    private handleSearchChange;
+    private handleSearchInputChange;
+    private handleSearchKeyDown;
+    private get formattedLastLoggedIn();
+    private get isFixed();
+    private get shouldHideOnScroll();
+    private get showLogoutInHeader();
+    private get showLogoutInUserMenu();
+    private renderLogo;
+    private renderServiceName;
+    private renderSlotContainer;
+    private renderSearch;
+    private renderUserButton;
+    private renderHeader;
+    render(): TemplateResult<1>;
+}
+
+export declare class PktHeaderUserMenu extends PktElement<IPktHeaderUserMenu> implements IPktHeaderUserMenu {
+    user: IPktHeaderUser;
+    formattedLastLoggedIn?: string;
+    representing?: IPktHeaderRepresenting;
+    userMenu?: IPktHeaderUserMenuItem[];
+    canChangeRepresentation: Booleanish_3;
+    logoutOnClick: Booleanish_3;
+    private handleChangeRepresentation;
+    private handleLogout;
+    private handleMenuItemClick;
+    private renderLinkOrButton;
+    private renderLinkSection;
+    render(): TemplateResult<1>;
+}
+
 export declare class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
     size: TPktHeadingSize | undefined;
     level: TPktHeadingLevel;
@@ -1026,7 +1264,7 @@ export declare class PktInputWrapper extends PktElement<Props_6> {
     ariaDescribedby: string | undefined;
     hasFieldset: boolean;
     role: string | null;
-    useWrapper: Booleanish_3;
+    useWrapper: Booleanish_4;
     protected updated(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
     private toggleDropdown;
@@ -1460,6 +1698,16 @@ declare type TCounterPosition = 'top' | 'bottom';
 
 declare type TDay = `${number}${number}`;
 
+/**
+ * Position options for header
+ */
+declare type THeaderPosition = 'fixed' | 'relative';
+
+/**
+ * Scroll behavior options for header
+ */
+declare type THeaderScrollBehavior = 'hide' | 'none';
+
 declare type TISODate = `${TYear}-${TMonth}-${TDay}`;
 
 declare type TLayout = 'vertical' | 'horizontal';
@@ -1488,6 +1736,16 @@ export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right
 
 export declare type TPktComboboxTagPlacement = 'inside' | 'outside';
 
+/**
+ * Type for logout button placement
+ */
+export declare type TPktHeaderLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none';
+
+/**
+ * Type for which menu is currently open
+ */
+export declare type TPktHeaderMenu = 'none' | 'slot' | 'search' | 'user';
+
 export declare type TPktHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export declare type TPktHeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

package/dist/pkt-card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-BF2QqCMC.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-BAoH1g6O.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;

package/dist/pkt-card.js

@@ -1,4 +1,4 @@
-import { P as a } from "./card-VdZNKsoO.js";
+import { P as a } from "./card-0F02tcJV.js";
 const r = a;
 export {
   a as PktCard,