@nordhealth/components 4.26.2 → 5.0.0-alpha.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,177 @@
+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);
+    /** 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/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 {};

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+declare const PaginationPrevious_base: typeof LitElement;
+/**
+ * The "previous 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 previous page.
+ *
+ * @status draft
+ * @category navigation
+ * @lightDom true
+ *
+ * @slot - Default slot for the previous-page link or button.
+ */
+export default class PaginationPrevious extends PaginationPrevious_base {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-pagination-previous': PaginationPrevious;
+    }
+}
+export {};

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * The ellipsis marker returned by {@link paginate} in place of a page number.
+ */
+export declare const ELLIPSIS: "…";
+export type PaginationToken = number | typeof ELLIPSIS;
+/**
+ * Builds the sequence of page numbers (and ellipsis markers) to render for a
+ * numbered pager, keeping the window centred on the current page and collapsing
+ * long gaps into a single {@link ELLIPSIS}.
+ *
+ * Ported from the Provet Cloud frontend `paginate()` util (which is itself based
+ * on https://gist.github.com/kottenator/9d936eb3e4e3c3e02598), with the lodash
+ * `clamp`/`range` dependencies inlined.
+ *
+ * @param currentPage 1-based current page.
+ * @param pageCount Total number of pages.
+ * @param pagesShown Maximum number of page tokens to show (min 7).
+ * @returns An array of 1-based page numbers interleaved with `ELLIPSIS`.
+ */
+export declare function paginate(currentPage: number, pageCount: number, pagesShown?: number): PaginationToken[];

package/lib/src/popout/Popout.d.ts

@@ -37,6 +37,15 @@ export default class Popout extends Popout_base {
      * Set to true to always display the popout as a floating overlay, even on smaller viewports.
      */
     alwaysFloating: boolean;
+    /**
+     * Set to true when the consuming component owns the `open` state and drives
+     * the popout itself (e.g. via its own trigger `@click` and `show()`/`hide()`).
+     * The popout stays presentational — positioning, top layer, light dismiss and
+     * transitions all still work — but it does NOT attach its own click-to-toggle
+     * listener to the `aria-controls` trigger, avoiding a competing second toggle
+     * on the same click.
+     */
+    controlled: boolean;
     /**
      * Show the popout.
      * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.