@nordhealth/components 4.26.1 → 5.0.0-alpha.0

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

@@ -56,6 +56,15 @@ export declare function resolveTranslation(langCode: string): {
         tip: string;
         placeholder: string;
     };
+    'nord-combobox': {
+        clearLabel: string;
+        createLabel: (query: string) => string;
+        noResults: string;
+    };
+    'nord-autocomplete': {
+        clearLabel: string;
+        noResults: string;
+    };
     'nord-calendar': {
         prevMonthLabel: string;
         nextMonthLabel: string;
@@ -70,6 +79,34 @@ export declare function resolveTranslation(langCode: string): {
         dateOutOfMinBound: (minDate: string) => string;
         dateOutOfMaxBound: (maxDate: string) => string;
     };
+    'nord-date-range-picker': {
+        buttonLabel: string;
+        placeholder: string;
+        modalHeading: string;
+        closeLabel: string;
+        applyLabel: string;
+        cancelLabel: string;
+        clearLabel: string;
+        presetsLabel: string;
+        presetsCollapsedLabel: string;
+        rangeSeparator: string;
+        dateOutOfMinBound: (minDate: string) => string;
+        dateOutOfMaxBound: (maxDate: string) => string;
+        presetToday: string;
+        presetYesterday: string;
+        presetLastDays: (days: number) => string;
+        presetLastMonths: (months: number) => string;
+        presetThisMonth: string;
+        presetLastWeek: string;
+        presetLastMonth: string;
+        presetLastQuarter: string;
+        presetLastYear: string;
+        presetCurrentWeek: string;
+        presetCurrentMonth: string;
+        presetCurrentQuarter: string;
+        presetCurrentYear: string;
+        presetQuarter: (quarter: number, year: number) => string;
+    };
     'nord-modal': {
         closeLabel: string;
     };
@@ -79,12 +116,60 @@ export declare function resolveTranslation(langCode: string): {
     'nord-textarea': {
         remainingCharacters: (remainder: number) => string;
     };
+    'nord-time-picker': {
+        chooseTime: string;
+    };
     'nord-notification': {
         dismissLabel: string;
     };
     'nord-message': {
         unreadLabel: string;
     };
+    'nord-number-field': {
+        increaseLabel: string;
+        decreaseLabel: string;
+        roleDescription: string;
+    };
+    'nord-otp-field': {
+        characterLabel: (position: number, total: number) => string;
+    };
+    'nord-pagination': {
+        label: string;
+    };
+    'nord-filter-input': {
+        searchLabel: string;
+        clearLabel: string;
+    };
+    'nord-filter-field': {
+        filterIconLabel: string;
+        selectionLabel: (label: string) => string;
+        clearLabel: string;
+        removeLabel: string;
+    };
+    'nord-filter-date-range': {
+        filterIconLabel: string;
+        clearLabel: string;
+        removeLabel: string;
+        rangeSeparator: string;
+    };
+    'nord-filter-add-button': {
+        label: string;
+    };
+    'nord-filter-dropdown': {
+        filterIconLabel: string;
+        selectionLabel: (label: string) => string;
+        searchLabel: string;
+        clearLabel: string;
+        removeLabel: string;
+        selectAll: string;
+        deselectAll: string;
+        noResults: string;
+        unknown: string;
+        countSuffix: (extra: number) => string;
+    };
+    'nord-filter-reset-button': {
+        label: string;
+    };
     'nord-tag': {
         removeLabel: string;
     };

package/lib/src/meter/Meter.d.ts

@@ -0,0 +1,76 @@
+import { LitElement } from 'lit';
+declare const Meter_base: typeof LitElement;
+/**
+ * Meter is a graphical display of a numeric value within a known range,
+ * such as disk usage, a battery level or a score. Unlike Progress Bar, it
+ * represents a static measurement rather than the completion of a task.
+ *
+ * @status draft
+ * @category feedback
+ * @lightDom true
+ *
+ * @part track - The track which holds the indicator.
+ * @part indicator - The filled portion of the track representing the value.
+ *
+ * @cssprop [--n-meter-size=var(--n-space-s)] - Controls the thickness of the meter, using our [spacing tokens](/tokens/#space).
+ * @cssprop [--n-meter-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).
+ * @cssprop [--n-meter-color=var(--n-color-accent)] - Controls the color of the indicator, using [color tokens](/tokens/#color).
+ */
+export default class Meter extends Meter_base {
+    /**
+     * The current value. Must be between `min` and `max`.
+     */
+    value: number;
+    /**
+     * The minimum value. If `min` is greater than `max`, the two are swapped so
+     * the range is always well-formed.
+     */
+    min: number;
+    /**
+     * The maximum value. If `min` is greater than `max`, the two are swapped so
+     * the range is always well-formed.
+     */
+    max: number;
+    /**
+     * A label describing what the meter represents. Shown above the meter and
+     * exposed to assistive technology.
+     */
+    label: string;
+    /**
+     * Options used to format the displayed and announced value with
+     * `Intl.NumberFormat`. When omitted, the value is shown as a percentage of
+     * the range so the text stays in sync with the indicator fill.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * The locale used by `Intl.NumberFormat` when formatting the value.
+     * Defaults to the runtime locale.
+     */
+    locale?: string;
+    /**
+     * The effective range bounds, normalised so `min <= max` even if the
+     * properties are set the other way round (a degenerate `min > max` would
+     * otherwise produce NaN/negative fills).
+     */
+    private get bounds();
+    /** The value clamped to the `min`/`max` range. */
+    private get clampedValue();
+    /** The value as a percentage (0–100) of the range, clamped. */
+    private get percentage();
+    /**
+     * The human-readable value used for display and `aria-valuetext`. Always
+     * derived from the clamped value so the announced/displayed text stays in
+     * sync with the indicator fill (never raw or NaN).
+     */
+    private get formattedValue();
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-meter': Meter;
+    }
+}
+export {};

package/lib/src/nav-group/NavGroup.d.ts

@@ -12,6 +12,8 @@ import '../icon/Icon.js';
  * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active
  *
  * @cssprop [--n-nav-group-heading-display=block] - Controls the `display` of the group's heading. Set to `none` to hide it — useful for a `slot="subnav"` group whose heading repeats the parent item's label inline; the heading is still shown in the rail flyout where it titles the projected list.
+ *
+ * @parent Navigation
  */
 export default class NavGroup extends LitElement {
     static styles: import("lit").CSSResult[];

package/lib/src/nav-item/NavItem.d.ts

@@ -52,6 +52,8 @@ declare const NavItem_base: (new (...args: any[]) => import("../common/mixins/Fo
  * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.
  * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.
  * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode="rail"` and not `nav-open`.
+ *
+ * @parent Navigation
  */
 export default class NavItem extends NavItem_base {
     static styles: import("lit").CSSResult[];

package/lib/src/nav-toggle/NavToggle.d.ts

@@ -6,9 +6,11 @@ declare const NavToggle_base: (new (...args: any[]) => import("../common/mixins/
  * Nav toggle hides and shows the primary navigation inside `<nord-layout>`.
  *
  * @status ready
- * @category action
+ * @category navigation
  *
  * @localization label - Accessible label for the nav toggle button.
+ *
+ * @parent Navigation
  */
 export default class NavToggle extends NavToggle_base {
     static styles: import("lit").CSSResult[];

package/lib/src/notification-group/NotificationGroup.d.ts

@@ -7,6 +7,8 @@ import { LitElement } from 'lit';
  * @slot - Default slot in which to place notifications.
  *
  * @fires {NordEvent} dismiss - Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
+ *
+ * @parent Notification
  */
 export default class NotificationGroup extends LitElement {
     static styles: import("lit").CSSResult[];

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

@@ -0,0 +1,377 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+export { getCurrencySymbol, resolveCurrencyPlacement } from './currency.js';
+export { NumberFieldChangeEvent } from './NumberFieldEvents.js';
+export type { NumberFieldChangeReason } from './NumberFieldEvents.js';
+/**
+ * The editable state of the inner input handed to (and returned from) a custom
+ * `mask` function: the current text and the caret/selection offsets. The shape
+ * mirrors a mask library's element state (e.g. Maskito's `ElementState`), so a
+ * mask transformer can be adapted with a thin wrapper.
+ */
+export interface NumberFieldMaskState {
+    value: string;
+    selectionStart: number;
+    selectionEnd: number;
+}
+/** Contextual info passed to a custom `mask` function alongside the editable state. */
+export interface NumberFieldMaskContext {
+    locale?: string | string[];
+    format?: Intl.NumberFormatOptions;
+}
+/** Signature of a custom `mask` transformer function. */
+export type NumberFieldMaskInput = (state: NumberFieldMaskState, context: NumberFieldMaskContext) => NumberFieldMaskState;
+declare const NumberField_base: (new (...args: any[]) => import("../common/mixins/SizeMixin.js").SizeMixinInterface) & (new (...args: any[]) => import("../common/mixins/FieldControlMixin.js").FieldControlMixinInterface) & typeof LitElement;
+/**
+ * Number Field is a control for entering a numeric value, with decrement and
+ * increment stepper buttons, optional drag-to-scrub, and locale-aware
+ * formatting. It ports the behaviour of Base UI's Number Field: arrow/Page
+ * stepping, Home/End to the bounds, press-and-hold auto-repeat, optional
+ * wheel/scrub, clamping, and `Intl.NumberFormat` formatting.
+ *
+ * Number 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/) to give it a label, hint and error,
+ * the same way you would a native input.
+ *
+ * FORM PARTICIPATION: the value is submitted as the raw numeric string under the
+ * host `name` via `FormDataController` (the inner input has no `name`, avoiding a
+ * double submit). Unlike Base UI there is no hidden native number input, and —
+ * like the other new Nord controls — Number Field does NOT use
+ * `ElementInternals`, so it performs no native constraint validation: `required`,
+ * `min`, `max` and `step` are NOT enforced as form-blocking validity. `min`/`max`
+ * govern interactive stepping and (unless `allow-out-of-range` is set) clamp the
+ * value; `required` only surfaces as `required`/`aria-required` on the inner input
+ * for assistive technology. Authors must validate constraints themselves and
+ * reflect failures via `invalid` and a `nord-field-error`.
+ *
+ * ACCESSIBILITY NOTE: the inner control is a text input (with `inputmode`) and
+ * `aria-roledescription="Number field"`, NOT `role="spinbutton"` and NOT a
+ * native `type="number"`. A text input lets us show locale-formatted text
+ * (currency, percent, grouping) while keeping full text editing — assistive tech
+ * reads the formatted value from the input's text. We do NOT add
+ * `aria-valuenow`/`valuemin`/`valuemax`/`valuetext`: those are only valid on a
+ * range role (e.g. `spinbutton`/`slider`) and would fail `aria-allowed-attr`
+ * validation on a text input. This mirrors what Base UI's `NumberFieldInput`
+ * actually ships (only `aria-roledescription`).
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @fires {NumberFieldChangeEvent} change - Dispatched when the value is committed (on blur, keyboard step, or pointer-up after a button hold or scrub). Carries the numeric value and a `reason`.
+ * @fires {NordEvent} input - Dispatched as the value changes during interaction (typing a parseable value, clearing, each step, each button tick, each wheel notch, each scrub increment).
+ *
+ * @slot start - Leading content inside the control, before the input (e.g. a unit or currency symbol). Sits after the decrement stepper button.
+ * @slot end - Trailing content inside the control, after the input (e.g. a unit label or `%`). Sits before the increment stepper button.
+ *
+ * @localization increaseLabel - Accessible label for the increment stepper button.
+ * @localization decreaseLabel - Accessible label for the decrement stepper button.
+ * @localization roleDescription - Role description announced for the input (aria-roledescription).
+ *
+ * @cssprop [--n-number-field-control-min-inline-size=8ch] - Minimum inline size (width) of the numeric input portion of the control.
+ * @cssprop [--n-number-field-step-inline-size=var(--n-space-xl)] - Inline size (width) of each increment/decrement stepper button.
+ * @cssprop [--n-number-field-background=var(--n-input-background, var(--n-color-surface))] - Background of the control.
+ * @cssprop [--n-number-field-border-color=var(--n-input-border-color, var(--n-color-border-strong))] - Border color of the control.
+ * @cssprop [--n-number-field-border-radius=var(--n-input-border-radius, var(--n-border-radius-s))] - Corner radius of the control.
+ *
+ * @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 the control has focus. Style hook for focus-within treatments.
+ */
+export default class NumberField extends NumberField_base {
+    /** Stable, unique id base for this instance's light-DOM ARIA wiring. */
+    private numberFieldId;
+    protected inputId: string;
+    private localize;
+    private inputRef;
+    private formData;
+    /** Reflects state to Base-UI-style `data-*` attributes (data-invalid, data-focused). */
+    private stateAttributes;
+    protected get ownInvalid(): boolean;
+    /** Re-renders when the host's forwarded ARIA labelling attributes change. */
+    private ariaObserver?;
+    private startZone?;
+    private endZone?;
+    private slotObserver?;
+    private formAncestor;
+    private _formId?;
+    /**
+     * The raw numeric value of the field, or `null` when empty.
+     *
+     * The `value` attribute may be set as a numeric string in HTML; it is coerced
+     * with a custom converter (`Number(v)`, `NaN -> null`).
+     */
+    value: number | null;
+    /**
+     * The minimum allowed value. Step interactions and blur-clamping clamp to it,
+     * and the decrement button disables at/below it. Home jumps to it only when it
+     * is finite.
+     */
+    min?: number;
+    /**
+     * The maximum allowed value. Step interactions and blur-clamping clamp to it,
+     * and the increment button disables at/above it. End jumps to it only when it
+     * is finite.
+     */
+    max?: number;
+    /**
+     * Amount each arrow press / button click / wheel notch changes the value.
+     * `'any'` disables step semantics (treated as `1` internally for stepping).
+     */
+    step: number | 'any';
+    /** Step used for PageUp/PageDown and Shift+Arrow. */
+    largeStep: number;
+    /** Step used when Alt/Option is held with Arrow keys. */
+    smallStep: number;
+    /** When `true`, stepping snaps the value to the nearest multiple of the step. */
+    snapOnStep: boolean;
+    /**
+     * When `true`, direct text entry may go outside `min`/`max` without clamping
+     * (so range validation can flag it); step interactions still clamp.
+     */
+    allowOutOfRange: boolean;
+    /**
+     * Restricts the field to whole numbers. The decimal separator can no longer be
+     * typed, pasted or programmatic fractional values are rounded to the nearest
+     * integer, and the built-in `mask` caps the fraction to zero. The soft keyboard
+     * shows the plain numeric keypad.
+     */
+    integer: boolean;
+    /** When `true`, scrolling the mouse wheel while focused changes the value. */
+    allowWheelScrub: boolean;
+    /** When `true`, renders a drag handle so the user can click-drag to change the value. */
+    scrub: boolean;
+    /**
+     * `Intl.NumberFormat` options used to format the displayed text. Set as a
+     * property only (e.g. `{ style: 'currency', currency: 'EUR' }`).
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Overrides the default `Intl.NumberFormat`-based formatting of the displayed
+     * text. Receives the current numeric value (`null` when the field is empty),
+     * the active `locale`, and the `format` options, and must return the string to
+     * display. Following the default behaviour, a `null` value should map to an
+     * empty string. Set as a property only.
+     */
+    formatValue?: (value: number | null, locale?: string | string[], options?: Intl.NumberFormatOptions) => string;
+    /**
+     * Overrides the default locale-aware parsing of the typed text. Receives the
+     * raw input text, the active `locale`, and the `format` options, and must
+     * return the parsed number, or `null` when the text is empty or cannot be
+     * parsed. Set as a property only.
+     */
+    parseValue?: (text: string, locale?: string | string[], options?: Intl.NumberFormatOptions) => number | null;
+    /**
+     * An optional custom edit-time mask: a function that reshapes the input text on
+     * every insertion, deletion, and paste, and reports where the caret should
+     * land. This is the live-typing counterpart to `formatValue` (which formats an
+     * already-committed value). Use it to insert grouping separators, localise the
+     * decimal, or cap fraction digits as the user types — typically by wrapping a
+     * mask library (e.g. Maskito's `maskitoTransform(elementState, options)`).
+     *
+     * The field does NOT format live on its own: without a mask, the text is kept
+     * as typed and the auto (`Intl`) formatting is applied only on blur and on
+     * paste. When a mask is set it becomes the source of truth for the text — the
+     * per-character guard is bypassed (the mask decides validity) and paste lands
+     * natively so it flows through the mask. Keep the mask output parseable in, and
+     * consistent with, the active `locale`/`format`. Set as a property.
+     */
+    mask?: NumberFieldMaskInput;
+    /** BCP-47 locale(s) for `Intl` formatting/parsing. Defaults to the runtime locale. */
+    locale?: string | string[];
+    /** Placeholder text shown when the field is empty. */
+    placeholder?: string;
+    /** Form field name. The value is submitted under this name via FormDataController. */
+    name?: string;
+    /** Disables the control. */
+    disabled: boolean;
+    /** Read-only: the user cannot change the value, but the value is still submitted. */
+    readonly: boolean;
+    /** Applies error styling and sets `aria-invalid="true"` on the inner input. */
+    invalid: boolean;
+    /** Hides the increment/decrement stepper buttons (still steppable via keyboard). */
+    hideControls: boolean;
+    /**
+     * ISO 4217 currency code (e.g. `USD`, `EUR`, `SEK`). Setting it enables the
+     * currency convenience: a decorative, locale-aware symbol is rendered into the
+     * `start`/`end` slot resolved from `currencyPlacement`, and the currency is
+     * folded into the input's accessible description so assistive tech announces it.
+     *
+     * This is layered on top of the generic `start`/`end` slots — for a fully
+     * custom symbol, omit `currency` and slot your own content instead. It is
+     * independent of `format`: the symbol lives beside the number rather than in
+     * the formatted text, so it composes cleanly with `mask`.
+     */
+    currency?: string;
+    /**
+     * Which side the `currency` symbol is placed on. `'auto'` (the default)
+     * derives the side from the `locale`/`currency` pair via `Intl` (symbol-first
+     * locales like en-US → `start`, symbol-last locales like de-DE → `end`);
+     * `'start'`/`'end'` force the side. Has no effect unless `currency` is set.
+     */
+    currencyPlacement: 'start' | 'end' | 'auto';
+    /** The text shown in the input — formatted, unless the user is mid-edit. */
+    private inputText;
+    /** Whether the user is scrubbing (adds an `is-scrubbing` cursor). */
+    private scrubbing;
+    /**
+     * While the user is actively typing this is `false`, so we don't reformat
+     * mid-keystroke. Reset to `true` on blur / keydown-step / button / wheel / scrub.
+     */
+    private allowInputSync;
+    /** Set after the first focus so we only move the caret to the end once. */
+    private hasTouchedInput;
+    /**
+     * Caret/selection a mask asked us to place after it rewrote the text. Applied
+     * in `updated()` once Lit has committed the new `.value` (which resets the
+     * caret to the end).
+     */
+    private pendingSelection?;
+    private holdStartTimer?;
+    private holdTickTimer?;
+    private activePointerId?;
+    /** When a mouse pointerdown handled the change, suppress the synthetic click. */
+    private skipNextClick;
+    private scrubAccumulator;
+    private scrubMoved;
+    private scrubPointerDownTarget;
+    private onScrubMove;
+    private onScrubUp;
+    /** Bound non-passive wheel listener (attached only while wheel scrub is enabled). */
+    private onWheel;
+    private wheelAttached;
+    set form(id: string);
+    get form(): HTMLFormElement | null;
+    /** The effective lower bound for clamping, mirroring Base UI `minWithDefault`. */
+    private get minWithDefault();
+    /** The effective upper bound for clamping, mirroring Base UI `maxWithDefault`. */
+    private get maxWithDefault();
+    /** The base used by `incrementValue` when stepping from empty. */
+    private get minWithZeroDefault();
+    /**
+     * Whether a negative value is allowed, gating the minus sign in the input. A
+     * `min` of `0` or higher forbids negatives; an unset or negative `min` allows
+     * them (mirroring `minWithDefault`, which backs unset `min` with a value < 0).
+     */
+    private get allowsNegative();
+    /**
+     * The numeric step used for stepping; `'any'` behaves as `1`. Guards against a
+     * non-positive / NaN `step` set directly as a property (which bypasses the
+     * attribute converter) by falling back to `1`.
+     */
+    private get numericStep();
+    /** The PageUp/PageDown + Shift step, guarded against non-positive / NaN values. */
+    private get effectiveLargeStep();
+    /** The Alt/Option step, guarded against non-positive / NaN values. */
+    private get effectiveSmallStep();
+    /**
+     * The canonical displayed text for a value: the `formatValue` override if set,
+     * otherwise the locale `Intl` format. Applied on blur and on paste.
+     */
+    private formatDisplay;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected createRenderRoot(): HTMLDivElement | this;
+    /**
+     * Relocates the host's `slot="start"`/`slot="end"` children into the matching
+     * landing zone inside the control. Only direct host children are considered,
+     * and a child already sitting in its zone is left untouched, so repeated
+     * updates are idempotent and don't disturb focus, caret or pointer state.
+     */
+    private relocateSlots;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues): void;
+    /** Focus the inner input (mirrors combobox `focus`). */
+    focus(options?: FocusOptions): void;
+    /** The reasons that DON'T clamp when `allowOutOfRange` is set (direct text entry). */
+    private isTextReason;
+    /**
+     * The amount a single step changes the value, mirroring Base UI `getStepAmount`:
+     * Alt -> smallStep, Shift -> largeStep, otherwise step.
+     */
+    private getStepAmount;
+    /**
+     * Validate, store, format and announce a new value.
+     *
+     * Returns whether a `change`/value update fired so callers can mirror Base UI's
+     * commit semantics.
+     */
+    private setValue;
+    /**
+     * Step the value by `amount * direction`, mirroring Base UI `incrementValue`.
+     * Stepping from empty starts at `max(0, min ?? 0)`.
+     */
+    private incrementValue;
+    /** Dispatch the committed `change` event with the current value + reason. */
+    private commit;
+    /**
+     * The set of non-numeric keys allowed in the input, mirroring Base UI's
+     * `getAllowedNonNumericKeys` (locale decimal/group/currency/percent + signs).
+     */
+    private getAllowedNonNumericKeys;
+    private handleKeydown;
+    /**
+     * Whether every character in `text` could legitimately be part of a number in
+     * the current locale/format, mirroring Base UI `NumberFieldInput.onChange`'s
+     * `isValidCharacterString`. The keydown guard only sees physical keystrokes;
+     * this catches disallowed characters arriving via IME composition,
+     * drag-and-drop, or a programmatic `input.value` set, so they never land in
+     * the bound value.
+     */
+    private isValidCharacterString;
+    private handleInput;
+    private handlePaste;
+    private handleFocus;
+    private handleBlur;
+    /** Sync the (possibly dirty) input text into `value` before a button press. */
+    private commitDirtyInput;
+    private handleStepPointerDown;
+    private handleStepPointerStop;
+    private handleStepClick;
+    private stopHold;
+    /** Whether the increment button should be disabled. */
+    private get incrementDisabled();
+    /** Whether the decrement button should be disabled. */
+    private get decrementDisabled();
+    private attachWheel;
+    private detachWheel;
+    private handleWheel;
+    /** The active element within this node's root (document or shadow root). */
+    private getActiveElement;
+    private handleScrubPointerDown;
+    private handleScrubMove;
+    private handleScrubUp;
+    private removeScrubListeners;
+    private handleScrubTouchStart;
+    private ownerWindow;
+    /**
+     * The `inputmode` for the inner input.
+     *
+     * Mirrors Base UI's `setDynamicInputModeForIOS` intent: the iOS numeric and
+     * decimal soft keyboards have no minus key, so when negatives are explicitly
+     * allowed (an explicit `min < 0`) we yield `text` so the user can type a
+     * minus sign on iOS. Otherwise the base mode is `numeric` when step/min/max
+     * are all integers and min >= 0, and `decimal` when fractional values are in
+     * play (so the iOS keyboard exposes a decimal point).
+     *
+     * Base UI swaps to `text`/`decimal` at runtime only on iOS; we compute the
+     * mode statically, and `text`/`decimal` are harmless supersets on platforms
+     * whose numeric keyboard already has the relevant keys. We gate the `text`
+     * mode on the explicit `min` prop (not the `Number.MIN_SAFE_INTEGER`-backed
+     * `minWithDefault`) so an unconstrained field keeps the friendlier `numeric`
+     * keypad, matching Base UI's default of `numeric`.
+     */
+    private get computedInputMode();
+    /**
+     * The resolved side for the `currency` symbol: the explicit `currencyPlacement`
+     * when it is `'start'`/`'end'`, otherwise derived from the locale/currency via
+     * `Intl`. Only meaningful when `currency` is set.
+     */
+    private get resolvedCurrencyPlacement();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-number-field': NumberField;
+    }
+}

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

@@ -0,0 +1,37 @@
+import { NordEvent } from '../common/events.js';
+/**
+ * The reason a number field value changed, mirroring Base UI's reason union.
+ *
+ * - `input-change` — a parseable value was typed (or set programmatically as text)
+ * - `input-clear` — the field was emptied
+ * - `input-blur` — the value was reformatted (and clamped, if enabled) on blur
+ * - `input-paste` — a value was pasted
+ * - `keyboard` — an Arrow / Page / Home / End key stepped the value
+ * - `increment-press` / `decrement-press` — a stepper button changed the value
+ * - `wheel` — the mouse wheel scrubbed the value
+ * - `scrub` — the scrub area was dragged
+ * - `none` — a programmatic / autofill change with no specific reason
+ */
+export type NumberFieldChangeReason = 'input-change' | 'input-clear' | 'input-blur' | 'input-paste' | 'keyboard' | 'increment-press' | 'decrement-press' | 'wheel' | 'scrub' | 'none';
+/**
+ * Dispatched when the number field value is committed (on blur, on keyboard
+ * step, or on pointer-up after a button hold or scrub drag). Carries the raw
+ * numeric value and the reason it changed, mirroring Base UI `onValueCommitted`.
+ *
+ * The bare event name is `change`, so it composes with native form expectations
+ * exactly like the combobox's `change`.
+ */
+export declare class NumberFieldChangeEvent extends NordEvent {
+    /** The committed numeric value, or `null` when the field is empty. */
+    readonly value: number | null;
+    /** What triggered the commit. */
+    readonly reason: NumberFieldChangeReason;
+    static eventName: string;
+    constructor(
+    /** The committed numeric value, or `null` when the field is empty. */
+    value: number | null, 
+    /** What triggered the commit. */
+    reason: NumberFieldChangeReason);
+    /** Convenience accessor mirroring `CustomEvent.detail`. */
+    get detail(): number | null;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Currency helpers for Number Field's declarative `currency` convenience.
+ *
+ * Both functions are pure and depend only on `Intl` — no data files, no
+ * dependencies — so they are trivially unit-testable. They port NFE's currency
+ * logic (`useCurrency.getSuggestedCurrencyPlacement` / `getCurrencySymbol`),
+ * with the symbol derived from `Intl` instead of a static currency table.
+ */
+/**
+ * Resolves which side a currency symbol belongs on for a locale/currency pair,
+ * mirroring NFE's `getSuggestedCurrencyPlacement`: format a sample amount and
+ * inspect the emitted parts. When the first part is the currency the symbol
+ * leads (`'start'`, e.g. en-US `$1,111.10`); otherwise it trails (`'end'`, e.g.
+ * de-DE `1.111,10 €`). Falls back to `'start'` if `Intl` throws on the inputs.
+ */
+export declare function resolveCurrencyPlacement(locale: string | string[] | undefined, currency: string): 'start' | 'end';
+/**
+ * Derives the locale-aware currency symbol from `Intl`, replacing NFE's static
+ * `supportedCurrencies.json` lookup. Formats zero with
+ * `currencyDisplay: 'narrowSymbol'` and returns the `currency` part (e.g. `$`,
+ * `€`, `kr`). Falls back to the raw ISO code when no symbol part is emitted or
+ * `Intl` throws on the inputs.
+ */
+export declare function getCurrencySymbol(locale: string | string[] | undefined, currency: string): string;