@nldd/design-system 0.8.69 → 0.8.71

package/dist/components/inputs/combo-box/combo-box.styles.js

@@ -13,10 +13,10 @@ export const comboBoxStyles = css `
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_corner-radius: var(--semantics-controls-md-corner-radius);
 		--_min-size: var(--semantics-controls-md-min-size);
-		--_inline-padding: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
+		--_inline-padding: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-width));
 		--_text-font: var(--semantics-input-fields-md-text-font);
-		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
-		--_z-index-button-focus: 1;
+		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-width));
+		--_button-focus-z-index: 1;
 		--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
 
 		${inheritedTextReset}
@@ -33,9 +33,9 @@ export const comboBoxStyles = css `
 	:host([size="sm"]) {
 		--_corner-radius: var(--semantics-controls-sm-corner-radius);
 		--_min-size: var(--semantics-controls-sm-min-size);
-		--_inline-padding: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
+		--_inline-padding: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-width));
 		--_text-font: var(--semantics-input-fields-sm-text-font);
-		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-xs-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-xs-min-size)) / 2 - var(--semantics-input-fields-border-width));
 		--_validation-icon-size: var(--semantics-input-fields-sm-validation-icon-size);
 	}
 
@@ -138,7 +138,7 @@ export const comboBoxStyles = css `
 
 	.combo-box__clear-button:focus-within {
 		position: relative;
-		z-index: var(--_z-index-button-focus);
+		z-index: var(--_button-focus-z-index);
 	}
 
 	.combo-box__validation-icon-area {
@@ -168,7 +168,7 @@ export const comboBoxStyles = css `
 
 	.combo-box__picker-button:focus-within {
 		position: relative;
-		z-index: var(--_z-index-button-focus);
+		z-index: var(--_button-focus-z-index);
 	}
 `;
 //# sourceMappingURL=combo-box.styles.js.map

package/dist/components/inputs/date-field/date-field.d.ts

@@ -0,0 +1,227 @@
+/**
+ * NLDD Design System Datumveld Component (Lit + TypeScript)
+ *
+ * Een tekstveld voor een datum, met een optionele kalender in een popover.
+ * De waarde is altijd ISO (jjjj-mm-dd); op het scherm staat de Nederlandse
+ * notatie (dd-mm-jjjj). Er wordt niet gemaskerd tijdens het typen: invoer wordt
+ * royaal geaccepteerd en pas bij het verlaten van het veld genormaliseerd.
+ *
+ * Foutmeldingen horen bij nldd-form-field, niet hier. Dit veld reflecteert
+ * alleen `invalid` / `valid`, net als nldd-text-field.
+ *
+ * @element nldd-date-field
+ *
+ * @attr {string} value - De datum als ISO (jjjj-mm-dd). Met `range` een ISO 8601-interval: `jjjj-mm-dd/jjjj-mm-dd`. Leeg wanneer er geen geldige datum staat.
+ * @attr {boolean} range - Kies een periode: twee invoervelden en een kalender in bereikmodus.
+ * @attr {string} min - Vroegst toegestane datum als ISO (jjjj-mm-dd).
+ * @attr {string} max - Laatst toegestane datum als ISO (jjjj-mm-dd).
+ * @attr {boolean} no-picker - Verbergt de kalenderknop. Standaard staat die knop er wel.
+ * @attr {string} placeholder - Placeholdertekst. Zet hier geen formaat in; gebruik daarvoor de supporting-label van nldd-form-field.
+ * @attr {string} input-id - Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field.
+ * @attr {string} size - 'md' (standaard) | 'sm'. Wordt automatisch gezet door nldd-form-field.
+ * @attr {boolean} invalid - Markeert het veld als ongeldig.
+ * @attr {boolean} valid - Markeert het veld als geldig.
+ * @attr {boolean} disabled - Uitgeschakelde staat.
+ * @attr {boolean} readonly - Alleen-lezen staat.
+ * @attr {boolean} required - Verplichte staat.
+ * @attr {string} name - Naam voor formulierverzending.
+ * @attr {string} autocomplete - Autocomplete-hint, bijvoorbeeld 'bday'.
+ * @attr {string} accessible-label - Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field.
+ * @attr {string} error-message-ids - Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field.
+ * @attr {string} width - Breedte. Standaard precies breed genoeg voor een datum plus de iconen; 'full' vult de container, of geef een eigen CSS-lengte.
+ * @attr {object} translations - Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands.
+ *
+ * @slot picker - Een eigen nldd-date-picker, in plaats van de standaardkalender. Het veld blijft `value`, `min`, `max` en `range` zetten; gebruik de slot voor wat alleen een kalender weet: `week-numbers`, `first-day-of-week`, `is-date-unavailable` en eigen vertalingen.
+ *
+ * @fires input - Bij elke wijziging. detail: { value } met de ISO-datum, of '' zolang er geen geldige datum staat.
+ * @fires change - Wanneer de waarde is vastgelegd. detail: { value } met de ISO-datum, of ''.
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import { type FormValue } from '../../../utilities/form-associated-mixin.js';
+import type { NLDDDateFieldTranslations } from './date-field.i18n.js';
+import './../../actions/icon-button/icon-button.js';
+import './../../content/icon/icon.js';
+declare const NLDDDateField_base: typeof LitElement & (abstract new (...args: any[]) => LitElement & import("../../../utilities/form-associated-mixin.js").FormAssociatedElement);
+export declare class NLDDDateField extends NLDDDateField_base {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult;
+    private _initialValue;
+    size: 'md' | 'sm';
+    value: string;
+    range: boolean;
+    min: string;
+    max: string;
+    noPicker: boolean;
+    inputId: string;
+    placeholder: string;
+    invalid: boolean;
+    valid: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    autocomplete: string;
+    /** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+    accessibleLabel: string;
+    errorMessageIds: string;
+    /** Optionele vaste breedte. Zonder waarde vult het veld zijn container. */
+    width: string;
+    /** Overschrijf een of meer vertaalsleutels. Niet opgegeven sleutels vallen terug op het Nederlands. */
+    translations: Partial<NLDDDateFieldTranslations>;
+    /** What the user sees and types. Kept apart from `value`, which stays ISO. */
+    private _display;
+    /** The same, for the end of a period. */
+    private _displayEnd;
+    /**
+     * The two ends of `value` while range is on. `value` stays the single source
+     * of truth - one shape in markup, as a property and in form data - and these
+     * are only the halves it is composed from.
+     */
+    get _startValue(): string;
+    get _endValue(): string;
+    private _setRange;
+    /**
+     * Put the earlier date first when both ends are filled. Typing a period
+     * backwards ("van 2027 t/m 2026") otherwise stays backwards, while the calendar
+     * always sorts a dragged range - so the two input methods disagreed. Returns
+     * whether it swapped, so the caller emits change only when something moved.
+     */
+    private _sortRange;
+    /**
+     * Sort on leaving the whole field, not per change: swapping mid-edit would move
+     * a value you just typed in one input into the other.
+     *
+     * relatedTarget stays inside the shadow tree while focus moves between the two
+     * inputs or to the calendar button, so only null or an element outside the
+     * field means focus truly left.
+     */
+    _handleFieldBlur(e: FocusEvent): void;
+    /**
+     * A typed date the calendar would refuse must not commit either. min/max are
+     * forwarded to the calendar, which blocks out-of-range days, but typed input
+     * bypassed that check, so a value the picker cannot produce slipped through.
+     * The bounds may be relative (today, today+3m), so they are resolved first.
+     * ISO strings compare lexically, so `<` / `>` are the date order.
+     */
+    private _withinBounds;
+    /** The parsed date, or '' when it is unparseable or out of bounds. Both cases
+     *  leave the raw text standing so the user can see and fix what they wrote. */
+    private _commit;
+    /**
+     * Whether a consumer put their own calendar in the slot. Kept as state rather
+     * than read during render: the built-in calendar has to disappear the moment
+     * one is slotted, or both would be in the popover at once.
+     */
+    _hasSlottedPicker: boolean;
+    private get _slottedPicker();
+    _handlePickerSlotChange(): void;
+    /**
+     * The field owns what a form owns - the value, the bounds, whether this is a
+     * period - and writes those onto a slotted calendar every render, so a
+     * consumer cannot set them to something the field would disagree with. What
+     * only a calendar knows (week numbers, first day of the week, which dates are
+     * unavailable, its own translations) is left untouched: that is the point of
+     * slotting one.
+     */
+    private _syncSlottedPicker;
+    firstUpdated(): void;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: File | string | FormData | null): void;
+    _t(key: keyof NLDDDateFieldTranslations): string;
+    /**
+     * The field's accessible name, with a fallback so the input is never nameless.
+     * nldd-form-field sets accessible-label to the field's label, so this fallback
+     * only fires standalone, where there is otherwise no name at all (WCAG 4.1.2).
+     */
+    get _fieldLabel(): string;
+    /**
+     * The calendar is nldd-date-picker in a popover, not the browser's own. The
+     * native showPicker() has no closing counterpart and fires no open or close
+     * events, and Safari ties dismissal to the input itself - which has to be
+     * invisible for the button beside it to be the only control. There it could
+     * not be closed at all.
+     */
+    _pickerOpen: boolean;
+    private get _pickerTrigger();
+    private get _popover();
+    /**
+     * One name for the dialog, used both as its accessible name and as the sheet's
+     * visible title. The field's own label says more than "Datum kiezen" ever
+     * could - a sheet headed "Geboortedatum" tells you what you are answering.
+     */
+    get _pickerLabel(): string;
+    _handlePickerClick(): void;
+    /**
+     * Where focus should land once the popover has closed. Set by whatever closes
+     * it, read on the close toggle. The popover restores focus to the pre-open
+     * element itself - and Safari, which does not focus a button on click, restores
+     * to the text input rather than the calendar button - so leaving it to the
+     * popover lands focus in the wrong place. We take over, but only after its
+     * restoration has run, or ours would be the one overwritten.
+     */
+    private _focusOnClose;
+    /**
+     * Move focus to where the close intent asked for, with the caret at the end of
+     * the end field for a period so an edit continues where the choice was made.
+     * Run on a microtask after the close toggle: the popover (and Safari, which does
+     * not focus a button on click) restores focus during that event, so only running
+     * after its synchronous work wins. A microtask rather than a frame - it beats the
+     * same restoration but is not throttled while the tab is unfocused.
+     */
+    private _applyCloseFocus;
+    _handlePickerDismiss(e: Event): void;
+    /**
+     * The popover width, bound in the template. A reactive @state, not a direct
+     * mutation of the popover: lit dirty-checks its own binding, so setting
+     * popover.width from the outside was never undone on a later render, and a
+     * popover once widened for a slotted picker stayed wide after that picker
+     * was gone. Owning the value here lets lit reset it.
+     */
+    _pickerPopoverWidth: string;
+    _handlePopoverToggle(e: Event): void;
+    /**
+     * The popover pins both its inline edges, so it cannot size to its own
+     * content: `auto` and `max-content` both collapse it to zero width. The
+     * built-in calendar has a known width, but a slotted one need not - week
+     * numbers add a whole column - so that one is measured once it is on screen.
+     * Falls back to the built-in width when there is no slotted picker, so it
+     * never stays stuck at a stale measured value.
+     */
+    private _fitPopoverToSlottedPicker;
+    /**
+     * The picker speaks ISO already, so there is nothing to convert. A finished
+     * period lands the caret at the end of the end field - you just settled the
+     * second date, so that is where an edit continues - while a single date is final
+     * in one click and returns to the calendar button.
+     */
+    _handlePickerChange(e: Event): void;
+    /**
+     * Backspace on an empty end field steps back to the end of the start field, so
+     * a whole period can be cleared in one run of backspaces instead of reaching for
+     * the mouse to move between the two inputs.
+     */
+    _handleInputKeydown(e: KeyboardEvent, end: boolean): void;
+    _handleInput(e: Event, end?: boolean): void;
+    _handleChange(e: Event, end?: boolean): void;
+    formValue(): FormValue;
+    private _emit;
+    get _displayValue(): string;
+    get _displayEndValue(): string;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-date-field': NLDDDateField;
+    }
+}
+export {};
+//# sourceMappingURL=date-field.d.ts.map

package/dist/components/inputs/date-field/date-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/date-field/date-field.ts"],"names":[],"mappings":"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"}

package/dist/components/inputs/date-field/date-field.i18n.d.ts

@@ -0,0 +1,11 @@
+export declare const nlddDateFieldTranslations: {
+    'components.date-field.to-pick-date-action': string;
+    'components.date-field.default-label': string;
+    'components.date-field.default-range-label': string;
+    'components.date-field.cancel-action': string;
+    'components.date-field.range-from-lowercase-label': string;
+    'components.date-field.range-to-lowercase-label': string;
+    'components.date-field.range-to-short-lowercase-label': string;
+};
+export type NLDDDateFieldTranslations = typeof nlddDateFieldTranslations;
+//# sourceMappingURL=date-field.i18n.d.ts.map

package/dist/components/inputs/date-field/date-field.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/date-field/date-field.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB;;;;;;;;CAerC,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,OAAO,yBAAyB,CAAC"}

package/dist/components/inputs/date-field/date-field.i18n.js

@@ -0,0 +1,17 @@
+export const nlddDateFieldTranslations = {
+    // Opent de kalender, dus infinitief zoals andere indirecte acties.
+    'components.date-field.to-pick-date-action': 'Datum kiezen',
+    // Terugval-naam als een consument geen accessible-label geeft en het veld niet
+    // in een nldd-form-field staat: zonder dit is de invoer een naamloze control.
+    'components.date-field.default-label': 'Datum',
+    'components.date-field.default-range-label': 'Periode',
+    // Sluit de sheet zonder te kiezen, dus gebiedende wijs zoals andere directe acties.
+    'components.date-field.cancel-action': 'Annuleer',
+    // Voorzetsels die de twee invoervelden van een periode introduceren, niet de
+    // eindpunten zelf; het veldlabel staat ervoor ("Periode, van"). De korte vorm
+    // staat zichtbaar tussen de twee datums.
+    'components.date-field.range-from-lowercase-label': 'van',
+    'components.date-field.range-to-lowercase-label': 'tot en met',
+    'components.date-field.range-to-short-lowercase-label': 't/m',
+};
+//# sourceMappingURL=date-field.i18n.js.map

package/dist/components/inputs/date-field/date-field.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.i18n.js","sourceRoot":"","sources":["../../../../src/components/inputs/date-field/date-field.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACxC,mEAAmE;IACnE,2CAA2C,EAAE,cAAc;IAC3D,+EAA+E;IAC/E,8EAA8E;IAC9E,qCAAqC,EAAE,OAAO;IAC9C,2CAA2C,EAAE,SAAS;IACtD,oFAAoF;IACpF,qCAAqC,EAAE,UAAU;IACjD,6EAA6E;IAC7E,8EAA8E;IAC9E,yCAAyC;IACzC,kDAAkD,EAAE,KAAK;IACzD,gDAAgD,EAAE,YAAY;IAC9D,sDAAsD,EAAE,KAAK;CAC7D,CAAC"}