@oslokommune/punkt-elements 16.8.2 → 16.9.1

package/dist/components/select/select.d.ts

@@ -0,0 +1,48 @@
+import { PropertyValues } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { PktOptionsInputElement } from '../../base-elements/options-input-element';
+export type TSelectOption = {
+    value: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+};
+export interface IPktSelect {
+    options: TSelectOption[];
+    value: string;
+}
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+export declare class PktSelect extends PktOptionsInputElement<{}, TSelectOption> implements IPktSelect {
+    inputRef: Ref<HTMLSelectElement>;
+    value: string;
+    selectedIndex: number | null;
+    selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined;
+    constructor();
+    connectedCallback(): void;
+    add(item: HTMLOptionElement, before?: HTMLOptionElement | number): void;
+    remove(item?: number): void;
+    item(index: number): HTMLOptionElement | null | undefined;
+    namedItem(name: string): HTMLOptionElement | null | undefined;
+    showPicker(): void;
+    attributeChangedCallback(name: string, _old: string, value: string): void;
+    update(changedProperties: PropertyValues): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private returnNumberOrNull;
+}

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

@@ -0,0 +1,21 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+import { IPktSelect } from './select';
+export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
+    id?: string;
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    helptext?: string;
+    fullwidth?: boolean;
+    ariaLabelledby?: string | null;
+    ariaDescribedBy?: string | null;
+    counter?: boolean;
+    inline?: boolean;
+    useWrapper?: boolean | string;
+}
+export declare const createSelectTest: (config?: SelectTestConfig) => Promise<{
+    container: HTMLElement;
+    select: import('./select').PktSelect;
+}>;

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

@@ -0,0 +1,5 @@
+import { default as PktTabs, IPktTabs } from './tabs';
+import { default as PktTabItem, IPktTabItem, TSkin } from './tabitem';
+export { PktTabs, PktTabItem };
+export type { IPktTabs, IPktTabItem, TSkin };
+export default PktTabs;

package/dist/components/tabs/tabitem.d.ts

@@ -0,0 +1,33 @@
+import { PktElementWithSlot } from '../../base-elements/element-with-slot';
+import { Ref } from 'lit/directives/ref.js';
+import { TabsContext } from './tabs-context';
+export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
+export interface IPktTabItem {
+    active?: boolean;
+    disabled?: boolean;
+    href?: string;
+    icon?: string;
+    controls?: string;
+    tag?: string;
+    tagSkin?: TSkin;
+    index?: number;
+}
+export declare class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktTabItem {
+    active: boolean;
+    disabled: boolean;
+    href: string;
+    icon: string;
+    controls: string;
+    tag: string;
+    tagSkin: TSkin;
+    index: number;
+    context?: TabsContext;
+    elementRef: Ref<HTMLAnchorElement | HTMLButtonElement>;
+    constructor();
+    connectedCallback(): void;
+    updated(): void;
+    private handleClick;
+    private handleKeyDown;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export default PktTabItem;

package/dist/components/tabs/tabs-context.d.ts

@@ -0,0 +1,21 @@
+export interface TabsContext {
+    /**
+     * Whether arrow navigation is enabled (computed from arrowNav && !disableArrowNav)
+     */
+    useArrowNav: boolean;
+    /**
+     * Register a tab item with the parent tabs container
+     */
+    registerTab: (element: HTMLElement, index: number, disabled?: boolean) => void;
+    /**
+     * Handle click event from a tab item
+     */
+    handleClick: (index: number) => void;
+    /**
+     * Handle keyboard event from a tab item
+     */
+    handleKeyUp: (event: KeyboardEvent, index: number) => void;
+}
+export declare const tabsContext: {
+    __context__: TabsContext;
+};

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,23 @@
+import { PktElementWithSlot } from '../../base-elements/element-with-slot';
+import { PropertyValues } from 'lit';
+export interface IPktTabs {
+    arrowNav?: boolean;
+    disableArrowNav?: boolean;
+}
+export declare class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
+    arrowNav: boolean;
+    disableArrowNav: boolean;
+    private tabRefs;
+    private disabledMap;
+    private tabCount;
+    private get useArrowNav();
+    private context;
+    updated(changedProperties: PropertyValues): void;
+    private registerTab;
+    private isTabDisabled;
+    private findEnabledIndex;
+    private handleClick;
+    private handleKeyUp;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export default PktTabs;

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

@@ -0,0 +1,4 @@
+import { PktTag } from './tag';
+export { PktTag } from './tag';
+export default PktTag;
+export type { IPktTag, TTagSkin, TTagType } from './tag';

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,44 @@
+import { PropertyValues } from 'lit';
+import { PktElementWithSlot } from '../../base-elements/element-with-slot';
+import { TPktSize } from '../../types/size';
+import { IAriaAttributes, THTMLButtonType } from '../../shared-types';
+import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
+export type TTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey';
+export type TTagType = THTMLButtonType;
+export interface IPktTag {
+    closeTag?: boolean;
+    size?: TPktSize;
+    skin?: TTagSkin;
+    textStyle?: string | null;
+    iconName?: PktIconName;
+    type?: TTagType;
+    ariaLabel?: IAriaAttributes['aria-label'] | null;
+}
+export declare class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
+    constructor();
+    /**
+     * Element attributes
+     */
+    closeTag: boolean;
+    size: TPktSize;
+    skin: TTagSkin;
+    textStyle: string | null;
+    iconName: string | undefined;
+    type: TTagType;
+    ariaLabel: string | null;
+    buttonTabindex: number | undefined;
+    /**
+     * Element state
+     */
+    _isClosed: boolean;
+    _ariaDescription: string | null;
+    /**
+     * Lifecycle
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /**
+     * Element functions
+     */
+    private close;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,8 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+import { IPktTag } from './tag';
+export interface TagTestConfig extends Partial<IPktTag>, BaseTestConfig {
+}
+export declare const createTagTest: (config?: TagTestConfig) => Promise<{
+    container: HTMLElement;
+    tag: import('./tag').PktTag;
+}>;

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

@@ -0,0 +1,3 @@
+import { PktTextarea } from './textarea';
+export { PktTextarea };
+export default PktTextarea;

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,16 @@
+import { PropertyValues } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { PktInputElement } from '../../base-elements/input-element';
+import { ElementProps } from '../../types/typeUtils';
+type Props = ElementProps<PktTextarea, 'autocomplete' | 'rows'>;
+export declare class PktTextarea extends PktInputElement<Props> {
+    inputRef: Ref<HTMLTextAreaElement>;
+    value: string;
+    autocomplete: string;
+    rows: number | null;
+    counterCurrent: number;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,27 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface TextareaTestConfig extends BaseTestConfig {
+    value?: string;
+    autocomplete?: string;
+    rows?: number | null;
+    id?: string;
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    placeholder?: string | null;
+    maxlength?: number | null;
+    minlength?: number | null;
+    hasError?: boolean;
+    errorMessage?: string;
+    helptext?: string;
+    fullwidth?: boolean;
+    counter?: boolean;
+    inline?: boolean;
+    ariaLabelledby?: string | null;
+    ariaDescribedBy?: string | null;
+}
+export declare const createTextareaTest: (config?: TextareaTestConfig) => Promise<{
+    container: HTMLElement;
+    textarea: import('./textarea').PktTextarea;
+}>;

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

@@ -0,0 +1,3 @@
+import { PktTextinput } from './textinput';
+export { PktTextinput };
+export default PktTextinput;

package/dist/components/textinput/textinput.d.ts

@@ -0,0 +1,21 @@
+import { PropertyValues } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { ElementProps } from '../../types/typeUtils';
+import { PktInputElement } from '../../base-elements/input-element';
+type Props = ElementProps<PktTextinput, 'value' | 'type' | 'size' | 'autocomplete' | 'iconNameRight' | 'prefix' | 'suffix' | 'omitSearchIcon'>;
+export declare class PktTextinput extends PktInputElement<Props> {
+    inputRef: Ref<HTMLTextAreaElement>;
+    value: string;
+    type: string;
+    size: number | null;
+    autocomplete: string | null;
+    iconNameRight: string | null;
+    prefix: string | null;
+    suffix: string | null;
+    omitSearchIcon: boolean;
+    counterCurrent: number;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,32 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface TextinputTestConfig extends BaseTestConfig {
+    type?: string;
+    value?: string;
+    autocomplete?: string | null;
+    iconNameRight?: string | null;
+    prefix?: string | null;
+    suffix?: string | null;
+    size?: number | null;
+    omitSearchIcon?: boolean;
+    id?: string;
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    placeholder?: string | null;
+    maxlength?: number | null;
+    minlength?: number | null;
+    hasError?: boolean;
+    errorMessage?: string;
+    helptext?: string;
+    fullwidth?: boolean;
+    counter?: boolean;
+    inline?: boolean;
+    ariaLabelledby?: string | null;
+    ariaDescribedBy?: string | null;
+}
+export declare const createTextinputTest: (config?: TextinputTestConfig) => Promise<{
+    container: HTMLElement;
+    textinput: import('./textinput').PktTextinput;
+}>;

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

@@ -0,0 +1,2 @@
+export { PktTimepicker } from './timepicker';
+export type { IPktTimepicker } from './timepicker';

package/dist/components/timepicker/timepicker.d.ts

@@ -0,0 +1,94 @@
+import { PropertyValues } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { PktInputElement } from '../../base-elements/input-element';
+import { ElementProps } from '../../types/typeUtils';
+type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'>;
+export interface IPktTimepicker {
+    value?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    hidePicker?: boolean;
+    stepArrows?: boolean;
+    fullwidth?: boolean;
+    label?: string | null;
+    helptext?: string;
+    helptextDropdown?: string;
+    helptextDropdownButton?: string | null;
+    hasError?: boolean;
+    errorMessage?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    tagText?: string | null;
+    inline?: boolean;
+}
+export declare class PktTimepicker extends PktInputElement<Props> {
+    hiddenInputRef: Ref<HTMLInputElement>;
+    hoursInputRef: Ref<HTMLInputElement>;
+    minutesInputRef: Ref<HTMLInputElement>;
+    buttonRef: Ref<HTMLButtonElement>;
+    /**
+     * Exposes hiddenInputRef as inputRef so the base class validate() method
+     * triggers our manageValidity override automatically after every onChange call.
+     * The hidden input itself is never used for reporting — see manageValidity below.
+     */
+    get inputRef(): Ref<HTMLInputElement>;
+    /**
+     * Overrides the base class manageValidity to solve a focusability problem:
+     * the browser requires the third argument to setValidity (the "anchor") to be
+     * a visible, focusable element — it focuses that element when navigating to an
+     * invalid field. Our hidden input[type=time] cannot receive focus, so passing it
+     * as the anchor would silently fail with "form control is not focusable".
+     */
+    protected manageValidity(_input?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
+    value: string;
+    hidePicker: boolean;
+    stepArrows: boolean;
+    private _hours;
+    private _minutes;
+    private _isOpen;
+    private _hoursDigitCount;
+    private _hoursFirstDigit;
+    private _minutesDigitCount;
+    private _minutesFirstDigit;
+    private _hasFocus;
+    private _setAriaInvalid;
+    private _outsideClickHandler;
+    private _handleComponentFocusIn;
+    private _handleComponentFocusOut;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    protected formResetCallback(): void;
+    private _isValidStep;
+    private _syncDisplayFromValue;
+    private _syncValueFromDisplay;
+    private get _minuteStep();
+    private get _hourOptions();
+    private get _minuteOptions();
+    private _openPopup;
+    private _closePopup;
+    private _togglePopup;
+    private _scrollToSelected;
+    private _focusSelectedOrFirst;
+    private _handleHoursKeydown;
+    private _handleHoursBlur;
+    private _handleMinutesKeydown;
+    private _handleMinutesBlur;
+    private _handleOptionClick;
+    private _focusOptionAndSync;
+    private _handlePopupKeydown;
+    private _stepTime;
+    private _renderOption;
+    private _renderPopup;
+    private _renderContainer;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,22 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface TimepickerTestConfig extends BaseTestConfig {
+    value?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    'hide-picker'?: boolean;
+    'step-arrows'?: boolean;
+    fullwidth?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    helptext?: string;
+    id?: string;
+    name?: string;
+}
+export declare const createTimepickerTest: (config?: TimepickerTestConfig) => Promise<{
+    container: HTMLElement;
+    timepicker: import('./timepicker').PktTimepicker;
+}>;

package/dist/consent.d.ts

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

package/dist/controllers/pkt-options-controller.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+type TOption = {
+    value: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+};
+export declare class PktOptionsSlotController implements ReactiveController {
+    host: LitElement & ReactiveControllerHost;
+    nodes: Element[];
+    options: TOption[];
+    generation: number;
+    observer: MutationObserver;
+    constructor(host: LitElement & ReactiveControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private addNode;
+    private createOptions;
+    private handleMutations;
+}
+export {};

package/dist/controllers/pkt-slot-utils.d.ts

@@ -0,0 +1,3 @@
+export declare function shouldSkip(element: Element): boolean;
+export declare function isOptionElement(element: Element): boolean;
+export declare function isTextNodeAndNotEmpty(element: Node): boolean;

package/dist/datepicker.d.ts

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

package/dist/directives/slot-content.d.ts

@@ -0,0 +1,128 @@
+import { LitElement } from 'lit';
+import { AsyncDirective, PartInfo } from 'lit/async-directive.js';
+import { ChildPart } from 'lit/directive.js';
+/**
+ * Returns the SlotManager for a host, creating one if it doesn't exist.
+ * Call this in connectedCallback() to eagerly collect children before Lit renders.
+ */
+export declare function getSlotManager(host: LitElement): SlotManager;
+/**
+ * Per-host singleton that manages node collection and observation.
+ * Scans host children, categorizes them by slot attribute, and notifies
+ * registered directives when children change.
+ *
+ * IMPORTANT: collectNodes() must be called BEFORE Lit's first render
+ * (typically in connectedCallback via PktElement.hasSlotContent or getSlotManager).
+ * Lit's first render clears host children, so collecting during render is too late.
+ */
+export declare class SlotManager {
+    private host;
+    private observer;
+    private nodesBySlot;
+    private directives;
+    private observing;
+    private trackedNodes;
+    generation: number;
+    private initialCollectionDone;
+    private processingMutations;
+    private placeholderToNode;
+    private nodeToPlaceholder;
+    private static PLACEHOLDER_PREFIX;
+    constructor(host: LitElement);
+    /**
+     * Collect original children BEFORE Lit's first render.
+     * Must be called in connectedCallback or earlier.
+     * Safe to call multiple times — only the first call scans.
+     */
+    collectNodes(): void;
+    /**
+     * Register a directive instance and start observing for dynamic changes.
+     */
+    addDirective(d: SlotContentDirective): void;
+    /**
+     * Unregister a directive instance. Stops observing if no directives remain.
+     */
+    removeDirective(d: SlotContentDirective): void;
+    /**
+     * Returns nodes matching the given slot name.
+     */
+    getNodes(slotName?: string): Node[];
+    /**
+     * Returns whether the given slot has any content.
+     */
+    hasContent(slotName?: string): boolean;
+    /**
+     * Ensure a placeholder comment exists for a node that is about to be distributed.
+     * Called by the directive before Lit moves the node to the target position.
+     * The placeholder stays between Lit's ChildPart markers so that when the parent
+     * template conditionally removes the content, the MutationObserver can detect
+     * the placeholder removal and clean up the real node.
+     */
+    ensurePlaceholder(node: Node): void;
+    /**
+     * Start MutationObserver for dynamic child changes.
+     * Deferred via setTimeout to avoid catching Lit's first render mutations.
+     */
+    private startObserving;
+    private stopObserving;
+    /**
+     * Handle MutationObserver mutations incrementally.
+     * Only processes nodes that are NOT already part of Lit's rendered template.
+     *
+     * Uses a guard flag to prevent recursive handling: when notifyDirectives()
+     * causes setValue() to move nodes (e.g., from host into a ChildPart container),
+     * that move triggers another mutation which must be ignored.
+     */
+    private handleMutations;
+    /**
+     * Determines if a node is user-provided content (not Lit's rendered template).
+     * Lit's rendered content includes comment markers and elements created by the template.
+     */
+    private isUserContent;
+    private removeFromSlots;
+    private notifyDirectives;
+}
+/**
+ * AsyncDirective that renders slot content at its position in a Lit template.
+ *
+ * Usage:
+ *   html`<div>${slotContent(this)}</div>`              // default slot
+ *   html`<div>${slotContent(this, 'helptext')}</div>`   // named slot
+ */
+declare class SlotContentDirective extends AsyncDirective {
+    private manager;
+    private slotName;
+    private lastGeneration;
+    constructor(partInfo: PartInfo);
+    render(_host: LitElement, _slotName?: string): unknown;
+    update(_part: ChildPart, [host, slotName]: [LitElement, string?]): unknown;
+    /**
+     * Called by SlotManager when child mutations are detected.
+     * Uses setValue() to push an async update to Lit.
+     */
+    handleNodesChanged(): void;
+    /**
+     * Insert placeholders for nodes that are still direct children of the host.
+     * Must be called before Lit moves them to the target position.
+     */
+    private ensurePlaceholders;
+    disconnected(): void;
+    reconnected(): void;
+    private getNodesOrNoChange;
+}
+/**
+ * Directive that distributes Light DOM children into Lit template positions,
+ * functioning like Shadow DOM slots but without a shadow root.
+ *
+ * @param host - The component instance (typically `this`)
+ * @param slotName - Optional slot name. Omit for the default slot.
+ *
+ * @example
+ * // Default slot
+ * html`<div class="content">${slotContent(this)}</div>`
+ *
+ * // Named slot
+ * html`<div class="help">${slotContent(this, 'helptext')}</div>`
+ */
+export declare const slotContent: (_host: LitElement, _slotName?: string | undefined) => import('lit-html/directive.js').DirectiveResult<typeof SlotContentDirective>;
+export {};

package/dist/docs/backlink.d.ts

@@ -0,0 +1,4 @@
+import { PktElement } from '../base-elements/element';
+export declare class BackLinkDocs extends PktElement {
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,5 @@
+import { PktElement } from '../../base-elements/element';
+export declare class Accordion extends PktElement {
+    private skins;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,7 @@
+import { PktElement } from '../../base-elements/element';
+import { TAlertSkin } from '../../components/alert';
+export declare class Alert extends PktElement {
+    skins: TAlertSkin[];
+    content: string;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,4 @@
+import { PktElement } from '../../base-elements/element';
+export declare class BackLink extends PktElement {
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,8 @@
+import { PktElement } from '../../base-elements/element';
+export declare class Breadcrumbs extends PktElement {
+    private lastNavigated;
+    private breadcrumbs;
+    private shortBreadcrumbs;
+    private handleNavigate;
+    render(): import('lit-html').TemplateResult<1>;
+}