@nordhealth/components 4.26.1 → 5.0.0-alpha.0

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * Field Legend labels a [Field Set](/components/field-set/), naming the group of
+ * fields for assistive technology. Place it as the first child of a Field Set.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for the legend text.
+ */
+export default class FieldLegend extends LitElement {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-legend': FieldLegend;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * Field Separator draws a thin divider between sections inside a
+ * [Field Group](/components/field-group/).
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @part separator - The dividing line.
+ */
+export default class FieldSeparator extends LitElement {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-separator': FieldSeparator;
+    }
+}

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * Field Set groups related fields under a [Field Legend](/components/field-legend/)
+ * for semantic, accessible grouping. It exposes `role="group"` named by its
+ * legend; wrap a [Field Group](/components/field-group/) inside.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for a [Field Legend](/components/field-legend/) and a [Field Group](/components/field-group/).
+ */
+export default class FieldSet extends LitElement {
+    /**
+     * Disables every field in the set. Each enclosed [Field](/components/field/)
+     * reads this and cascades it to its control.
+     */
+    disabled: boolean;
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+    protected firstUpdated(): void;
+    private linkLegend;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-set': FieldSet;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * Field Title is an emphasized inline title used inside choice-card style
+ * [Field](/components/field/) layouts, where a [Field Label](/components/field-label/)
+ * wraps a whole selectable field.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for the title text.
+ */
+export default class FieldTitle extends LitElement {
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-field-title': FieldTitle;
+    }
+}

package/lib/src/field/field-context.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The state a [Field](/components/field/) shares with the form control it wraps.
+ *
+ * This mirrors Base UI React's `FieldRootContext`, trimmed to what Nord needs
+ * today. The Field is the provider; every control consumes it through
+ * `FieldControlMixin`. When a control resolves a value (i.e. it is inside a
+ * Field), it suppresses its own built-in label/hint/error and lets the Field
+ * parts take over.
+ *
+ * Validation/state-tracking fields (touched, dirty, filled, validity, …) are
+ * intentionally deferred — this is the seam where they would be added.
+ */
+export interface FieldContextValue {
+    /** Field-level invalid state. The control ORs this with its own. */
+    invalid: boolean;
+    /** Field-level disabled (incl. any fieldset cascade). The control ORs this with its own. */
+    disabled: boolean;
+    /**
+     * The `id` of the `<nord-field-label>`, for light-DOM controls to reference
+     * via `aria-labelledby` (IDREFs resolve in the same tree).
+     */
+    labelId: string | undefined;
+    /**
+     * The label's text content, for shadow-DOM controls to use as `aria-label`
+     * (an external `aria-labelledby` cannot cross the shadow boundary).
+     */
+    labelText: string | undefined;
+    /**
+     * Space-joined ids of the field's description(s) and error(s), in DOM order,
+     * for the control's `aria-describedby`.
+     */
+    describedById: string | undefined;
+    /**
+     * Lets the control publish its own `required` up to the Field so the
+     * `<nord-field-label>` can render the required indicator. The control owns
+     * `required`; the label only reflects it.
+     */
+    setRequired: (required: boolean) => void;
+}
+/**
+ * Context shared by `<nord-field>` (provider) with its control (consumer).
+ * `undefined` means "not inside a Field" — the control renders its own
+ * built-in field UI.
+ */
+export declare const fieldContext: {
+    __context__: FieldContextValue | undefined;
+};

package/lib/src/fieldset/Fieldset.d.ts

@@ -1,10 +1,18 @@
 import { LitElement } from 'lit';
 /**
- * Fieldset is used for grouping sets of input components.
- * It is necessary to use a fieldset with radio and checkbox components.
- * It can also be useful for logically grouping other types of inputs.
+ * Deprecated: for new code, group related controls with the composable Field
+ * family — see [grouping fields with Field](/components/field#radio).
+ * `nord-fieldset` remains supported for backwards compatibility and is not
+ * scheduled for removal.
  *
- * @status ready
+ * Fieldset is used for grouping sets of input components. It is necessary to use a
+ * fieldset with radio and checkbox components, and can also be useful for logically
+ * grouping other types of inputs.
+ *
+ * @deprecated Group related controls with the composable Field family instead — see
+ * [grouping fields with Field](/components/field#radio). Kept for backwards
+ * compatibility; not scheduled for removal.
+ * @status deprecated
  * @category form
  * @slot label - Use when a label requires more than plain text.
  * @slot hint - Optional slot that holds hint text for the fieldset.

package/lib/src/filter-add-button/FilterAddButton.d.ts

@@ -0,0 +1,91 @@
+import { LitElement } from 'lit';
+import '../button/Button.js';
+import '../dropdown-group/DropdownGroup.js';
+import '../dropdown-item/DropdownItem.js';
+import '../popout/Popout.js';
+export { FilterAddButtonSelectEvent } from './FilterAddButtonEvents.js';
+/** A single, selectable option offered by the add-filter popout. */
+export interface FilterAddOption {
+    /** Identifies the option; sent in the `select` event when chosen. */
+    id: string;
+    /** The human-readable label shown in the list. */
+    label: string;
+    /** When `true`, the option cannot be selected. */
+    disabled?: boolean;
+}
+/** A heading-labelled cluster of options. */
+export interface FilterAddGroup {
+    /** Optional heading shown above the group's options. */
+    heading?: string;
+    /** The options within the group. */
+    options: FilterAddOption[];
+}
+declare const FilterAddButton_base: typeof LitElement;
+/**
+ * Filter Add Button opens a popout of available filters and emits the chosen one
+ * so your app can add it to the bar. Pass a flat list of options, or group them
+ * under headings; selecting one fires a `select` event with the option's `id`
+ * and closes the popout.
+ *
+ * Like the other filter primitives it is intent-only: it does not track which
+ * filters are active. Your app owns the active filters and decides what to do on
+ * `select` (typically render a new [Filter Field](/components/filter-field/)).
+ * Mirrors the Provet Cloud filter add button.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @fires {FilterAddButtonSelectEvent} select - Dispatched with the chosen option's `id` when an option is selected.
+ * @fires {NordEvent} open - Dispatched when the popout is opened.
+ * @fires {NordEvent} close - Dispatched when the popout is closed.
+ *
+ * @localization label - The text label for the add-filter button.
+ *
+ * @cssprop [--n-filter-add-button-list-inline-size=250px] - Controls the inline size, or width, of the popout list.
+ *
+ * @parent FilterBar
+ */
+export default class FilterAddButton extends FilterAddButton_base {
+    private filterAddButtonId;
+    private localize;
+    private popout?;
+    private dismiss;
+    private openState;
+    /**
+     * The options to offer in the popout. Either a flat list of options, or an
+     * array of groups (each with an optional `heading` and its own `options`),
+     * which renders dividers between the groups.
+     */
+    options: FilterAddOption[] | FilterAddGroup[];
+    /**
+     * Makes the component disabled. This prevents users from being able to
+     * interact with it and conveys its inactive state to assistive technologies.
+     */
+    disabled: boolean;
+    /**
+     * Whether the popout is open. Set it to open or close the popout
+     * programmatically.
+     */
+    open: boolean;
+    /**
+     * The size of the button.
+     */
+    size: 's' | 'm' | 'l';
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+    /** Normalises the options into groups, wrapping a flat list in a single group. */
+    private get groups();
+    /** Open the popout. */
+    show(): void;
+    /** Close the popout. */
+    hide(): void;
+    private handleTriggerClick;
+    private handleSelect;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-filter-add-button': FilterAddButton;
+    }
+}

package/lib/src/filter-add-button/FilterAddButtonEvents.d.ts

@@ -0,0 +1,17 @@
+import { NordEvent } from '../common/events.js';
+/**
+ * Dispatched when the user chooses an option from the add-filter popout. Carries
+ * the chosen option's `id`. The button does not track which filters are active —
+ * the consumer adds the corresponding filter (and removes the option from the
+ * list if it should not be addable twice).
+ */
+export declare class FilterAddButtonSelectEvent extends NordEvent {
+    /** The `id` of the chosen option. */
+    readonly value: string;
+    static eventName: string;
+    constructor(
+    /** The `id` of the chosen option. */
+    value: string);
+    /** Convenience accessor mirroring `CustomEvent.detail`. */
+    get detail(): string;
+}

package/lib/src/filter-add-button/localization.d.ts

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

package/lib/src/filter-bar/FilterBar.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+declare const FilterBar_base: typeof LitElement;
+/**
+ * Filter Bar is a layout wrapper for a row of filter controls. It lays its
+ * children out in a wrapping flex row with a consistent gap, so you can drop in
+ * [Filter Field](/components/filter-field/), [Filter Input](/components/filter-input/),
+ * [Filter Add Button](/components/filter-add-button/) and
+ * [Filter Reset Button](/components/filter-reset-button/) (or any controls) and
+ * have them align without extra styling.
+ *
+ * Like [Pagination](/components/pagination/), it is composition-first: it owns no
+ * filter state and emits no events. Your app owns the active filters and any URL
+ * or query-string syncing; the filter primitives only emit intent.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot - Default slot for the filter controls.
+ *
+ * @cssprop [--n-filter-bar-gap=var(--n-space-s)] - Controls the spacing between the filter controls.
+ * @cssprop [--n-filter-bar-align-items=center] - Controls the cross-axis alignment of the controls.
+ */
+export default class FilterBar extends FilterBar_base {
+    /**
+     * The cross-axis alignment of the controls within the bar.
+     */
+    align: 'start' | 'center' | 'end';
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-filter-bar': FilterBar;
+    }
+}
+export {};

package/lib/src/filter-date-range/FilterDateRange.d.ts

@@ -0,0 +1,96 @@
+import { LitElement } from 'lit';
+import '../filter-field/FilterField.js';
+import '../popout/Popout.js';
+import '../date-range-picker/DateRangePicker.js';
+export { FilterDateRangeChangeEvent, FilterDateRangeClearEvent, FilterDateRangeRemoveEvent, } from './FilterDateRangeEvents.js';
+declare const FilterDateRange_base: typeof LitElement;
+/**
+ * Filter Date Range is a self-contained date-range **filter**: a chip that opens
+ * a popout containing an inline [Date Range Picker](/components/date-range-picker/)
+ * (presets + two-month calendar + Apply). It is the date-range counterpart to
+ * [Filter Dropdown](/components/filter-dropdown/) and renders the shared filter
+ * chip via [Filter Field](/components/filter-field/).
+ *
+ * Composition-first: it emits `change`/`clear`/`remove` and leaves the active
+ * filters and any URL/query state to your app.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @fires {FilterDateRangeChangeEvent} change - Dispatched when the committed range changes (Apply or clear).
+ * @fires {FilterDateRangeClearEvent} clear - Dispatched when the chip's clear affordance is pressed.
+ * @fires {FilterDateRangeRemoveEvent} remove - Dispatched when the chip's remove affordance is pressed.
+ * @fires {NordEvent} open - Dispatched when the popout is opened.
+ * @fires {NordEvent} close - Dispatched when the popout is closed.
+ *
+ * @localization filterIconLabel - Accessible label for the leading calendar icon.
+ * @localization clearLabel - Accessible label for the clear button.
+ * @localization removeLabel - Accessible label for the remove button.
+ * @localization rangeSeparator - Character shown between the start and end dates on the chip.
+ *
+ * @cssprop [--n-filter-date-range-popout-inline-size] - Controls the inline size of the popout content.
+ *
+ * @parent FilterBar
+ */
+export default class FilterDateRange extends FilterDateRange_base {
+    private filterDateRangeId;
+    private localize;
+    private popout?;
+    private openState;
+    /** The label naming what this filter targets, shown on the chip. */
+    label: string;
+    /**
+     * The committed range as an ISO-8601 interval string `YYYY-MM-DD/YYYY-MM-DD`,
+     * or `""` for no selection.
+     */
+    value: string;
+    /** Earliest selectable date (ISO-8601). */
+    min?: string;
+    /** Latest selectable date (ISO-8601). */
+    max?: string;
+    /** Hides the built-in preset list, leaving only the calendar. */
+    hidePresets: boolean;
+    /** First day of the week (0 = Sunday … 6 = Saturday). */
+    firstDayOfWeek?: number;
+    /** Overrides "today" (ISO-8601), mainly for deterministic tests/demos. */
+    today?: string;
+    /**
+     * Whether the whole filter can be removed. When `true` the trailing affordance
+     * is a remove button that fires `remove`; otherwise it is a clear button.
+     */
+    removable: boolean;
+    /** Shows a clear (✕) button while there is a selection. Defaults to `true`. */
+    clearable: boolean;
+    /** Makes the component disabled. */
+    disabled: boolean;
+    /** The size of the chip controls. */
+    size: 's' | 'm' | 'l';
+    /** Identifies the filter (e.g. for your app's active-filter state). */
+    name: string;
+    /** Whether the popout is open. */
+    open: boolean;
+    /** The committed start date (ISO-8601), derived from `value`. */
+    get startDate(): string;
+    /** The committed end date (ISO-8601), derived from `value`. */
+    get endDate(): string;
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+    /** The chip text: the formatted range, or `""` while inactive. */
+    private get displayValue();
+    /** Open the popout. */
+    show(): void;
+    /** Close the popout. */
+    hide(): void;
+    private handleTriggerClick;
+    private handleInnerChange;
+    private handleInnerInput;
+    private handleClear;
+    private handleRemove;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-filter-date-range': FilterDateRange;
+    }
+}

package/lib/src/filter-date-range/FilterDateRangeEvents.d.ts

@@ -0,0 +1,37 @@
+import { NordEvent } from '../common/events.js';
+/** The payload carried by a {@link FilterDateRangeChangeEvent}. */
+export interface FilterDateRangeChangeDetail {
+    /** The committed interval string `YYYY-MM-DD/YYYY-MM-DD`, or `""` when empty. */
+    value: string;
+    /** The committed start date in ISO-8601 format, or `""` when empty. */
+    startDate: string;
+    /** The committed end date in ISO-8601 format, or `""` when empty. */
+    endDate: string;
+}
+/**
+ * Dispatched when the committed range changes (the user applies a range inside
+ * the popout, or clears it).
+ */
+export declare class FilterDateRangeChangeEvent extends NordEvent {
+    private readonly _detail;
+    static eventName: string;
+    constructor(_detail: FilterDateRangeChangeDetail);
+    /** Convenience accessor mirroring `CustomEvent.detail`. */
+    get detail(): FilterDateRangeChangeDetail;
+}
+/**
+ * Dispatched when the range is cleared via the chip's clear affordance. The
+ * value is emptied; your app resets any active-filter/URL state in the handler.
+ */
+export declare class FilterDateRangeClearEvent extends NordEvent {
+    static eventName: string;
+    constructor();
+}
+/**
+ * Dispatched when the filter is removed via the chip's remove affordance. The
+ * consumer removes the field from the bar (and clears its filter) in the handler.
+ */
+export declare class FilterDateRangeRemoveEvent extends NordEvent {
+    static eventName: string;
+    constructor();
+}

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

@@ -0,0 +1,11 @@
+declare const filterDateRangeLocalization: {
+    /** Accessible label for the leading calendar icon on the chip. */
+    filterIconLabel: string;
+    /** Accessible label for the clear button. */
+    clearLabel: string;
+    /** Accessible label for the remove button. */
+    removeLabel: string;
+    /** Joins the start and end of the displayed range, e.g. "1 Jan 2024 – 7 Jan 2024". */
+    rangeSeparator: string;
+};
+export default filterDateRangeLocalization;