@nordhealth/components 4.26.2 → 5.0.0

package/lib/src/number-field/format.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `Intl.NumberFormat` helpers, ported from Base UI's `utils/formatNumber.ts`.
+ * The formatter is cached keyed by `JSON.stringify({ locale, options })` so we
+ * don't allocate a new `Intl.NumberFormat` on every render/parse.
+ */
+export declare function getFormatter(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
+export declare function formatNumber(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+export declare function formatNumberMaxPrecision(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;

package/lib/src/number-field/localization.d.ts

@@ -0,0 +1,6 @@
+declare const numberFieldLocalization: {
+    increaseLabel: string;
+    decreaseLabel: string;
+    roleDescription: string;
+};
+export default numberFieldLocalization;

package/lib/src/number-field/parse.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Locale-aware numeric parser, ported verbatim from Base UI's
+ * `number-field/utils/parse.ts` (and the symbol tables from
+ * `number-field/utils/constants.ts`). The design system has no equivalent
+ * number parser (`common/number.ts` only wraps an index), so the whole module
+ * is copied here rather than re-exported.
+ *
+ * It strips bidi/format control characters, normalises unicode +/- signs,
+ * replaces locale group/decimal/currency/unit/percent/permille symbols, maps
+ * non-ASCII numerals (Arabic, Persian, Han, fullwidth) to ASCII, keeps only the
+ * last `.` as the decimal point, guards against `Infinity`, then `parseFloat`s,
+ * shifting the decimal for `%`/`‰` formats.
+ */
+export declare const HAN_NUMERALS: string[];
+export declare const HAN_NUMERAL_TO_DIGIT: Record<string, string>;
+export declare const ARABIC_NUMERALS: string[];
+export declare const PERSIAN_NUMERALS: string[];
+export declare const FULLWIDTH_NUMERALS: string[];
+export declare const PERCENTAGES: string[];
+export declare const PERMILLE: string[];
+export declare const UNICODE_MINUS_SIGNS: string[];
+export declare const UNICODE_PLUS_SIGNS: string[];
+export declare const FULLWIDTH_DECIMAL = "\uFF0E";
+export declare const FULLWIDTH_GROUP = "\uFF0C";
+export declare const ARABIC_RE: RegExp;
+export declare const PERSIAN_RE: RegExp;
+export declare const FULLWIDTH_RE: RegExp;
+export declare const HAN_RE: RegExp;
+export declare const PERCENT_RE: RegExp;
+export declare const PERMILLE_RE: RegExp;
+export declare const ARABIC_DETECT_RE: RegExp;
+export declare const PERSIAN_DETECT_RE: RegExp;
+export declare const HAN_DETECT_RE: RegExp;
+export declare const FULLWIDTH_DETECT_RE: RegExp;
+export declare const BASE_NON_NUMERIC_SYMBOLS: readonly [".", ",", "．", "，", "٫", "٬"];
+export declare const SPACE_SEPARATOR_RE: RegExp;
+export declare const PLUS_SIGNS_WITH_ASCII: string[];
+export declare const MINUS_SIGNS_WITH_ASCII: string[];
+export declare const ANY_MINUS_RE: RegExp;
+export declare const ANY_PLUS_RE: RegExp;
+export declare const ANY_MINUS_DETECT_RE: RegExp;
+export declare const ANY_PLUS_DETECT_RE: RegExp;
+export declare function getNumberLocaleDetails(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): Partial<Record<keyof Intl.NumberFormatPartTypeRegistry, string | undefined>>;
+export declare function parseNumber(formattedNumber: string, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): number | null;

package/lib/src/number-field/validate.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Numeric validation/clamping/snapping, ported from Base UI's
+ * `number-field/utils/validate.ts`. Snapping happens BEFORE clamping so
+ * non-step-aligned boundaries stay reachable.
+ */
+type NumberFormatOptionsWithRounding = Intl.NumberFormatOptions & {
+    roundingIncrement?: number | undefined;
+    roundingMode?: string | undefined;
+    roundingPriority?: string | undefined;
+};
+export declare function clamp(val: number, min?: number, max?: number): number;
+export declare function hasNumberFormatRoundingOptions(format?: NumberFormatOptionsWithRounding): format is NumberFormatOptionsWithRounding;
+export declare function removeFloatingPointErrors(value: number, format?: NumberFormatOptionsWithRounding): number;
+export declare function toValidatedNumber(value: number | null, { step, minWithDefault, maxWithDefault, minWithZeroDefault, format, snapOnStep, small, clamp: shouldClamp, }: {
+    step: number | undefined;
+    minWithDefault: number;
+    maxWithDefault: number;
+    minWithZeroDefault: number;
+    format: NumberFormatOptionsWithRounding | undefined;
+    snapOnStep: boolean;
+    small: boolean;
+    clamp: boolean;
+}): number | null;
+export {};

package/lib/src/otp-field/OtpField.d.ts

@@ -0,0 +1,188 @@
+import type { PropertyValues } from 'lit';
+import { LitElement, nothing } from 'lit';
+export { OtpFieldCompleteEvent, OtpFieldInvalidEvent } from './OtpFieldEvents.js';
+/** The character sets the field accepts, mirroring Base UI's `validationType`. */
+export type OtpFieldType = 'numeric' | 'alphanumeric';
+declare const OtpField_base: (new (...args: any[]) => import("../common/mixins/SizeMixin.js").SizeMixinInterface) & (new (...args: any[]) => import("../common/mixins/FieldControlMixin.js").FieldControlMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & typeof LitElement;
+/**
+ * OTP Field is a segmented one-time-code input: it renders `length` individual
+ * character cells plus a visually-hidden input that holds the full value, enabling
+ * SMS / keychain autofill and native `pattern`/`required` validation. Typing fills
+ * and auto-advances, Backspace clears and moves back, the arrow keys navigate, and
+ * pasting a code distributes its characters across the cells.
+ *
+ * OTP Field is a control only — it has no built-in label, hint or error. Compose
+ * it inside a [Field](/components/field/) with a [Field Label](/components/field-label/)
+ * (connected with `for`) to give it an accessible name, helper text and an error
+ * message, exactly like a native input.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @fires {NordEvent} input - Dispatched whenever the OTP value changes through user interaction (typing, Backspace/Delete, paste, autofill).
+ * @fires {NordEvent} change - Dispatched alongside `input` when the committed value changes via user interaction.
+ * @fires {OtpFieldCompleteEvent} complete - Dispatched after the value updates when every cell becomes filled.
+ * @fires {OtpFieldInvalidEvent} value-invalid - Dispatched when typed or pasted text contained characters rejected by `type`.
+ *
+ * @localization characterLabel - Per-cell accessible label, given the 1-based cell position and total cell count.
+ *
+ * @attr {boolean} data-invalid - Present while the field is invalid (mirrors the \`invalid\` property). Style hook for the whole control.
+ * @attr {boolean} data-focused - Present while any cell has focus. Style hook for focus-within treatments.
+ *
+ * @cssprop [--n-otp-field-gap=var(--n-space-s)] - Gap between cells (and between groups when `group-size` is used).
+ * @cssprop [--n-otp-field-cell-size=var(--n-space-xl)] - Controls the block-size and inline-size of each square cell. When unset, size maps to the shared control block sizes.
+ * @cssprop [--n-otp-field-background=var(--n-color-surface)] - Cell background.
+ * @cssprop [--n-otp-field-border-color=var(--n-color-border-strong)] - Cell border color (resting).
+ * @cssprop [--n-otp-field-border-radius=var(--n-border-radius-s)] - Cell corner radius.
+ * @cssprop [--n-otp-field-font-size=var(--n-font-size-m)] - Cell character font size.
+ */
+export default class OtpField extends OtpField_base {
+    /** Stable, unique id base for light-DOM ARIA wiring of this instance. */
+    private otpId;
+    private localize;
+    private formData;
+    /** Reflects `invalid` to `data-invalid` and focus-within to `data-focused`. */
+    private stateAttributes;
+    /** Re-renders when the host's forwarded ARIA labelling attributes change. */
+    private ariaObserver?;
+    /** Index + value to focus once the async value update has applied. */
+    private pendingFocus;
+    /** Value to fire `complete` for once the async value update has applied. */
+    private pendingComplete;
+    /** Whether any cell currently holds focus (drives roving tabindex + data-focused). */
+    private focused;
+    /** The cell index that currently has (or last had) focus. */
+    private focusedIndex;
+    /**
+     * The number of OTP cells. Must be a positive integer.
+     */
+    length: number;
+    /**
+     * Controls the allowed characters, `inputmode` and `pattern`. `numeric` accepts
+     * digits; `alphanumeric` accepts letters and digits.
+     */
+    type: OtpFieldType;
+    /**
+     * Prevents the user from changing the value while keeping navigation and focus.
+     */
+    readonly: boolean;
+    /**
+     * Obscures each cell (renders `type="password"`) for use on shared screens.
+     */
+    mask: boolean;
+    /**
+     * Placeholder character or string shown in every empty cell.
+     */
+    placeholder?: string;
+    /**
+     * Marks the field invalid, applying error styling and `aria-invalid` to every
+     * cell and the hidden input. Pair with a `nord-field-error` in the Field.
+     */
+    invalid: boolean;
+    protected get ownInvalid(): boolean;
+    /**
+     * The autocomplete token applied to the first cell and the hidden input (all
+     * other cells get `autocomplete="off"`). Defaults to `one-time-code` to enable
+     * SMS / keychain OTP autofill.
+     */
+    autocomplete: string;
+    /**
+     * Renders a decorative separator after every N cells (for example, `3` shows
+     * `123-456`). `0` disables grouping. The separator is `aria-hidden` and does
+     * not affect the value or navigation.
+     */
+    groupSize: number;
+    /**
+     * Whether every cell is filled (`value.length === length`). Read-only and
+     * derived from `value`; reflected as the `complete` attribute so consumers can
+     * style the completed state.
+     */
+    get complete(): boolean;
+    /** Backing store for the normalized value. */
+    private _value;
+    /**
+     * The OTP value, for example `'123456'`. Whitespace is stripped, characters are
+     * filtered by `type`, and the result is clamped to `length`. Set programmatically
+     * to prefill.
+     */
+    get value(): string;
+    set value(next: string);
+    /**
+     * Function that normalizes the value after whitespace and `type` filtering —
+     * e.g. `el.normalizeValue = v => v.toUpperCase()`. It runs whenever the field
+     * normalizes a value (initial, programmatic, and user edits), inside the
+     * component's own pipeline, so live normalization never fights the per-cell
+     * focus handling. The result is filtered by `type` again, then clamped to
+     * `length`; it should be idempotent since the same value may be normalized
+     * more than once. Characters rejected while normalizing are reported through
+     * `value-invalid`. Mirrors Base UI's `normalizeValue`.
+     */
+    normalizeValue?: (value: string) => string;
+    /** The validation config for the current `type`. */
+    private get config();
+    /** Whether `length` is a usable positive integer. */
+    private get hasValidLength();
+    /** The index of the cell that is currently tabbable (roving tabindex). */
+    private get activeIndex();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected createRenderRoot(): this;
+    /** Re-normalize the value when `length` or `type` changes (e.g. clamps it). */
+    protected renormalize(): void;
+    /**
+     * Flush queued focus/complete once the value update has actually applied.
+     * Runs from `updated()` (after every render) rather than a value observer so
+     * it also fires for a re-paste that completes an already-complete value (the
+     * value text is unchanged, so a value observer would not run).
+     */
+    private flushPending;
+    /** Live list of the rendered cell inputs, in DOM order. */
+    private get cells();
+    /** Focus a cell by index (clamped), then select its content. */
+    private focusInput;
+    /** Queue a focus to run once the value update applies (Lit renders async). */
+    private queueFocusInput;
+    /** Focus the field by moving focus into its active cell. */
+    focus(options?: FocusOptions): void;
+    /**
+     * Commit a new value, firing `input` + `change` (and queuing `complete` when
+     * the field becomes filled). Returns the committed value, or `null` if nothing
+     * changed.
+     */
+    private setValue;
+    /** The reason for the in-flight `setValue`, used to detect re-paste completion. */
+    private lastReason;
+    /** Report rejected characters to consumers via `value-invalid`. */
+    private reportInvalid;
+    /**
+     * Re-select a cell on mousedown so clicking an already-focused filled cell
+     * re-selects its character (typing then replaces it) instead of dropping a
+     * caret. Mirrors Base UI's OTPFieldInput onMouseDown.
+     */
+    private handleMousedown;
+    private handleInput;
+    private handleKeydown;
+    private handlePaste;
+    private handleFocus;
+    private handleBlur;
+    /** The browser focuses the hidden input during autofill — redirect to cell 0. */
+    private handleHiddenFocus;
+    /** SMS autofill writes the whole code into the hidden input. */
+    private handleHiddenInput;
+    /** Resolve the effective text direction from the host or document. */
+    private resolveDirection;
+    /** preventDefault + stopPropagation, like Base UI's `stopEvent`. */
+    private stopEvent;
+    /** The id for a given cell — derived so cell ids stay unique and never collide with the host id. */
+    private cellId;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+    private renderCell;
+    /** Mirror state to host data-* attributes and flush queued focus/complete. */
+    protected updated(changed: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-otp-field': OtpField;
+    }
+}

package/lib/src/otp-field/OtpFieldEvents.d.ts

@@ -0,0 +1,38 @@
+import { NordEvent } from '../common/events.js';
+/**
+ * Dispatched after the value update applies when every OTP cell becomes filled
+ * (`value.length === length`), or when a complete value is pasted while the
+ * field is already complete. Carries the completed value so consumers can react
+ * to completion (for example, submitting the owning form).
+ *
+ * Fired after `input`/`change` so the committed value is already readable on the
+ * host, mirroring Base UI's `onValueComplete`-after-`onValueChange` ordering.
+ */
+export declare class OtpFieldCompleteEvent extends NordEvent {
+    /** The completed OTP value, e.g. `'123456'`. */
+    readonly value: string;
+    static eventName: string;
+    constructor(
+    /** The completed OTP value, e.g. `'123456'`. */
+    value: string);
+    /** Convenience accessor mirroring `CustomEvent.detail`. */
+    get detail(): string;
+}
+/**
+ * Dispatched when typed or pasted text contained characters rejected by the
+ * field's `type` normalization (for example, letters typed into a `numeric`
+ * field). Carries the raw attempted string before normalization.
+ *
+ * Named `value-invalid` rather than `invalid` so it does not collide with the
+ * native `HTMLInputElement` `invalid` event.
+ */
+export declare class OtpFieldInvalidEvent extends NordEvent {
+    /** The raw text the user attempted to enter, before normalization. */
+    readonly value: string;
+    static eventName: string;
+    constructor(
+    /** The raw text the user attempted to enter, before normalization. */
+    value: string);
+    /** Convenience accessor mirroring `CustomEvent.detail`. */
+    get detail(): string;
+}

package/lib/src/otp-field/localization.d.ts

@@ -0,0 +1,4 @@
+declare const otpFieldLocalization: {
+    characterLabel: (position: number, total: number) => string;
+};
+export default otpFieldLocalization;

package/lib/src/outline/Outline.d.ts

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+import { NordEvent } from '../common/events.js';
+import { LocalizeController } from '../localization/LocalizeController.js';
+import './OutlineItem.js';
+/**
+ * Event dispatched when the active section of an Outline changes, either via the
+ * built-in scroll-spy, a click on one of its items, or a programmatic change.
+ * The event's `activeId` is the id of the newly active heading.
+ */
+export declare class NordOutlineChangeEvent extends NordEvent {
+    activeId: string;
+    constructor(activeId: string);
+}
+declare const Outline_base: typeof LitElement;
+/**
+ * Outline is an in-page table of contents that lists a page's headings and
+ * highlights the section currently in view as you scroll.
+ *
+ * Provide [Outline Item](/components/outline-item/) children, or point `for` at
+ * a container to build the list from its headings.
+ *
+ * @status draft
+ * @category navigation
+ *
+ * @slot - The default slot for [Outline Item](/components/outline-item/) children.
+ * @slot header - Custom header content shown above the list. Overrides the default localized "On this page" heading. Set `hide-header` to remove the header entirely.
+ *
+ * @fires {NordOutlineChangeEvent} change - Dispatched when the active section changes. Includes an `activeId` property.
+ *
+ * @localization label - Accessible label for the outline navigation landmark, and the default header text.
+ *
+ * @cssprop [--n-outline-indicator-color=var(--n-color-accent)] - Color of the sliding active indicator.
+ * @cssprop [--n-outline-track-color=var(--n-color-border)] - Color of the static track behind the indicator.
+ * @cssprop [--n-outline-indicator-width=2px] - Thickness of the track and indicator.
+ * @cssprop [--n-outline-indent=var(--n-space-m)] - Indentation step applied per heading level.
+ * @cssprop [--n-outline-header-color=var(--n-color-text-weaker)] - Color of the default header text.
+ * @cssprop [--n-outline-header-font-size=var(--n-font-size-s)] - Font size of the default header text.
+ */
+export default class Outline extends Outline_base {
+    static styles: import("lit").CSSResult[];
+    protected localize: LocalizeController<"nord-outline">;
+    private headerSlot;
+    /**
+     * The id of the active heading. Setting this puts the Outline in controlled
+     * mode and disables the built-in scroll-spy, so your own logic owns the
+     * highlight (mirrors providing `activeId` in other libraries).
+     */
+    active?: string;
+    /**
+     * Tightens spacing for dense sidebars where vertical space is at a premium.
+     */
+    density: 'default' | 'compact';
+    /**
+     * DOM-scan mode: the id (or any CSS selector) of the content container whose
+     * headings should populate the outline. When set, slotted children are
+     * ignored and items are generated from the matched headings.
+     */
+    for?: string;
+    /**
+     * The selector used to find headings when `for` is set.
+     */
+    headingSelector: string;
+    /**
+     * CSS selector for the element that scrolls the content, used as the
+     * scroll-spy `IntersectionObserver` root. Point this at your scroll container
+     * when the page scrolls inside an element rather than the window — otherwise
+     * the observer watches the window and never sees the headings move. If the
+     * selector resolves to a `nord-scroll-area`, its scroll viewport is used.
+     *
+     * When unset, the nearest ancestor `nord-scroll-area` of the scanned content
+     * is detected automatically, falling back to the window.
+     */
+    scrollContainer?: string;
+    /**
+     * Hides the header. By default Outline shows a localized "On this page"
+     * heading (or the `header` slot's content) above the list.
+     */
+    hideHeader: boolean;
+    private scanned;
+    private containerEl?;
+    private indicatorEl?;
+    private controlled;
+    private observer?;
+    private resizeObserver?;
+    private mutationObserver?;
+    private readonly intersecting;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Re-derive entries, restart scroll-spy and reposition the indicator. */
+    private refresh;
+    /** The ordered list of items, normalised across slotted and scan modes. */
+    private get entries();
+    private scanContent;
+    private observeTargets;
+    private handleIntersect;
+    private setActive;
+    private applyActiveToItems;
+    private updateIndicator;
+    private handleClick;
+    private handleSlotChange;
+    private renderHeader;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-outline': Outline;
+    }
+}
+export {};

package/lib/src/outline/OutlineItem.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+declare const OutlineItem_base: typeof LitElement;
+/**
+ * Outline Item is a single link within an [Outline](/components/outline/). It
+ * points at an in-page heading via its `href` and indents according to its
+ * `level`. Its `active` state is managed by the parent Outline — you normally
+ * don't set it yourself.
+ *
+ * @status draft
+ * @category navigation
+ *
+ * @slot - The label text for the heading this item links to.
+ *
+ * @cssprop [--n-outline-item-color=var(--n-color-text-weak)] - Text color in the default state.
+ * @cssprop [--n-outline-item-color-hover=var(--n-color-text)] - Text color on hover.
+ * @cssprop [--n-outline-item-color-active=var(--n-color-text-link)] - Text color when the item is active.
+ *
+ * @parent Outline
+ */
+export default class OutlineItem extends OutlineItem_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The URL fragment of the heading this item links to, e.g. `#installation`.
+     */
+    href: string;
+    /**
+     * Heading depth from 1 to 4. Controls how far the item is indented.
+     */
+    level: 1 | 2 | 3 | 4;
+    /**
+     * Whether this item represents the currently active section. Managed by the
+     * parent [Outline](/components/outline/) via its scroll-spy or `active` property.
+     */
+    active: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-outline-item': OutlineItem;
+    }
+}
+export {};

package/lib/src/outline/localization.d.ts

@@ -0,0 +1,4 @@
+declare const outlineLocalization: {
+    label: string;
+};
+export default outlineLocalization;

package/lib/src/pagination/Pagination.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import { LocalizeController } from '../localization/LocalizeController.js';
+declare const Pagination_base: typeof LitElement;
+/**
+ * Pagination is the navigation root for a paginated collection. It is
+ * composition-first: it owns no page state, renders no controls, and emits no
+ * events. Your app owns the page state, URL/query syncing, cursors and any data
+ * fetching; Nord supplies the semantic/layout primitives, the styling and the
+ * `paginate()` math utility for building the page window.
+ *
+ * As a root it is a `navigation` landmark — it sets `role="navigation"` and a
+ * default accessible label so screen-reader users can jump to it. Compose the
+ * lower-level primitives inside it:
+ *
+ * - [Pagination Content](/components/pagination-content/) — the list row.
+ * - [Pagination Item](/components/pagination-item/) — a slot in the row.
+ * - [Pagination Link](/components/pagination-link/) — a page link (set `current`).
+ * - [Pagination Previous](/components/pagination-previous/) — the previous control.
+ * - [Pagination Next](/components/pagination-next/) — the next control.
+ * - [Pagination Ellipsis](/components/pagination-ellipsis/) — the collapsed-pages marker.
+ *
+ * Bring your own interactive element — an `<a>` (e.g. a framework `<Link>` /
+ * `<NuxtLink>`) or a `nord-button` — and own its `href`, navigation and
+ * `disabled` state. See the framework adapters in the docs.
+ *
+ * @status draft
+ * @category navigation
+ * @lightDom true
+ *
+ * @localization label - Accessible label for the pagination navigation landmark.
+ *
+ * @cssprop [--n-pagination-gap=var(--n-space-xs)] - Controls the spacing between pagination controls.
+ *
+ * @slot - Default slot for the composed pagination primitives.
+ */
+export default class Pagination extends Pagination_base {
+    protected localize: LocalizeController<"nord-pagination">;
+    /**
+     * Dims the pagination and disables interaction while results are loading.
+     */
+    loading: boolean;
+    connectedCallback(): void;
+    protected updated(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-pagination': Pagination;
+    }
+}
+export {};

package/lib/src/pagination/PaginationContent.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+declare const PaginationContent_base: typeof LitElement;
+/**
+ * The list container for composed [Pagination](/components/pagination/) controls.
+ * Lays its [Pagination Item](/components/pagination-item/) children out in a row.
+ *
+ * Place it inside [Pagination](/components/pagination/), which is already the
+ * `navigation` landmark (it sets `role="navigation"` and an accessible label).
+ * Do not add your own `<nav>` wrapper — a second landmark around the same
+ * controls would be a duplicate that screen-reader users have to wade through.
+ *
+ * @status draft
+ * @category navigation
+ * @lightDom true
+ *
+ * @slot - Default slot for Pagination Item children.
+ */
+export default class PaginationContent extends PaginationContent_base {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-pagination-content': PaginationContent;
+    }
+}
+export {};

package/lib/src/pagination/PaginationEllipsis.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import '../visually-hidden/VisuallyHidden.js';
+declare const PaginationEllipsis_base: typeof LitElement;
+/**
+ * The collapsed-pages marker (…) in a composed [Pagination](/components/pagination/).
+ * The glyph is decorative; a visually-hidden label gives it meaning for
+ * assistive tech. Set `label` to localise it.
+ *
+ * @status draft
+ * @category navigation
+ * @lightDom true
+ *
+ * @cssprop [--n-pagination-gap=var(--n-space-xs)] - Inherited spacing token used by the pagination row.
+ */
+export default class PaginationEllipsis extends PaginationEllipsis_base {
+    /** The visually-hidden label announced for the collapsed pages. */
+    label: string;
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-pagination-ellipsis': PaginationEllipsis;
+    }
+}
+export {};

package/lib/src/pagination/PaginationItem.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+declare const PaginationItem_base: typeof LitElement;
+/**
+ * A single slot in a composed [Pagination Content](/components/pagination-content/)
+ * row. Wrap each control — a [Pagination Link](/components/pagination-link/),
+ * [Pagination Previous](/components/pagination-previous/), [Pagination Next](/components/pagination-next/)
+ * or [Pagination Ellipsis](/components/pagination-ellipsis/) — in its own item.
+ *
+ * @status draft
+ * @category navigation
+ * @lightDom true
+ *
+ * @slot - Default slot for a single pagination control.
+ */
+export default class PaginationItem extends PaginationItem_base {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-pagination-item': PaginationItem;
+    }
+}
+export {};

package/lib/src/pagination/PaginationLink.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+declare const PaginationLink_base: typeof LitElement;
+/**
+ * A page link in a composed [Pagination](/components/pagination/). A layout
+ * wrapper around your own interactive element — provide an `<a>` (e.g. a
+ * framework `<Link>` for crawlable, SSR-friendly links) or a `nord-button`. Set
+ * `current` on the link for the active page; it mirrors `aria-current="page"`
+ * onto the interactive child so assistive tech announces it.
+ *
+ * @status draft
+ * @category navigation
+ * @lightDom true
+ *
+ * @slot - Default slot for the page link or button.
+ */
+export default class PaginationLink extends PaginationLink_base {
+    /** Marks this as the current page, mirroring `aria-current="page"` onto the child. */
+    current: boolean;
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+    protected updated(): void;
+    private ownsAriaCurrent;
+    private syncCurrent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-pagination-link': PaginationLink;
+    }
+}
+export {};

package/lib/src/pagination/PaginationNext.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+declare const PaginationNext_base: typeof LitElement;
+/**
+ * The "next page" control in a composed [Pagination](/components/pagination/). A
+ * layout wrapper around your own interactive element — provide an `<a>` (e.g. a
+ * framework `<Link>`) or a `nord-button` with its own icon, label and
+ * navigation, and disable it when there is no next page.
+ *
+ * @status draft
+ * @category navigation
+ * @lightDom true
+ *
+ * @slot - Default slot for the next-page link or button.
+ */
+export default class PaginationNext extends PaginationNext_base {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-pagination-next': PaginationNext;
+    }
+}
+export {};