@nordhealth/components 4.26.2 → 5.0.0

package/lib/src/calendar/DateRangeSelectEvent.d.ts

@@ -0,0 +1,16 @@
+import { NordEvent } from '../common/events.js';
+/**
+ * Dispatched by `nord-calendar` in `range` mode when a complete range has been
+ * selected (the user has clicked a start day and then an end day). Carries the
+ * inclusive `start` and `end` dates, normalised so `start <= end`.
+ */
+export declare class DateRangeSelectEvent extends NordEvent {
+    start: Date;
+    end: Date;
+    constructor(name: string, start: Date, end: Date);
+    /** Convenience accessor mirroring `CustomEvent.detail`. */
+    get detail(): {
+        start: Date;
+        end: Date;
+    };
+}

package/lib/src/card/Card.d.ts

@@ -5,7 +5,7 @@ import { LitElement } from 'lit';
  * actionable information.
  *
  * @status ready
- * @category structure
+ * @category container
  * @slot - The card content.
  * @slot header - Optional slot that holds a header for the card.
  * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.

package/lib/src/collapsible/Collapsible.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import { NordEvent } from '../common/events.js';
+/**
+ * Event dispatched when a collapsible is opened or closed, either by the user
+ * activating its trigger or programmatically toggling the `open` property.
+ */
+export declare class CollapsibleToggleEvent extends NordEvent {
+    open: boolean;
+    constructor(open: boolean);
+}
+declare const Collapsible_base: typeof LitElement;
+/**
+ * Collapsible is a disclosure that shows or hides a section of content. It wires
+ * together a [Collapsible Trigger](/components/collapsible-trigger/) and a
+ * [Collapsible Panel](/components/collapsible-panel/), animating the panel
+ * height as it opens and closes.
+ *
+ * @status draft
+ * @category container
+ * @lightDom true
+ *
+ * @slot - Default slot for the [Collapsible Trigger](/components/collapsible-trigger/), [Collapsible Panel](/components/collapsible-panel/) and any other content.
+ *
+ * @fires {CollapsibleToggleEvent} toggle - Dispatched when the collapsible is opened or closed. The event includes an `open` property reflecting the new state.
+ */
+export default class Collapsible extends Collapsible_base {
+    private collapsibleId;
+    /**
+     * Whether the collapsible is open.
+     */
+    open: boolean;
+    /**
+     * Whether the collapsible should ignore user interaction.
+     */
+    disabled: boolean;
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+    private get trigger();
+    private get panel();
+    /**
+     * Wire up the ARIA relationship between the trigger and the panel and reflect
+     * the initial open state to both.
+     */
+    private setup;
+    protected handleOpenChange(oldValue: boolean | undefined, newValue: boolean): void;
+    protected handleDisabledChange(): void;
+    /**
+     * Push the current open state down to the trigger and panel.
+     */
+    private syncState;
+    /**
+     * Toggle the collapsible open or closed. Called by the trigger.
+     */
+    toggle(): void;
+    /**
+     * Open the collapsible programmatically.
+     */
+    expand(): void;
+    /**
+     * Close the collapsible programmatically.
+     */
+    collapse(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-collapsible': Collapsible;
+    }
+}
+export {};

package/lib/src/collapsible/CollapsiblePanel.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * Collapsible Panel holds the content revealed by its
+ * [Collapsible Trigger](/components/collapsible-trigger/). It must be placed
+ * inside a [Collapsible](/components/collapsible/) and animates its height as it
+ * opens and closes.
+ *
+ * @status draft
+ * @category container
+ * @lightDom true
+ *
+ * @slot - Default slot for the collapsible content.
+ *
+ * @attr {boolean} data-open - Present while the panel is open (or opening).
+ * @attr {boolean} data-closed - Present while the panel is closed.
+ * @attr {boolean} data-starting-style - Present for the first frame of the open transition.
+ * @attr {boolean} data-ending-style - Present while the close transition runs.
+ *
+ * @cssprop [--n-collapsible-panel-height] - Set during the open/close animation to the measured content height. Read it to coordinate custom animations.
+ */
+export default class CollapsiblePanel extends LitElement {
+    /**
+     * Whether the panel is open. Set by the parent
+     * [Collapsible](/components/collapsible/).
+     */
+    open: boolean;
+    private collapse;
+    connectedCallback(): void;
+    protected createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-collapsible-panel': CollapsiblePanel;
+    }
+}

package/lib/src/collapsible/CollapsibleTrigger.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * Collapsible Trigger is the interactive control that opens and closes its
+ * [Collapsible](/components/collapsible/) panel. It must be placed inside a
+ * [Collapsible](/components/collapsible/).
+ *
+ * @status draft
+ * @category container
+ * @lightDom true
+ *
+ * @slot - Default slot for the trigger label and/or an icon.
+ */
+export default class CollapsibleTrigger extends LitElement {
+    /**
+     * Whether the associated panel is open. Set by the parent
+     * [Collapsible](/components/collapsible/); reflected so it can be styled.
+     */
+    open: boolean;
+    /**
+     * Whether the trigger is disabled. Set by the parent
+     * [Collapsible](/components/collapsible/).
+     */
+    disabled: boolean;
+    private focusable;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected createRenderRoot(): this;
+    private get collapsible();
+    protected handleOpenChange(): void;
+    private activate;
+    private handleClick;
+    private handleKeydown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-collapsible-trigger': CollapsibleTrigger;
+    }
+}

package/lib/src/combobox/Combobox.d.ts

@@ -0,0 +1,131 @@
+import type { ComboboxOption } from './ComboboxBase.js';
+import ComboboxBase from './ComboboxBase.js';
+import '../kbd/Kbd.js';
+import '../tag/Tag.js';
+import './ComboboxOption.js';
+import './ComboboxGroup.js';
+export type { ComboboxOption } from './ComboboxBase.js';
+export { ComboboxClearEvent, ComboboxCreateEvent } from './ComboboxEvents.js';
+/**
+ * Combobox lets users choose one option (or several) from a list by typing to
+ * filter, then picking with the keyboard or pointer. Use it when a [Select](/components/select/)
+ * would be unwieldy because there are many options to scan.
+ *
+ * Combobox is a control only — it has no built-in label, hint or error. Compose
+ * it inside a [Field](/components/field/) to give it a label, hint and error
+ * message, the same way you would a native input.
+ *
+ * The committed `value` is an option's `value` (or an array of them with
+ * `multiple`); the input is a filter/search field whose text is discarded on
+ * commit. For a free-text input with suggestions where the typed text is the
+ * value, use [Autocomplete](/components/autocomplete/) instead.
+ *
+ * @status draft
+ * @category form
+ * @lightDom true
+ *
+ * @slot start - Optional slot used to place an icon or prefix at the start of the control.
+ * @slot end - Optional slot used to place an icon or suffix at the end of the control.
+ *
+ * @fires {NordEvent} change - Dispatched when the committed value changes via user interaction.
+ * @fires {NordEvent} input - Dispatched as the user types into the search input.
+ * @fires {NordEvent} open - Dispatched when the listbox is opened.
+ * @fires {NordEvent} close - Dispatched when the listbox is closed.
+ * @fires {ComboboxClearEvent} clear - Dispatched when the value is cleared via the clear button or `clear()`.
+ * @fires {ComboboxCreateEvent} create - Dispatched when the user chooses the "Create" affordance in a `creatable` combobox.
+ *
+ * @localization clearLabel - Accessible label for the clear button.
+ * @localization createLabel - Label for the "Create" affordance, given the current query.
+ * @localization noResults - Message shown when no options match the query.
+ *
+ * @cssprop [--n-combobox-list-inline-size] - Controls the inline size, or width, of the dropdown list. Defaults to the width of the combobox control.
+ * @cssprop [--n-combobox-block-size] - Controls the block size, or height, of the control. The medium default is `var(--n-space-xl)`; the s and l sizes scale from it.
+ *
+ * @attr {boolean} data-invalid - Present while the control 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 Combobox extends ComboboxBase {
+    /**
+     * The value of the combobox. A single string when `multiple` is `false`,
+     * or an array of strings when `multiple` is `true`.
+     */
+    value: string | string[];
+    /**
+     * Allows selecting more than one option. Selected options are shown as
+     * removable chips and the listbox stays open after each selection.
+     */
+    multiple: boolean;
+    /**
+     * Shows a clear (✕) button while there is a value. Pressing it resets the
+     * value to `''` (or `[]` when `multiple`), then fires `clear` and `change`.
+     * Defaults to `true`.
+     *
+     * This prop only toggles the button. A single-select value can always be
+     * cleared by deleting the input text, regardless of this prop (Base UI
+     * parity).
+     */
+    clearable: boolean;
+    /**
+     * Offers a "Create" affordance when the query does not exactly match an
+     * existing option. Choosing it (click or Enter) adds the typed value as an
+     * option and selects it (in `multiple` mode it is appended as a chip), and
+     * fires a cancelable `create` event. Call `event.preventDefault()` to opt out
+     * and handle creation yourself (e.g. to map the value to a different `value`).
+     */
+    creatable: boolean;
+    /** Options contributed by declarative `<nord-combobox-option>` children. */
+    private slottedOptions;
+    /** Options the combobox created itself via the auto-add `creatable` flow. */
+    private createdOptions;
+    /** Registered declarative option elements (rebuilt into `slottedOptions`). */
+    private optionElements;
+    /** The registry the option/group children use to self-register (provide/inject). */
+    private optionRegistry;
+    private registryProvider;
+    connectedCallback(): void;
+    /** Read a registered option element into a plain `ComboboxOption`. */
+    private readOptionElement;
+    /** Rebuild `slottedOptions` from the registered elements, in DOM order. */
+    private rebuildSlottedOptions;
+    /** Cache for the merged option list so `filtered`'s identity check stays stable. */
+    private resolvedCache?;
+    /**
+     * The options to render: the `.options` property when set (dynamic/async data),
+     * otherwise the declarative `<nord-combobox-option>` children, with any
+     * auto-created options merged on top.
+     */
+    protected get resolvedOptions(): ComboboxOption[];
+    /** Whether chip/array logic applies — i.e. `multiple` selection. */
+    private get isMultiple();
+    /**
+     * In `multiple` mode the input is always a pure filter (selections live in
+     * chips). In single-select it shows the live query only once the user types;
+     * until then it keeps the selected option's label visible and editable (Base
+     * UI parity — see `ComboboxBase.showsQueryInInput`).
+     */
+    protected get showsQueryInInput(): boolean;
+    protected get inputPlaceholder(): string | undefined;
+    /** The index of the create row, or `-1` when it isn't shown. */
+    protected get createIndex(): number;
+    /** Whether the "Create" affordance should be offered for the current query. */
+    protected get canCreate(): boolean;
+    protected get showClear(): boolean;
+    protected get ariaMultiselectable(): 'true' | 'false';
+    /**
+     * Clear the current value, firing `clear` then `change`.
+     */
+    clear(): void;
+    protected selectOption(option: ComboboxOption): void;
+    protected onInput(input: HTMLInputElement): void;
+    protected emitCreate(): void;
+    protected onUnhandledKeydown(e: KeyboardEvent): void;
+    private removeValue;
+    /** Multiple mode renders selected options as removable chips before the input. */
+    protected renderLeadingControl(): unknown;
+    protected renderCreate(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-combobox': Combobox;
+    }
+}