@nordhealth/components 4.26.1 → 5.0.0-alpha.0

package/lib/src/date-range-picker/DateRangePicker.d.ts

@@ -0,0 +1,307 @@
+import type { PropertyValues } from 'lit';
+import type { DatePredicate } from '../calendar/Calendar.js';
+import { LitElement } from 'lit';
+import { DaysOfWeek } from '../common/dates.js';
+import '../button/Button.js';
+import '../input/Input.js';
+import '../calendar/Calendar.js';
+import '../popout/Popout.js';
+import '../stack/Stack.js';
+import '../visually-hidden/VisuallyHidden.js';
+declare const DateRangePicker_base: (new (...args: any[]) => import("../common/mixins/SizeMixin.js").SizeMixinInterface) & (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/ReadonlyMixin.js").ReadonlyMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
+/**
+ * Date Range Picker lets people choose a start and end date as a single range,
+ * either from a built-in list of presets (Today, Last 7 days, This month, …) or
+ * from a range calendar. It is a control only — compose it inside a
+ * [Field](/components/field/) for a label, hint or error, like a native input.
+ *
+ * The committed value is an ISO-8601 interval string `YYYY-MM-DD/YYYY-MM-DD`;
+ * the convenience `start-date` / `end-date` props and the `valueAsDateRange`
+ * getter/setter stay in sync with it. Selecting in the popout builds a *pending*
+ * range; **Apply** commits it (firing `change`), **Cancel** reverts to the last
+ * committed value, and **Clear** empties it.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @fires {DateRangeChangeEvent} change - Dispatched when the committed range changes (Apply or Clear).
+ * @fires {DateRangeChangeEvent} input - Dispatched live as the pending range changes inside the popout.
+ * @fires {NordEvent} open - Dispatched when the popout is opened.
+ * @fires {NordEvent} close - Dispatched when the popout is closed.
+ *
+ * @slot trigger - Optional custom trigger element (e.g. a filter chip or a `nord-button`) that opens the picker. Replaces the built-in trigger button when provided.
+ *
+ * @localization buttonLabel - Accessible label for the trigger button.
+ * @localization placeholder - Placeholder shown in the trigger when no range is selected.
+ * @localization modalHeading - Heading shown above the calendar in the popout.
+ * @localization closeLabel - Accessible label for the close button.
+ * @localization applyLabel - Label for the Apply button.
+ * @localization cancelLabel - Label for the Cancel button.
+ * @localization clearLabel - Label for the Clear button.
+ * @localization presetsLabel - Accessible label for the preset list.
+ * @localization presetsCollapsedLabel - Label for the collapsed preset dropdown (narrow widths).
+ * @localization rangeSeparator - Character shown between the start and end dates in the trigger.
+ * @localization dateOutOfMinBound - Error message shown when the range starts before the minimum date.
+ * @localization dateOutOfMaxBound - Error message shown when the range ends after the maximum date.
+ * @localization presetToday - Label for the "Today" preset.
+ * @localization presetYesterday - Label for the "Yesterday" preset.
+ * @localization presetLastDays - Label for the "Last X days" presets.
+ * @localization presetLastMonths - Label for the "Last X months" presets.
+ * @localization presetThisMonth - Label for the "This month" preset.
+ * @localization presetLastWeek - Label for the "Last week" preset.
+ * @localization presetLastMonth - Label for the "Last month" preset.
+ * @localization presetLastQuarter - Label for the "Last quarter" preset.
+ * @localization presetLastYear - Label for the "Last year" preset.
+ * @localization presetCurrentWeek - Label for the "Current week" preset.
+ * @localization presetCurrentMonth - Label for the "Current month" preset.
+ * @localization presetCurrentQuarter - Label for the "Current quarter" preset.
+ * @localization presetCurrentYear - Label for the "Current year" preset.
+ * @localization presetQuarter - Label for a specific calendar quarter, e.g. "Q3 2025".
+ *
+ * @cssprop [--n-date-range-picker-trigger-min-inline-size=14rem] - Controls the minimum inline size of the trigger.
+ * @cssprop [--n-date-range-picker-popout-inline-size] - Controls the inline size of the popout content.
+ */
+export default class DateRangePicker extends DateRangePicker_base {
+    /** Stable, unique id base for the light-DOM ARIA wiring of this instance. */
+    private dateRangePickerId;
+    protected inputId: string;
+    protected get labelFocusOnly(): boolean;
+    private calendar?;
+    private toggle?;
+    private popout?;
+    private localize;
+    private openState;
+    private dateFormat;
+    /**
+     * The committed value as an ISO-8601 interval string `YYYY-MM-DD/YYYY-MM-DD`.
+     * An empty string means no range is committed.
+     */
+    value: string;
+    /**
+     * Convenience accessor for the committed start date, in ISO-8601 format. Kept
+     * in sync with `value` and `end-date`.
+     */
+    startDate: string;
+    /**
+     * Convenience accessor for the committed end date, in ISO-8601 format. Kept in
+     * sync with `value` and `start-date`.
+     */
+    endDate: string;
+    /**
+     * Controls whether the popout is open.
+     */
+    open: boolean;
+    /**
+     * Minimum date allowed to be picked, in ISO-8601 format: YYYY-MM-DD.
+     */
+    min?: string;
+    /**
+     * Maximum date allowed to be picked, in ISO-8601 format: YYYY-MM-DD.
+     */
+    max?: string;
+    /**
+     * The date that is considered today, in ISO-8601 format. Presets resolve
+     * relative to this; if unset, the user's current local date is used.
+     */
+    today?: string;
+    /**
+     * Which day is considered the first day of the week. `0` for Sunday, `1` for
+     * Monday, etc. Default is Monday.
+     */
+    firstDayOfWeek: DaysOfWeek;
+    /**
+     * Controls which days are disabled and therefore disallowed.
+     * For example, this can be used to disallow selection of weekends.
+     */
+    isDateDisabled: DatePredicate;
+    /**
+     * Controls which days are highlighted with a small indicator.
+     * Returning `false` will not show an indicator.
+     * Returning `true` will show the indicator, but without an accessible label. Therefore
+     * Returning a string will show the indicator, and use the string as accessible label.
+     * It is recommended to return a string rather than `true` whenever possible.
+     */
+    isDateHighlighted: (date: Date) => string | boolean;
+    /**
+     * Hides the built-in list of preset ranges, leaving only the calendar.
+     */
+    hidePresets: boolean;
+    /**
+     * Restricts the preset list to this subset of preset ids (in their natural
+     * group order). When unset, the full catalogue is shown. Ids:
+     * `today`, `yesterday`, `last-7`/`last-30`/`last-60`/`last-90`/`last-365`,
+     * `last-week`, `last-month`, `last-6-months`, `last-quarter`, `last-year`,
+     * `last-12-months`, `current-week`/`current-month`/`current-quarter`/`current-year`,
+     * and quarter ids `q-<year>-<1-4>`.
+     */
+    presets?: string[];
+    /**
+     * Render the picker inline — the presets, calendar and Apply/Cancel/Clear are
+     * always visible, with no trigger button or popout. Use it when the picker
+     * lives directly on the page (e.g. in a form) rather than behind a trigger.
+     */
+    inline: boolean;
+    /**
+     * The name used to submit the **start** date as its own form field. When both
+     * `start-name` and `end-name` are set, the picker submits two fields
+     * (`start-name`=startDate, `end-name`=endDate) instead of the single `name`.
+     */
+    startName?: string;
+    /**
+     * The name used to submit the **end** date as its own form field. See
+     * `start-name`.
+     */
+    endName?: string;
+    /**
+     * Validation error message, set automatically when the committed range falls
+     * outside min/max.
+     */
+    internalError?: string;
+    /** The pending range inside the popout, before Apply commits it. */
+    private pendingStart;
+    private pendingEnd;
+    /** Whether the popout shows a single month (narrow) rather than two. */
+    private isNarrow;
+    /** Whether the collapsed preset dropdown (narrow layout) is open. */
+    private presetsOpen;
+    /**
+     * Below this viewport width (in `rem`) the picker collapses to a single month
+     * with stacked presets. Measured against the viewport — NOT the host — because
+     * the popout floats (`position: fixed`) and is free to be as wide as the
+     * viewport allows, regardless of the trigger's own width. A `resize` listener
+     * is required (rather than a CSS media query) because the month count is a
+     * `nord-calendar` prop in shadow DOM that CSS cannot reach.
+     *
+     * Two months + presets need ~900px to render without overflowing, so the
+     * threshold sits a little above that. Expressed in `rem` (resolved against the
+     * root font size on each measurement) so it scales with zoom / font size, the
+     * same way the calendar's own `rem`-based sizing does.
+     */
+    private static readonly narrowThresholdRem;
+    private resizeObserver;
+    private handleViewportResize;
+    /**
+     * Sets `isNarrow` from the viewport width. The `resize` listener drives this for
+     * live changes, but it fires asynchronously, so it's also called synchronously
+     * before opening the popout so the first render already shows the right number
+     * of months. Ignores 0-width measurements (detached/hidden).
+     */
+    private measureNarrow;
+    /**
+     * Mirror the collapsed-presets trigger width into a custom property so the
+     * presets popout matches it (the popout floats `position: fixed`, so a `%`
+     * width can't reference the trigger). Mirrors the combobox dropdown approach.
+     */
+    private syncPresetsInlineSize;
+    /**
+     * A user-supplied trigger element (`slot="trigger"`), captured from the light
+     * DOM before the first render so it can be re-inserted into the rendered
+     * structure. When present it replaces the built-in button; `null` uses the
+     * default trigger.
+     */
+    private customTrigger;
+    /** The interval string was the source of the most recent sync (avoids loops). */
+    private syncingFromValue;
+    get valueAsDateRange(): [Date, Date] | undefined;
+    /**
+     * Get/set the committed range as a `[Date, Date]` tuple. Setting `undefined`
+     * clears the range.
+     */
+    set valueAsDateRange(range: [Date, Date] | undefined);
+    /** The form the `formdata` listener is currently attached to, if any. */
+    private boundForm;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected createRenderRoot(): this;
+    protected get ownInvalid(): boolean;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Give a slotted custom trigger the same ARIA wiring the built-in button has,
+     * so `nord-popout` auto-attaches its open/close click via `aria-controls` and
+     * assistive tech sees the dialog relationship and expanded state.
+     */
+    private wireCustomTrigger;
+    /**
+     * The control submits one OR two form fields (single interval, or separate
+     * start/end), which `FormAssociatedMixin`'s single `FormDataController` can't
+     * express, so listen for `formdata` directly and (re)bind to the active form.
+     */
+    private syncFormListener;
+    /**
+     * Keep `value`, `start-date` and `end-date` consistent. The interval string is
+     * the source of truth; whichever changed last drives the others.
+     */
+    protected handleValueObserve(): void;
+    protected handlePartObserve(): void;
+    /**
+     * Suppress the inherited `FormDataController`. This control submits one OR two
+     * fields depending on `start-name`/`end-name`, which a single controller can't
+     * express, so `handleFormData` owns the entire submission instead. Returning
+     * `undefined` here keeps the base controller from also appending `name`.
+     */
+    protected get formValue(): string | undefined;
+    private handleFormData;
+    /**
+     * The full catalogue of presets, resolved against the configured (or current)
+     * "today". Date arithmetic mirrors NFE's `getPredefinedDateRange`: "last N
+     * days" counts back `N` days from today; "last N months" are full calendar
+     * months ending at the previous month-end; period/quarter presets use calendar
+     * boundaries (first-day-of-week aware for weeks).
+     */
+    private get presetCatalogue();
+    /** The presets that should be shown, after subset/availability/min-max filters. */
+    private get visiblePresets();
+    /** The visible presets bucketed into their divider groups, in group order. */
+    private get presetGroups();
+    private getToday;
+    /** Which preset (if any) the pending selection currently matches. */
+    private get activePresetId();
+    private createDateFormatters;
+    /** The text shown in the trigger: the formatted range, or the placeholder. */
+    private get displayValue();
+    /** The in-progress (pending) range formatted for the footer, or '' while empty. */
+    private get pendingRangeLabel();
+    private validateBounds;
+    render(): import("lit").TemplateResult<1>;
+    /** The presets + calendar + actions shared by the popout and inline layouts. */
+    private renderBody;
+    /** A single preset row. */
+    private renderPreset;
+    /** The presets bucketed into one `<ul>` per divider group. */
+    private renderPresetGroups;
+    /** Wide layout: the grouped presets shown as a list beside the calendar. */
+    private renderPresetsList;
+    /** Narrow layout: the presets collapse into a dropdown button + popout. */
+    private renderPresetsCollapsed;
+    private handleFocus;
+    private handleBlur;
+    private handlePresetClick;
+    private handleRangeChange;
+    private emitInput;
+    private handleApply;
+    private handleClear;
+    /** Commits a range to `value`, syncs the parts, and fires `change`. */
+    private commit;
+    private handleTriggerClick;
+    /**
+     * Open the picker programmatically.
+     */
+    show(): void;
+    /**
+     * Close the picker programmatically.
+     * @param moveFocusToToggle Move focus back to the trigger after closing.
+     */
+    hide(moveFocusToToggle?: boolean): void;
+    /**
+     * Move focus to the picker's trigger.
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-date-range-picker': DateRangePicker;
+    }
+}
+export {};

package/lib/src/date-range-picker/localization.d.ts

@@ -0,0 +1,42 @@
+declare const dateRangePickerLocalization: {
+    /** Accessible label for the trigger button that opens the range picker. */
+    buttonLabel: string;
+    /** Placeholder shown in the trigger when no range is selected. */
+    placeholder: string;
+    /** Heading shown above the calendar in the popout (small viewports). */
+    modalHeading: string;
+    /** Accessible label for the close button (small viewports). */
+    closeLabel: string;
+    /** Label for the button that commits the pending selection. */
+    applyLabel: string;
+    /** Label for the button that reverts to the last committed selection. */
+    cancelLabel: string;
+    /** Label for the button that empties the selection. */
+    clearLabel: string;
+    /** Accessible label for the list of preset ranges. */
+    presetsLabel: string;
+    /** Label/accessible name for the collapsed preset dropdown on narrow widths. */
+    presetsCollapsedLabel: string;
+    /** Joins the start and end of the displayed range, e.g. "1 Jan – 7 Jan". */
+    rangeSeparator: string;
+    /** Error shown when the selected range starts before the minimum date. */
+    dateOutOfMinBound: (minDate: string) => string;
+    /** Error shown when the selected range ends after the maximum date. */
+    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;
+    /** Label for a specific calendar quarter, e.g. "Q3 2025". */
+    presetQuarter: (quarter: number, year: number) => string;
+};
+export default dateRangePickerLocalization;

package/lib/src/drawer/Drawer.d.ts

@@ -12,6 +12,13 @@ import '../footer/Footer.js';
  *
  * @cssprop [--n-drawer-padding=var(--n-space-l)] - Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).
  * @cssprop [--n-drawer-background-color=var(--n-color-surface)] - Controls the background color of the drawer.
+ * @cssprop [--n-drawer-border-color=var(--n-color-border)] - Controls the color of the drawer's borders.
+ * @cssprop [--n-drawer-border-radius=0] - Controls the border radius of the drawer.
+ * @cssprop [--n-drawer-border-width=0] - Controls the width of the drawer's borders on every edge. The inline-start edge defaults to `1px` to separate the drawer from adjacent content; set this to `0` to remove all borders.
+ * @cssprop [--n-drawer-border-inline-start-width=1px] - Controls the width of the drawer's inline-start border. Falls back to `--n-drawer-border-width`, then `1px`.
+ * @cssprop [--n-drawer-border-inline-end-width=var(--n-drawer-border-width)] - Controls the width of the drawer's inline-end border.
+ * @cssprop [--n-drawer-border-block-start-width=var(--n-drawer-border-width)] - Controls the width of the drawer's block-start border.
+ * @cssprop [--n-drawer-border-block-end-width=var(--n-drawer-border-width)] - Controls the width of the drawer's block-end border.
  */
 export default class Drawer extends LitElement {
     static styles: import("lit").CSSResult[];

package/lib/src/dropdown/Dropdown.d.ts

@@ -10,7 +10,7 @@ declare const Dropdown_base: (new (...args: any[]) => import("../common/mixins/F
  * the overlay functionality.
  *
  * @status ready
- * @category action
+ * @category overlay
  *
  * @slot - The dropdown content.
  * @slot toggle - Used to place the toggle for dropdown.

package/lib/src/dropdown-group/DropdownGroup.d.ts

@@ -4,8 +4,10 @@ import { LitElement } from 'lit';
  * group and is used for grouping items into related categories.
  *
  * @status ready
- * @category action
+ * @category overlay
  * @slot - The dropdown group content.
+ *
+ * @parent Dropdown
  */
 export default class DropdownGroup extends LitElement {
     static styles: import("lit").CSSResult[];

package/lib/src/dropdown-item/DropdownItem.d.ts

@@ -7,7 +7,7 @@ declare const DropdownItem_base: (new (...args: any[]) => import("../common/mixi
  * dropdown component.
  *
  * @status ready
- * @category action
+ * @category overlay
  * @slot - The dropdown item content.
  * @slot start - Used to place content before dropdown item text. Typically used for icons.
  * @slot end - Used to place content after dropdown item text. Typically used for icons.
@@ -16,6 +16,8 @@ declare const DropdownItem_base: (new (...args: any[]) => import("../common/mixi
  * @cssprop [--n-dropdown-item-color=var(--n-color-text)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).
  * @cssprop [--n-dropdown-item-white-space=nowrap] - Controls how the item's label handles whitespace. Set to `normal` to allow long labels to wrap across multiple lines instead of truncating with an ellipsis.
  * @cssprop [--n-dropdown-item-align-items=center] - Controls how the item's contents (start slot, label, end slot) align on the cross axis. Useful with multi-line wrapping: set to `flex-start` so icons/avatars sit on the first line instead of the vertical middle.
+ *
+ * @parent Dropdown
  */
 export default class DropdownItem extends DropdownItem_base {
     static styles: import("lit").CSSResult[];

package/lib/src/dropdown-submenu/DropdownSubmenu.d.ts

@@ -12,6 +12,8 @@ import '../popout/Popout.js';
  * @fires {NordEvent} open - Forwarded from the internal nord-popout.
  * @fires {NordEvent} close - Forwarded from the internal nord-popout.
  * @fires {CustomEvent} nord-submenu-navigate - Fired when mobile stack navigation activates this submenu.
+ *
+ * @parent Dropdown
  */
 export default class DropdownSubmenu extends LitElement {
     static styles: import("lit").CSSResult[];

package/lib/src/field/Field.d.ts

@@ -0,0 +1,102 @@
+import { LitElement } from 'lit';
+declare const Field_base: typeof LitElement;
+/**
+ * Field is the wrapper for a single form control. It lays out a
+ * [Field Label](/components/field-label/), a control (such as an
+ * [Input](/components/input/)), an optional
+ * [Field Description](/components/field-description/) and a
+ * [Field Error](/components/field-error/) with consistent spacing.
+ *
+ * Combine several together in a [Field Group](/components/field-group/) and
+ * group related groups with a [Field Set](/components/field-set/).
+ *
+ * The Field shares its state with the control through context: a Nord control
+ * placed inside a Field suppresses its own built-in label/hint/error and takes
+ * its accessible name, description and invalid/disabled state from the Field.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for the field parts (label, control, content, description, error).
+ *
+ * @attr {boolean} data-invalid - Present while the field is invalid (mirrors the `invalid` property). Style hook for the whole field.
+ * @attr {boolean} data-disabled - Present while the field is disabled (mirrors the `disabled` property).
+ * @attr {boolean} data-focused - Present while the field's control has focus. Style hook for focus-within treatments across the field.
+ *
+ * @cssprop [--n-field-gap=var(--n-space-s)] - Controls the spacing between the field parts, using our [spacing tokens](/tokens/#space).
+ */
+export default class Field extends Field_base {
+    /**
+     * The layout of the field.
+     *
+     * - `vertical` (default) stacks the label, control and helper text.
+     * - `horizontal` places the label and control side by side, vertically centered.
+     * - `responsive` lays out horizontally in a wide enough container, otherwise vertical.
+     */
+    orientation: 'vertical' | 'horizontal' | 'responsive';
+    /**
+     * Marks the field as invalid, enabling error styling hooks. Also reflected as
+     * `data-invalid` and propagated to the control via context.
+     */
+    invalid: boolean;
+    /**
+     * Disables the field and, via context, its control. Reflected as `data-disabled`.
+     */
+    disabled: boolean;
+    /** Provides {@link fieldContext} to the control inside this field. */
+    private provider;
+    /**
+     * The control's published `required`, used to drive the label's indicator.
+     * Not reactive — it only toggles an attribute imperatively via syncLabelIndicator.
+     */
+    private controlRequired;
+    /**
+     * Reflects the field's state onto `data-*` attributes (the Lit equivalent of
+     * Base UI's `stateAttributesMapping`): `data-invalid`/`data-disabled` from the
+     * properties and `data-focused` tracked automatically.
+     */
+    private stateAttributes;
+    /** Observes child additions/removals so the shared context stays in sync. */
+    private childObserver?;
+    /** Observes an enclosing Field Set's `disabled` so the cascade stays in sync. */
+    private fieldSetObserver?;
+    /** `aria-describedby` ids this field added to a native control on its last run. */
+    private managedDescribedBy;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected createRenderRoot(): this;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** The control publishes its `required` here; we drive the label indicator. */
+    private setRequired;
+    /**
+     * Recompute and publish the shared context. The provider compares by identity,
+     * so we always hand it a fresh object.
+     */
+    private updateContext;
+    private get labelElement();
+    /** Ensure the label has an id (for `aria-labelledby` on light-DOM controls). */
+    private resolveLabelId;
+    /** The label text (for `aria-label` on shadow-DOM controls). */
+    private resolveLabelText;
+    /**
+     * Collect the ids of any description/error elements (in DOM order, generating
+     * ids as needed) for the control's `aria-describedby`.
+     */
+    private collectDescribedById;
+    private syncLabelIndicator;
+    /**
+     * Context only reaches Nord controls (consumers). A native `<input>`/`<select>`/
+     * `<textarea>` placed directly in a Field is wired here instead — light-DOM
+     * IDREFs resolve in-tree. This is the only remaining imperative path, mirroring
+     * Base UI's `Field.Control` being for native elements.
+     */
+    private linkNativeControl;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field': Field;
+    }
+}
+export {};

package/lib/src/field/FieldContent.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Field Content wraps a [Field Label](/components/field-label/) and
+ * [Field Description](/components/field-description/) so they stay aligned as a
+ * single text block, which is especially useful in horizontal
+ * [Field](/components/field/) layouts.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for the label and description.
+ */
+export default class FieldContent extends LitElement {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-content': FieldContent;
+    }
+}

package/lib/src/field/FieldDescription.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * Field Description is the helper or hint text for a [Field](/components/field/).
+ * It is styled to match the hint text used by Nord form controls such as
+ * [Input](/components/input/).
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for the description text.
+ */
+export default class FieldDescription extends LitElement {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-description': FieldDescription;
+    }
+}

package/lib/src/field/FieldError.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Field Error displays validation error text for a [Field](/components/field/).
+ * It is styled to match the error text used by Nord form controls such as
+ * [Input](/components/input/).
+ *
+ * Exposes itself as a live region (`role="alert"`, `aria-live="polite"`) so the
+ * message is announced when it appears. The message is supplied as the
+ * element's children.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for the error message(s).
+ */
+export default class FieldError extends LitElement {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-error': FieldError;
+    }
+}

package/lib/src/field/FieldGroup.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+declare const FieldGroup_base: typeof LitElement;
+/**
+ * Field Group stacks a set of [Field](/components/field/) controls vertically
+ * with consistent spacing. Separate sections with a
+ * [Field Separator](/components/field-separator/) when needed.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for [Field](/components/field/) and [Field Separator](/components/field-separator/) elements.
+ *
+ * @cssprop [--n-field-group-gap=var(--n-space-l)] - Controls the spacing between fields, using our [spacing tokens](/tokens/#space).
+ */
+export default class FieldGroup extends FieldGroup_base {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-group': FieldGroup;
+    }
+}
+export {};

package/lib/src/field/FieldLabel.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ * Field Label is the label for a control inside a [Field](/components/field/).
+ * It is styled to match the labels used by Nord form controls such as
+ * [Input](/components/input/).
+ *
+ * The enclosing Field shares this label's id and text with the control through
+ * context, so the control names itself (`aria-labelledby` for light-DOM controls,
+ * `aria-label` for shadow-DOM ones) — no wiring needed. Set the `for` attribute to
+ * a control's `id` to additionally get native-style click-to-focus.
+ *
+ * The required indicator is driven by the control: mark the control `required`
+ * and the Field toggles this label's `required` attribute automatically.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for the label text.
+ * @attr {boolean} required - Present while the control is required (set by the Field; not a settable prop).
+ */
+export default class FieldLabel extends LitElement {
+    /**
+     * The `id` of the control this label describes. Enables native-style
+     * click-to-focus, mirroring the native `<label for>` attribute.
+     */
+    for?: string;
+    private handleClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected createRenderRoot(): this;
+    /** The control this label activates on click. */
+    private controlForLabel;
+    /** The form control inside a Field — the first child that isn't a field part. */
+    private controlInField;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-label': FieldLabel;
+    }
+}