@oslokommune/punkt-elements 16.8.2 → 16.9.1

package/CHANGELOG.md

@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.9.1](https://github.com/oslokommune/punkt/compare/16.9.0...16.9.1) (2026-04-22)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [16.9.0](https://github.com/oslokommune/punkt/compare/16.8.3...16.9.0) (2026-04-21)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.8.2](https://github.com/oslokommune/punkt/compare/16.8.1...16.8.2) (2026-04-21)
 
 ### ⚠ BREAKING CHANGES

package/dist/accordion.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/alert.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/backlink.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/base-elements/element-with-slot.d.ts

@@ -0,0 +1,21 @@
+import { PktElement } from './element';
+/**
+ * Base class for Punkt light DOM elements that use the slotContent directive.
+ * Extends PktElement with slot content collection and distribution.
+ *
+ * Use this instead of PktElement when the component's template uses slotContent().
+ * @extends PktElement
+ */
+export declare class PktElementWithSlot<T = {}> extends PktElement<T> {
+    /**
+     * Pre-collect children before Lit's first render clears them.
+     * This ensures slotContent() has access to the original children.
+     */
+    connectedCallback(): void;
+    /**
+     * Checks if a slot has content distributed to it via the slotContent directive.
+     *
+     * @param slotName - Name of the slot. Omit for the default slot.
+     */
+    hasSlotContent(slotName?: string): boolean;
+}

package/dist/base-elements/element.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import { ElementProps } from '../types/typeUtils';
+type Props = ElementProps<PktElement, 'strings' | 'role'>;
+/**
+ * Base class for Punkt shadow DOM elements
+ * @extends LitElement
+ */
+export declare class PktShadowElement<T = {}> extends LitElement {
+    [key: string]: any;
+    strings: any;
+    role: string | null;
+    /**
+     * Here to support prop typing in Vue
+     */
+    $props: T & Props;
+    /**
+     * Add support for Hot Module Reloading in dev mode
+     */
+    hotReplacedCallback(): void;
+}
+/**
+ * Base class for Punkt light DOM elements
+ * This class extends PktShadowElement but renders in light DOM instead of shadow DOM
+ * @extends PktShadowElement
+ */
+export declare class PktElement<T = {}> extends PktShadowElement<T> {
+    /**
+     * Make sure the component renders in light DOM instead of shadow DOM
+     */
+    createRenderRoot(): this;
+}
+export {};

package/dist/base-elements/input-element.d.ts

@@ -0,0 +1,173 @@
+import { PropertyValues } from 'lit';
+import { Booleanish } from '../shared-types';
+import { ElementProps } from '../types/typeUtils';
+import { PktOptionsSlotController } from '../controllers/pkt-options-controller';
+import { PktElementWithSlot } from './element-with-slot';
+/**
+ * Base interface for input options used in select, combobox, etc.
+ */
+export interface PktInputOption {
+    value: string;
+    label?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+}
+type Props = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedBy' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'hasFieldset' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'dataTestid'>;
+/**
+ * Base class for all Punkt input elements
+ * @extends PktElementWithSlot
+ */
+export declare class PktInputElement<T = {}, TOption extends PktInputOption = PktInputOption> extends PktElementWithSlot<Props & T> {
+    static get formAssociated(): boolean;
+    internals: any;
+    form: HTMLFormElement | null;
+    checked?: boolean | string | null;
+    defaultChecked?: boolean;
+    multiple?: boolean;
+    range?: boolean;
+    type?: string;
+    optionsController?: PktOptionsSlotController;
+    _options?: TOption[];
+    defaultValue: string | string[] | null;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    max: string | number | null;
+    maxlength: number | null;
+    min: string | number | null;
+    minlength: number | null;
+    step: number | null;
+    ariaDescribedBy: string | null;
+    ariaLabelledby: string | null;
+    name: string;
+    pattern: string | null;
+    placeholder: string | null;
+    id: string;
+    counter: boolean;
+    hasError: boolean;
+    inline: boolean;
+    hasFieldset: boolean;
+    optionalTag: boolean;
+    requiredTag: boolean;
+    skipForwardTestid: boolean;
+    useWrapper: Booleanish;
+    fullwidth: boolean;
+    counterMaxLength: number;
+    errorMessage: string;
+    helptext: string;
+    helptextDropdown: string;
+    helptextDropdownButton: string | null;
+    label: string | null;
+    optionalText: string;
+    requiredText: string;
+    tagText: string | null;
+    dataTestid: string;
+    touched: boolean;
+    constructor();
+    /**
+     * Manages form validation state based on input validity
+     * Called automatically by onChange, but can be called manually if needed
+     *
+     * @param input - The input element to validate (optional)
+     * @protected
+     */
+    protected manageValidity(input?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
+    /**
+     * Updates the form value for this input
+     * Handles both single values and arrays (for multi-select)
+     *
+     * @param value - The value(s) to set in the form
+     * @protected
+     */
+    protected setFormValue(value: string | string[]): void;
+    /**
+     * Coordinates radio button group by unchecking other radios with the same name
+     * Only affects radio inputs within the same form
+     *
+     * @protected
+     */
+    protected coordinateRadioGroup(): void;
+    /**
+     * Updates checked state and form value for checkbox and radio inputs
+     * Triggers this when you want to set the value of the radio or checkbox input to the form
+     * Do not use valueChanged or onChange for radios and checkboxes!
+     *
+     * @param value - The checked state (string 'true'/'false', or boolean)
+     * @protected
+     */
+    protected valueChecked(value: string | boolean | null): void;
+    /**
+     * Called when value changes (text inputs, select, etc.)
+     * Subclasses can override to add custom value transformation logic
+     *
+     * @param value - The new value
+     * @param _old - The previous value
+     * @protected
+     * @example
+     * ```typescript
+     * protected valueChanged(value: string, old: string): void {
+     *   const transformed = this.transformValue(value)
+     *   super.valueChanged(transformed, old)
+     * }
+     * ```
+     */
+    protected valueChanged(value: string | string[] | null, _old: string | string[] | null): void;
+    /**
+     * Dispatches change and value-change events
+     *
+     * @param value - The value to include in the event detail
+     * @protected
+     */
+    protected dispatchChangeEvents(value: unknown): void;
+    /**
+     * When input goes from content to no content
+     * @protected
+     */
+    protected clearInputValue(): void;
+    /**
+     * When user enters the input, dispatch focus event
+     * @protected
+     */
+    protected onFocus(): void;
+    /**
+     * When user leaves the input, dispatch blur event
+     * @protected
+     */
+    protected onBlur(): void;
+    /**
+     * Trigger this when user types in the input
+     * @protected
+     */
+    protected onInput(): void;
+    /**
+     * Normalizes value format based on multiple/range settings
+     *
+     * @param value - The value to normalize
+     * @returns Normalized value (array if multiple/range, string otherwise)
+     * @private
+     */
+    private normalizeValue;
+    /**
+     * Validates the input element(s)
+     * @private
+     */
+    private validate;
+    /**
+     * Trigger this when you want to set the value of the input out to the form
+     * Handles value normalization, form updates, validation, and event dispatching
+     *
+     * @param value - The value to set
+     * @protected
+     */
+    protected onChange(value: string | string[]): void;
+    /**
+     * Called when the form is reset
+     * Resets the input to its default state
+     * @protected
+     */
+    protected formResetCallback(): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+}
+export {};

package/dist/base-elements/options-input-element.d.ts

@@ -0,0 +1,73 @@
+import { PktInputElement, PktInputOption } from './input-element';
+import { PktOptionsSlotController } from '../controllers/pkt-options-controller';
+import { ElementProps } from '../types/typeUtils';
+export type { PktInputOption } from './input-element';
+type Props = ElementProps<PktOptionsInputElement, 'options'>;
+/**
+ * Base class for input elements that have options (select, combobox, etc.)
+ * Provides common functionality for managing options from props or slots
+ * @extends PktInputElement
+ */
+export declare abstract class PktOptionsInputElement<T = {}, TOption extends PktInputOption = PktInputOption> extends PktInputElement<Props & T, TOption> {
+    /**
+     * Options passed as a prop
+     * @private
+     */
+    protected _optionsProp: TOption[];
+    /**
+     * Internal state for parsed options
+     * @protected
+     */
+    _options: TOption[];
+    /**
+     * Controller for managing options from slots
+     */
+    optionsController: PktOptionsSlotController;
+    /**
+     * Public getter for options that includes selected state
+     * Override this in subclasses to customize the selected state logic
+     */
+    get options(): TOption[];
+    /**
+     * Public setter for options
+     */
+    set options(value: TOption[]);
+    /**
+     * Determines if an option is selected
+     * Subclasses should override this to implement their selection logic
+     *
+     * @param option - The option to check
+     * @returns True if the option is selected
+     * @protected
+     */
+    protected isOptionSelected(option: TOption): boolean;
+    /**
+     * Finds an option by its value
+     *
+     * @param value - The value to search for
+     * @returns The option if found, undefined otherwise
+     * @protected
+     */
+    protected findOptionByValue(value: string): TOption | undefined;
+    /**
+     * Gets all currently selected options
+     *
+     * @returns Array of selected options
+     * @protected
+     */
+    protected getSelectedOptions(): TOption[];
+    /**
+     * Parses options from either props or slot controller
+     * Call this in connectedCallback to initialize options
+     *
+     * @protected
+     */
+    protected parseOptions(): void;
+    /**
+     * Re-parse options when the component updates
+     * This ensures options stay in sync when they change dynamically
+     *
+     * @protected
+     */
+    protected willUpdate(_changedProperties: Map<PropertyKey, unknown>): void;
+}

package/dist/breadcrumbs.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/button.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/calendar.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/card.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/checkbox.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/combobox.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import { TAccordionSkin } from '../../shared-types';
+export type TPktAccordionSkin = TAccordionSkin;
+export interface IPktAccordion {
+    compact?: boolean;
+    skin?: TPktAccordionSkin;
+    ariaLabelledBy?: string;
+    name?: string;
+}
+export declare class PktAccordion extends LitElement implements IPktAccordion {
+    ariaLabelledBy: string;
+    compact: boolean;
+    skin: TPktAccordionSkin;
+    name: string;
+    updated(changedProperties: Map<string, any>): void;
+    private updateAccordionItemNames;
+    firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export default PktAccordion;

package/dist/components/accordion/accordionitem.d.ts

@@ -0,0 +1,32 @@
+import { PktElementWithSlot } from '../../base-elements/element-with-slot';
+import { PropertyValues } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { TPktAccordionSkin } from './accordion';
+/**
+ * @param toggleProps
+ *
+ * @description Send in an "isOpen" boolean and "onToggleClick" function
+ * to override the automatic toggling
+ */
+export interface IPktAccordionItem {
+    defaultOpen?: boolean;
+    id: string;
+    title: string;
+    skin?: TPktAccordionSkin;
+    compact?: boolean;
+    isOpen?: boolean;
+    name?: string | undefined;
+}
+export declare class PktAccordionItem extends PktElementWithSlot implements IPktAccordionItem {
+    defaultOpen: boolean;
+    title: string;
+    skin: TPktAccordionSkin | undefined;
+    compact: boolean;
+    isOpen: boolean;
+    name: string | undefined;
+    accordionItemRef: Ref<HTMLDivElement>;
+    constructor();
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export default PktAccordionItem;

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,5 @@
+import { default as PktAccordion, IPktAccordion, TPktAccordionSkin } from './accordion';
+import { default as PktAccordionItem, IPktAccordionItem } from './accordionitem';
+export { PktAccordion, PktAccordionItem };
+export type { IPktAccordion, IPktAccordionItem, TPktAccordionSkin };
+export default PktAccordion;

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,30 @@
+import { PropertyValues } from 'lit';
+import { PktElementWithSlot } from '../../base-elements/element-with-slot';
+import { TAriaLive, TAlertSkin } from '../../shared-types';
+export type { TAlertSkin };
+export interface IPktAlert {
+    skin?: TAlertSkin;
+    closeAlert?: boolean;
+    title?: string;
+    date?: string | null;
+    ariaLive?: TAriaLive | null;
+    compact?: boolean;
+    role?: string;
+}
+export declare class PktAlert extends PktElementWithSlot implements IPktAlert {
+    constructor();
+    compact: boolean;
+    title: string;
+    skin: TAlertSkin;
+    ariaLive: TAriaLive;
+    ariaLiveAttr: TAriaLive | null;
+    closeAlert: boolean;
+    date: string | null;
+    role: string;
+    _isClosed: boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private close;
+}

package/dist/components/alert/alert.test.d.ts

@@ -0,0 +1,13 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface AlertTestConfig extends BaseTestConfig {
+    skin?: string;
+    compact?: boolean;
+    title?: string;
+    date?: string;
+    closeAlert?: boolean;
+    ariaLive?: string;
+}
+export declare const createAlertTest: (config?: AlertTestConfig) => Promise<{
+    container: HTMLElement;
+    alert: import('./alert').PktAlert;
+}>;

package/dist/components/alert/index.d.ts

@@ -0,0 +1,3 @@
+import { PktAlert, IPktAlert, TAlertSkin } from './alert';
+export { PktAlert, IPktAlert, TAlertSkin };
+export default PktAlert;

package/dist/components/backlink/backlink.d.ts

@@ -0,0 +1,14 @@
+import { PktElement } from '../../base-elements/element';
+export interface IPktBackLink {
+    href?: string;
+    text?: string;
+    ariaLabel?: string;
+}
+export declare class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLink {
+    href: string;
+    text: string;
+    ariaLabel: string;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export default PktBackLink;

package/dist/components/backlink/backlink.test.d.ts

@@ -0,0 +1,10 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface BacklinkTestConfig extends BaseTestConfig {
+    href?: string;
+    text?: string;
+    ariaLabel?: string;
+}
+export declare const createBacklinkTest: (config?: BacklinkTestConfig) => Promise<{
+    container: HTMLElement;
+    backlink: import('./backlink').PktBackLink;
+}>;

package/dist/components/backlink/index.d.ts

@@ -0,0 +1,4 @@
+import { PktBackLink } from './backlink';
+export type { IPktBackLink } from './backlink';
+export { PktBackLink };
+export default PktBackLink;

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,15 @@
+import { nothing } from 'lit';
+import { PktElement } from '../../base-elements/element';
+export interface IBreadcrumbItem {
+    text: string;
+    href: string;
+}
+export interface IPktBreadcrumbs {
+    breadcrumbs: IBreadcrumbItem[];
+}
+export declare class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
+    breadcrumbs: IBreadcrumbItem[];
+    private handleLinkClick;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+}
+export default PktBreadcrumbs;

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { PktBreadcrumbs } from './breadcrumbs';
+export type { IBreadcrumbItem, IPktBreadcrumbs } from './breadcrumbs';

package/dist/components/button/button.d.ts

@@ -0,0 +1,53 @@
+import { PktElementWithSlot } from '../../base-elements/element-with-slot';
+import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
+import { Booleanish, THTMLButtonType } from '../../shared-types';
+import { PropertyValues } from 'lit';
+export type TPktButtonMode = 'light' | 'dark';
+export type TPktButtonSize = 'small' | 'medium' | 'large';
+export type TPktButtonColor = 'blue' | 'blue-outline' | 'green' | 'green-outline' | 'green-dark' | 'green-dark-outline' | 'beige-light' | 'beige-dark-outline' | 'yellow' | 'yellow-outline' | 'red' | 'red-outline';
+export type TPktButtonSkin = 'primary' | 'secondary' | 'tertiary';
+export type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
+export type TPktButtonState = 'normal' | 'focus' | 'hover' | 'active';
+export type TPktButtonType = THTMLButtonType;
+export interface IPktButton {
+    iconName?: PktIconName;
+    secondIconName?: PktIconName;
+    iconPath?: string;
+    secondIconPath?: string;
+    mode?: TPktButtonMode;
+    size?: TPktButtonSize;
+    fullWidth?: Booleanish;
+    fullWidthOnMobile?: Booleanish;
+    color?: TPktButtonColor;
+    skin?: TPktButtonSkin;
+    variant?: TPktButtonVariant;
+    state?: TPktButtonState;
+    type?: TPktButtonType;
+    isLoading?: Booleanish;
+    disabled?: Booleanish;
+    loadingAnimationPath?: string;
+}
+export declare class PktButton extends PktElementWithSlot<IPktButton> implements IPktButton {
+    iconName: string;
+    secondIconName: string;
+    iconPath: string | undefined;
+    secondIconPath: string | undefined;
+    mode?: TPktButtonMode;
+    size: TPktButtonSize;
+    fullWidth: Booleanish;
+    fullWidthOnMobile: Booleanish;
+    color?: TPktButtonColor;
+    skin: TPktButtonSkin;
+    variant: TPktButtonVariant;
+    state?: TPktButtonState;
+    type: TPktButtonType;
+    form: string | undefined;
+    isLoading: Booleanish;
+    disabled: Booleanish;
+    loadingAnimationPath: string | undefined;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export default PktButton;

package/dist/components/button/button.test.d.ts

@@ -0,0 +1,22 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface ButtonTestConfig extends BaseTestConfig {
+    size?: string;
+    skin?: string;
+    variant?: string;
+    color?: string;
+    type?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    iconName?: string;
+    iconNameSecond?: string;
+    iconPath?: string;
+    secondIconPath?: string;
+    iconPosition?: string;
+    mode?: string;
+    form?: string;
+    content?: string;
+}
+export declare const createButtonTest: (config?: ButtonTestConfig) => Promise<{
+    container: HTMLElement;
+    button: import('./button').PktButton;
+}>;

package/dist/components/button/index.d.ts

@@ -0,0 +1,4 @@
+import { PktButton } from './button';
+export type { IPktButton, TPktButtonMode, TPktButtonSize, TPktButtonColor, TPktButtonSkin, TPktButtonVariant, TPktButtonState, TPktButtonType, } from './button';
+export { PktButton };
+export default PktButton;

package/dist/components/calendar/calendar.accessibility.test.d.ts

@@ -0,0 +1,16 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface CalendarTestConfig extends BaseTestConfig {
+    withcontrols?: boolean;
+    weeknumbers?: boolean;
+    multiple?: boolean;
+    range?: boolean;
+    earliest?: string;
+    latest?: string;
+    currentmonth?: string;
+    excludedates?: string;
+    excludeweekdays?: string;
+}
+export declare const createCalendarTest: (config?: CalendarTestConfig) => Promise<{
+    container: HTMLElement;
+    calendar: import('./calendar').PktCalendar;
+}>;