@nldd/design-system 0.8.76 → 0.8.78

package/dist/components/inputs/time-field/time-field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/time-field/time-field.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,yBA0L3B,CAAC"}

package/dist/components/inputs/time-field/time-field.styles.js

@@ -0,0 +1,192 @@
+import { css, unsafeCSS } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/shadow-resets.js';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+export const timeFieldStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host */
+
+	:host {
+		--_text-width: 5.5ch;
+		--_edge-width: calc(var(--_inline-padding) + var(--semantics-input-fields-border-width));
+		--_validation-icon-area-width: calc(var(--_validation-icon-size) + var(--primitives-space-8));
+		--_picker-button-size: var(--semantics-controls-sm-min-size);
+		--_end-padding-right: calc((var(--_min-size) - var(--_picker-button-size)) / 2 - var(--semantics-input-fields-border-width));
+		--_trailing-width: calc(var(--_validation-icon-area-width) + var(--_picker-button-size) + var(--_end-padding-right));
+		--_fixed-width: calc(var(--_edge-width) + var(--_trailing-width));
+		--_width: calc(var(--_fixed-width) + var(--_text-width));
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_background-color: var(--semantics-input-fields-background-color);
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_inline-padding: var(--semantics-controls-md-inline-padding);
+		--_text-font: var(--semantics-input-fields-md-text-font);
+		--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
+
+		${inheritedTextReset}
+		display: block;
+		width: var(--_width);
+		min-width: var(--_fixed-width);
+		max-width: 100%;
+		font: var(--_text-font);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([no-picker]) {
+		--_fixed-width: calc(var(--_edge-width) + var(--_inline-padding) + var(--_validation-icon-area-width));
+	}
+
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_inline-padding: var(--semantics-controls-sm-inline-padding);
+		--_text-font: var(--semantics-input-fields-sm-text-font);
+		--_validation-icon-size: var(--semantics-input-fields-sm-validation-icon-size);
+		--_picker-button-size: var(--semantics-controls-xs-min-size);
+	}
+
+
+	/* # Block */
+
+	.time-field {
+		box-sizing: border-box;
+		display: flex;
+		border: var(--semantics-input-fields-border);
+		border-radius: var(--_corner-radius);
+		background-color: var(--_background-color);
+		min-height: var(--_min-size);
+		padding-left: calc(var(--_inline-padding) - var(--semantics-input-fields-border-width));
+		flex-direction: row;
+		align-items: center;
+	}
+
+	:host([valid]) .time-field {
+		border-color: var(--semantics-input-fields-is-valid-border-color);
+	}
+
+	:host([invalid]) .time-field {
+		border-color: var(--semantics-input-fields-is-invalid-border-color);
+	}
+
+	:host([readonly]) .time-field {
+		--_background-color: var(--semantics-input-fields-is-read-only-background-color);
+		border-color: var(--semantics-input-fields-is-read-only-border-color);
+	}
+
+	:host([disabled]) .time-field {
+		opacity: var(--primitives-opacity-disabled);
+	}
+
+	.time-field:has(input:-webkit-autofill),
+	.time-field:has(input:autofill) {
+		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
+	}
+
+	/* Keyed on the text input, not :focus-within: the button and the popover live
+	   in this box too and would draw a second ring around the whole field. */
+	.time-field:has(.time-field__input:focus) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Elements */
+
+	.time-field__input {
+		box-sizing: border-box;
+		margin: 0;
+		outline: none;
+		border: none;
+		background: transparent;
+		min-width: 0;
+		min-height: calc(var(--_min-size) - var(--semantics-input-fields-border-width) * 2);
+		overflow: hidden;
+		padding: 0;
+		flex-grow: 1;
+		color: var(--semantics-content-color);
+		font: var(--_text-font);
+		appearance: none;
+	}
+
+	:host([disabled]) .time-field__input {
+		pointer-events: none;
+	}
+
+	.time-field__input::placeholder {
+		color: var(--semantics-input-fields-placeholder-color);
+	}
+
+	.time-field__input:-webkit-autofill,
+	.time-field__input:autofill,
+	.time-field__input:-webkit-autofill:disabled,
+	.time-field__input:autofill:disabled {
+		box-shadow: 0 0 0 999px var(--_background-color) inset;
+		-webkit-text-fill-color: var(--semantics-input-fields-is-autofill-content-color);
+	}
+
+	.time-field__input-fade {
+		position: relative;
+		width: 0;
+		flex-shrink: 0;
+		align-self: stretch;
+	}
+
+	.time-field__input-fade::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: var(--_corner-radius);
+		background: linear-gradient(90deg, color-mix(in oklch, var(--_background-color) 0%, transparent) 0%, var(--_background-color) 100%);
+		pointer-events: none;
+		width: var(--primitives-space-8);
+	}
+
+	.time-field__validation-icon-area {
+		display: flex;
+		width: var(--_validation-icon-area-width);
+		height: 100%;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([valid]) .time-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-valid-icon-color);
+	}
+
+	:host([invalid]) .time-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-invalid-icon-color);
+	}
+
+	.time-field__validation-icon {
+		display: flex;
+		width: var(--_validation-icon-size);
+		height: var(--_validation-icon-size);
+	}
+
+	.time-field__picker-button {
+		position: relative;
+		display: flex;
+		flex-shrink: 0;
+		padding-right: var(--_end-padding-right);
+		align-items: center;
+	}
+
+
+	@media (min-width: ${mdMin}) {
+		.time-field__picker-button nldd-top-title-bar {
+			display: none;
+		}
+	}
+`;
+//# sourceMappingURL=time-field.styles.js.map

package/dist/components/inputs/time-field/time-field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-field.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/time-field/time-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;IAwB9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA6JA,KAAK;;;;;CAK1B,CAAC"}

package/dist/components/inputs/time-field/time-field.template.d.ts

@@ -0,0 +1,20 @@
+import { TemplateResult } from 'lit';
+import type { NLDDTimeField } from './time-field.js';
+import './../../actions/icon-button/icon-button.js';
+import './../../content/icon/icon.js';
+import './../../layout/popover/popover.js';
+import './../../layout/container/container.js';
+import './../../layout/spacer/spacer.js';
+import './../../actions/button/button.js';
+import './../../navigation/top-title-bar/top-title-bar.js';
+import './../time-picker/time-picker.js';
+/**
+ * The popover pins both its left and its right edge, so an `auto` width
+ * collapses and the picker hangs outside a zero-width box. Hence spelled out,
+ * from the same token the picker measures its columns with: two columns of one
+ * and a half control sizes, plus the colon between them and the container
+ * padding.
+ */
+export declare const PICKER_POPOVER_WIDTH = "calc(var(--semantics-controls-md-min-size) * 3 + var(--primitives-space-48) + var(--primitives-space-16) * 2)";
+export declare function timeFieldTemplate(component: NLDDTimeField): TemplateResult;
+//# sourceMappingURL=time-field.template.d.ts.map

package/dist/components/inputs/time-field/time-field.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/time-field/time-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,4CAA4C,CAAC;AACpD,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,iCAAiC,CAAC;AACzC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAC3D,OAAO,iCAAiC,CAAC;AAOzC;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,kHAAkH,CAAC;AAgFpJ,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,CAyB1E"}

package/dist/components/inputs/time-field/time-field.template.js

@@ -0,0 +1,126 @@
+import { html, nothing } from 'lit';
+import './../../actions/icon-button/icon-button.js';
+import './../../content/icon/icon.js';
+import './../../layout/popover/popover.js';
+import './../../layout/container/container.js';
+import './../../layout/spacer/spacer.js';
+import './../../actions/button/button.js';
+import './../../navigation/top-title-bar/top-title-bar.js';
+import './../time-picker/time-picker.js';
+/* eslint-disable lit-a11y/no-autofocus -- Not autofocus on page load: nldd-popover
+   reads this attribute to pick its focus target inside an overlay the user just
+   opened. Without it focus stops on the popover itself and the arrow keys do
+   nothing until you have tabbed into the selection yourself. */
+/**
+ * The popover pins both its left and its right edge, so an `auto` width
+ * collapses and the picker hangs outside a zero-width box. Hence spelled out,
+ * from the same token the picker measures its columns with: two columns of one
+ * and a half control sizes, plus the colon between them and the container
+ * padding.
+ */
+export const PICKER_POPOVER_WIDTH = 'calc(var(--semantics-controls-md-min-size) * 3 + var(--primitives-space-48) + var(--primitives-space-16) * 2)';
+/** One branch for both states: two nearly identical copies drifted apart elsewhere. */
+function renderValidationIcon(component) {
+    const name = component.invalid ? 'invalid' : (component.valid ? 'valid' : '');
+    if (!name)
+        return nothing;
+    return html `
+		<div class="time-field__validation-icon-area">
+			<span class="time-field__validation-icon">
+				<nldd-icon
+					name=${name}
+					aria-hidden="true"
+				></nldd-icon>
+			</span>
+		</div>
+	`;
+}
+/**
+ * The picker hangs off the button, which sits at the end of the field, so
+ * bottom-end lands it under the input. Against the left edge of the screen
+ * Floating UI falls back to opening rightward on its own.
+ */
+function renderPicker(component) {
+    if (component.noPicker)
+        return nothing;
+    const buttonSize = component.size === 'sm' ? 'xs' : 'sm';
+    return html `
+		<div class="time-field__picker-button">
+			<nldd-icon-button
+				variant="neutral-tinted"
+				size=${buttonSize}
+				icon="clock"
+				text=${component._t('components.time-field.to-pick-time-action')}
+				tooltip-timing="never"
+				?disabled=${component.disabled || component.readonly}
+				@click=${component._handlePickerClick}
+			></nldd-icon-button>
+			<nldd-popover
+				accessible-label=${component._pickerLabel}
+				placement="bottom-end"
+				width=${PICKER_POPOVER_WIDTH}
+				@toggle=${component._handlePopoverToggle}
+			>
+				<nldd-top-title-bar
+					text=${component._pickerLabel}
+					dismiss-text=${component._t('components.time-field.cancel-action')}
+					@dismiss=${component._handlePickerDismiss}
+				></nldd-top-title-bar>
+				<nldd-container padding="16"
+					@keydown=${component._handlePickerKeydown}
+					@input=${component._handlePickerInput}
+					@change=${component._handlePickerChange}
+				>
+					<slot name="picker"
+						@slotchange=${component._handlePickerSlotChange}
+					></slot>
+					${component._hasSlottedPicker ? nothing : html `
+						<nldd-time-picker
+							autofocus
+							width="full"
+							value=${component._pickerValue || nothing}
+							min=${component.min || nothing}
+							max=${component.max || nothing}
+							step=${component.step}
+						></nldd-time-picker>
+					`}
+					<nldd-spacer size="16"></nldd-spacer>
+					<nldd-button
+						variant="neutral-base"
+						size=${component._pickerButtonSize}
+						width="full"
+						text=${component._t('components.time-field.confirm-action')}
+						@click=${component._handlePickerConfirm}
+					></nldd-button>
+				</nldd-container>
+			</nldd-popover>
+		</div>
+	`;
+}
+export function timeFieldTemplate(component) {
+    return html `
+		<div class="time-field">
+			<input class="time-field__input"
+				id=${component.inputId || nothing}
+				type="text"
+				inputmode="numeric"
+				.value=${component._displayValue}
+				placeholder=${component.placeholder || nothing}
+				?disabled=${component.disabled}
+				?readonly=${component.readonly}
+				?required=${component.required}
+				autocomplete=${component.autocomplete || nothing}
+				aria-label=${component._fieldLabel || nothing}
+				aria-describedby=${component.errorMessageIds || nothing}
+				aria-invalid=${component.invalid ? 'true' : nothing}
+				@keydown=${component._handleInputKeydown}
+				@input=${component._handleInput}
+				@change=${component._handleChange}
+			>
+			<div class="time-field__input-fade"></div>
+			${renderValidationIcon(component)}
+			${renderPicker(component)}
+		</div>
+	`;
+}
+//# sourceMappingURL=time-field.template.js.map

package/dist/components/inputs/time-field/time-field.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-field.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/time-field/time-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,iCAAiC,CAAC;AACzC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAC3D,OAAO,iCAAiC,CAAC;AAEzC;;;gEAGgE;AAEhE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,+GAA+G,CAAC;AAEpJ,uFAAuF;AACvF,SAAS,oBAAoB,CAAC,SAAwB;IACrD,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9E,IAAI,CAAC,IAAI;QAAE,OAAO,OAAO,CAAC;IAC1B,OAAO,IAAI,CAAA;;;;YAIA,IAAI;;;;;EAKd,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,SAAS,YAAY,CAAC,SAAwB;IAC7C,IAAI,SAAS,CAAC,QAAQ;QAAE,OAAO,OAAO,CAAC;IACvC,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACzD,OAAO,IAAI,CAAA;;;;WAID,UAAU;;WAEV,SAAS,CAAC,EAAE,CAAC,2CAA2C,CAAC;;gBAEpD,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ;aAC3C,SAAS,CAAC,kBAAkB;;;uBAGlB,SAAS,CAAC,YAAY;;YAEjC,oBAAoB;cAClB,SAAS,CAAC,oBAAoB;;;YAGhC,SAAS,CAAC,YAAY;oBACd,SAAS,CAAC,EAAE,CAAC,qCAAqC,CAAC;gBACvD,SAAS,CAAC,oBAAoB;;;gBAG9B,SAAS,CAAC,oBAAoB;cAChC,SAAS,CAAC,kBAAkB;eAC3B,SAAS,CAAC,mBAAmB;;;oBAGxB,SAAS,CAAC,uBAAuB;;OAE9C,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;;;eAIpC,SAAS,CAAC,YAAY,IAAI,OAAO;aACnC,SAAS,CAAC,GAAG,IAAI,OAAO;aACxB,SAAS,CAAC,GAAG,IAAI,OAAO;cACvB,SAAS,CAAC,IAAI;;MAEtB;;;;aAIO,SAAS,CAAC,iBAAiB;;aAE3B,SAAS,CAAC,EAAE,CAAC,sCAAsC,CAAC;eAClD,SAAS,CAAC,oBAAoB;;;;;EAK3C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,OAAO,IAAI,CAAA;;;SAGH,SAAS,CAAC,OAAO,IAAI,OAAO;;;aAGxB,SAAS,CAAC,aAAa;kBAClB,SAAS,CAAC,WAAW,IAAI,OAAO;gBAClC,SAAS,CAAC,QAAQ;gBAClB,SAAS,CAAC,QAAQ;gBAClB,SAAS,CAAC,QAAQ;mBACf,SAAS,CAAC,YAAY,IAAI,OAAO;iBACnC,SAAS,CAAC,WAAW,IAAI,OAAO;uBAC1B,SAAS,CAAC,eAAe,IAAI,OAAO;mBACxC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;eACxC,SAAS,CAAC,mBAAmB;aAC/B,SAAS,CAAC,YAAY;cACrB,SAAS,CAAC,aAAa;;;KAGhC,oBAAoB,CAAC,SAAS,CAAC;KAC/B,YAAY,CAAC,SAAS,CAAC;;EAE1B,CAAC;AACH,CAAC"}

package/dist/components/inputs/time-picker/time-picker.d.ts

@@ -0,0 +1,135 @@
+/**
+ * NLDD Design System Time Picker Component (Lit + TypeScript)
+ *
+ * Twee kolommen, uren en minuten, die als een wiel langs de selectie in het midden
+ * schuiven. Het component is zelfstandig bruikbaar (inline op een pagina, in een
+ * filterpaneel) en zit ook in de popover van nldd-time-field. Waarden zijn altijd
+ * 24-uurs `HH:mm`.
+ *
+ * Scrollen ís kiezen: wat in het midden tot stilstand komt, is de waarde. Met het
+ * toetsenbord bedien je de selectie, want dat is wat een wiel is: uur en minuut zijn
+ * er elk een spinbutton. De kolommen eronder staan op aria-hidden, zodat dezelfde
+ * waarden niet twee keer worden voorgelezen.
+ *
+ * @element nldd-time-picker
+ *
+ * @attr {string} value - De gekozen tijd als `HH:mm` (24-uurs).
+ * @attr {string} min - Vroegst toegestane tijd als `HH:mm`. Is tevens de basis waarvandaan `step` telt.
+ * @attr {string} max - Laatst toegestane tijd als `HH:mm`.
+ * @attr {number} step - Minutenstap (standaard 1). Bepaalt welke minuten in de kolom staan.
+ * @attr {number} rows - Hoogte van de kolommen in rijen (standaard 7, minimaal 3). De gekozen waarde staat altijd in het midden, dus een oneven aantal toont hele rijen en een even aantal kapt boven en onder een halve rij af.
+ * @attr {string} width - Breedte: `full` vult de container, of geef een eigen CSS-lengte.
+ * @attr {string} accessible-label - Toegankelijke naam van de picker.
+ * @attr {object} translations - Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands.
+ *
+ * @fires input - Bij elke wijziging: scrollen, de pijltjestoetsen. detail: { value } met `HH:mm`.
+ * @fires change - Wanneer de keuze is bevestigd: een klik op een waarde of op de selectie, of Enter. detail: { value } met `HH:mm`. Scrollen geeft alleen `input`, want anders zou een veld dat de picker in een popover toont al vastleggen zodra je stopt met scrollen.
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import { type NLDDTimePickerTranslations } from './time-picker.i18n.js';
+export declare function toMinutes(time: string): number;
+export declare function fromMinutes(total: number): string;
+export declare class NLDDTimePicker extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: string;
+    min: string;
+    max: string;
+    step: number;
+    rows: number;
+    width: string;
+    accessibleLabel: string;
+    translations: Partial<NLDDTimePickerTranslations>;
+    /**
+     * Where scrolling has landed, per column, for as long as it is not recorded.
+     * Kept apart from `value`, which only records once scrolling comes to rest.
+     * Were the selection to show the recorded value, digits would slide past
+     * behind it while the number in the selection stayed put, and then it lies
+     * about where you are.
+     */
+    private _scrolledTo;
+    _t(key: keyof NLDDTimePickerTranslations): string;
+    get _label(): string;
+    private get _minMinutes();
+    private get _maxMinutes();
+    private get _stepMinutes();
+    /** Every valid time: from `min` (or midnight) in increments of `step`, up to
+     *  and including `max`. One list, because the two columns are projections of
+     *  it. That way an hour can never appear in its column without a valid minute
+     *  to go with it. */
+    private get _slots();
+    /** The hours for which at least one valid minute exists. */
+    get _hours(): number[];
+    /** The minutes within the chosen hour. Without a chosen hour, those of the
+     *  first hour, so the column never looks empty before anything is picked. */
+    get _minutes(): number[];
+    /** The chosen time in minutes, or null while there is no valid value. */
+    private get _selected();
+    get _selectedHour(): number | null;
+    get _selectedMinute(): number | null;
+    /** The number now standing in the selection: whatever lies in the middle while
+     *  scrolling, and otherwise simply the chosen value. */
+    get _centeredHour(): number | null;
+    get _centeredMinute(): number | null;
+    /**
+     * Pick an hour or a minute. The hour holds on to the chosen minute when it
+     * fits inside it, so moving the hour keeps you on the same minute instead of
+     * jumping back to the start every time. When it does not fit (because of
+     * `min`, `max` or a step that does not work out), the first possible minute
+     * in that hour.
+     */
+    _select(column: 'hours' | 'minutes', number: number, commit?: boolean): void;
+    private _emit;
+    /**
+     * Arrow keys within a column, plus Home and End. The column is a single tab
+     * stop (roving tabindex), so Tab takes you to the next column instead of to
+     * the next value.
+     */
+    _handleKeydown(e: KeyboardEvent, column: 'hours' | 'minutes'): void;
+    /** Move focus to the spinbutton of the other column. */
+    private _focusColumn;
+    /**
+     * While we scroll ourselves (on opening, or after a choice) the scrolling must
+     * not pick something again: that would overwrite the choice just made with
+     * whatever happens to pass by.
+     */
+    private _scrollingSelf;
+    private _scrollTimers;
+    private _selfScrollTimer;
+    /**
+     * Focus lands on the hour, the way nldd-date-picker focuses a day. The host
+     * itself forwards nowhere, so an overlay that focuses this picker would leave
+     * the arrow keys dead until the user tabbed into the selection themselves.
+     */
+    focus(options?: FocusOptions): void;
+    disconnectedCallback(): void;
+    /**
+     * Scrolling is choosing: whatever comes to rest in the middle is the value.
+     * There is a `scrollend` event, but not everywhere, so this waits until
+     * scrolling has been still for 120ms. Short enough to feel immediate, long
+     * enough not to pick halfway through a swipe.
+     */
+    _handleScroll(e: Event, column: 'hours' | 'minutes'): void;
+    /** The number of the option closest to the middle of the column. */
+    private _centeredOption;
+    /** Records whatever came to rest in the middle. */
+    private _selectCentred;
+    /**
+     * Put the chosen value in the middle of the view. The column is seven values
+     * tall, so `center` lands it on the fourth row with three above and three
+     * below.
+     *
+     * Public because a hidden element cannot be scrolled: with the picker in a
+     * popover it has no dimensions yet when the value is set, and scrollIntoView
+     * does nothing. The field therefore calls this as soon as the popover
+     * opens.
+     */
+    scrollSelectedIntoView(): void;
+    updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-time-picker': NLDDTimePicker;
+    }
+}
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/components/inputs/time-picker/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/time-picker/time-picker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAItD,OAAO,EAA8B,KAAK,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAIpG,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG9C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEjD;AAMD,qBACa,cAAe,SAAQ,UAAU;IAE7C,OAAgB,MAAM,0BAAoB;IAG1C,KAAK,SAAM;IAGX,GAAG,SAAM;IAGT,GAAG,SAAM;IAGT,IAAI,SAAK;IAGT,IAAI,SAAK;IAGT,KAAK,SAAM;IAGX,eAAe,SAAM;IAGrB,YAAY,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAM;IAEvD;;;;;;OAMG;IAEH,OAAO,CAAC,WAAW,CAAoF;IAEhG,EAAE,CAAC,GAAG,EAAE,MAAM,0BAA0B,GAAG,MAAM;IAIxD,IAAW,MAAM,IAAI,MAAM,CAE1B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED;;;yBAGqB;IACrB,OAAO,KAAK,MAAM,GAIjB;IAED,4DAA4D;IAC5D,IAAW,MAAM,IAAI,MAAM,EAAE,CAE5B;IAED;iFAC6E;IAC7E,IAAW,QAAQ,IAAI,MAAM,EAAE,CAG9B;IAED,yEAAyE;IACzE,OAAO,KAAK,SAAS,GAIpB;IAED,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,IAAW,eAAe,IAAI,MAAM,GAAG,IAAI,CAE1C;IAED;4DACwD;IACxD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,IAAW,eAAe,IAAI,MAAM,GAAG,IAAI,CAE1C;IAED;;;;;;OAMG;IACI,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,IAAI;IAyBjF,OAAO,CAAC,KAAK;IAQb;;;;OAIG;IACI,cAAc,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI;IAyC1E,wDAAwD;IACxD,OAAO,CAAC,YAAY;IAMpB;;;;OAIG;IACH,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,aAAa,CAAiE;IACtF,OAAO,CAAC,gBAAgB,CAAK;IAE7B;;;;OAIG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAMnC,oBAAoB,IAAI,IAAI;IASrC;;;;;OAKG;IACI,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI;IAoBjE,oEAAoE;IACpE,OAAO,CAAC,eAAe;IAcvB,mDAAmD;IACnD,OAAO,CAAC,cAAc;IAKtB;;;;;;;;;OASG;IACI,sBAAsB,IAAI,IAAI;IAiB5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAsBtC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}

package/dist/components/inputs/time-picker/time-picker.i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const nlddTimePickerTranslations: {
+    'components.time-picker.default-label': string;
+    'components.time-picker.hours-label': string;
+    'components.time-picker.minutes-label': string;
+};
+export type NLDDTimePickerTranslations = typeof nlddTimePickerTranslations;
+//# sourceMappingURL=time-picker.i18n.d.ts.map

package/dist/components/inputs/time-picker/time-picker.i18n.d.ts.map

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

package/dist/components/inputs/time-picker/time-picker.i18n.js

@@ -0,0 +1,10 @@
+export const nlddTimePickerTranslations = {
+    // Accessible name of the picker as a whole, when a consumer gives none.
+    // Without it the group around the two spinbuttons has no name.
+    'components.time-picker.default-label': 'Tijd kiezen',
+    // The two columns. The selection carries a spinbutton per column and each needs
+    // its own name, otherwise you hear the same one twice.
+    'components.time-picker.hours-label': 'Uur',
+    'components.time-picker.minutes-label': 'Minuut',
+};
+//# sourceMappingURL=time-picker.i18n.js.map

package/dist/components/inputs/time-picker/time-picker.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.i18n.js","sourceRoot":"","sources":["../../../../src/components/inputs/time-picker/time-picker.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,wEAAwE;IACxE,+DAA+D;IAC/D,sCAAsC,EAAE,aAAa;IACrD,gFAAgF;IAChF,uDAAuD;IACvD,oCAAoC,EAAE,KAAK;IAC3C,sCAAsC,EAAE,QAAQ;CAChD,CAAC"}