@cahyo-dimas/freeday 3.9.4 → 3.11.0

package/adapters/react/components/FdyTimepicker.tsx

@@ -0,0 +1,212 @@
+import type { JSX } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { usePopover } from '../usePopover';
+
+// React twin of adapters/vue/components/FdyTimepicker.vue over freeday's `.fdy-timepicker`
+// classes (src/components/timepicker.css). See that file's header for why a form control is
+// re-implemented natively instead of wrapping freeday-timepicker.js, and why this replaces
+// `<input type="time">`: the native picker is drawn by the OS, so iOS shows a scroll wheel,
+// Android a clock dial and desktop a stepper, each with its own width and format, and no CSS
+// reaches any of them (#094).
+
+export interface FdyTimepickerProps {
+  /** `HH:MM`, 24-hour. `''`/`null` for empty. A loose `H:MM` is normalised for matching. */
+  value: string | null;
+  onChange: (value: string) => void;
+  /** Minutes between options. Default 30. */
+  step?: number;
+  /** `HH:MM` bounds, inclusive. Default `00:00` to `23:59`. */
+  min?: string;
+  max?: string;
+  id?: string;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+  /** Shown when there is no value. Default `--:--`, the same as the raw path. */
+  placeholder?: string;
+  disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its time, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+}
+
+const SHAPE: RegExp = /^\d{1,2}:\d{2}$/;
+
+function toMinutes(time: string): number {
+  const [h, m] = time.split(':');
+  return Number(h) * 60 + Number(m);
+}
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : String(n);
+}
+function fromMinutes(total: number): string {
+  return `${pad(Math.floor(total / 60))}:${pad(total % 60)}`;
+}
+/** `7:0` is not a time; `7:00` is the same time as `07:00`. Anything else answers `''`. */
+function normalise(time: string | null): string {
+  if (time === null || !SHAPE.test(time)) return '';
+  const total: number = toMinutes(time);
+  return total >= 0 && total <= 23 * 60 + 59 ? fromMinutes(total) : '';
+}
+function bound(time: string | undefined, fallback: number): number {
+  return time !== undefined && SHAPE.test(time) ? toMinutes(time) : fallback;
+}
+
+export function FdyTimepicker(props: FdyTimepickerProps): JSX.Element {
+  const baseId: string = useId();
+  const triggerId: string = props.id ?? `${baseId}-trigger`;
+  const panelId: string = `${baseId}-panel`;
+  const optionId = (index: number): string => `${baseId}-opt-${index}`;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLUListElement>(null);
+  const [open, setOpen] = useState<boolean>(false);
+  const [highlighted, setHighlighted] = useState<number>(-1);
+
+  // Lift the panel into the top layer so it escapes an ancestor overflow clip. A shift form is a
+  // modal, and a time list long enough to scroll is exactly the panel a card would cut off.
+  usePopover(panelRef, triggerRef, open);
+
+  // Popover attr for React 18 (JSX may not type it): set once on mount.
+  useEffect((): void => {
+    panelRef.current?.setAttribute('popover', 'manual');
+  }, []);
+
+  const isDisabled: boolean = props.disabled === true;
+  const isReadonly: boolean = props.readonly === true;
+  const isInvalid: boolean = props.invalid === true;
+
+  const times: ReadonlyArray<string> = useMemo((): ReadonlyArray<string> => {
+    const stride: number = Math.max(1, Math.trunc(props.step ?? 30));
+    const from: number = bound(props.min, 0);
+    const to: number = bound(props.max, 23 * 60 + 59);
+    const out: string[] = [];
+    for (let m = from; m <= to; m += stride) out.push(fromMinutes(m));
+    return out;
+  }, [props.step, props.min, props.max]);
+
+  const value: string = normalise(props.value);
+  const selectedIndex: number = times.indexOf(value);
+  const shown: string = value !== '' ? value : (props.placeholder ?? '--:--');
+  const isPlaceholder: boolean = value === '';
+  const activeDescendant: string | undefined = open && highlighted >= 0 ? optionId(highlighted) : undefined;
+
+  /* The panel is `max-height:15rem` and scrolls: a highlight the reader cannot see is no highlight,
+     and with 48 half-hour options most of the list is out of view. */
+  useEffect((): void => {
+    const list: HTMLUListElement | null = panelRef.current;
+    if (list === null || highlighted < 0) return;
+    const opt: Element | undefined = list.children[highlighted];
+    if (opt instanceof HTMLElement) opt.scrollIntoView({ block: 'nearest' });
+  }, [highlighted, open]);
+
+  /* Clamped, not cyclic: FdyCombo wraps because its lists are short. Here ArrowUp at 00:00 landing
+     on 23:30 reads as a glitch. Matches the raw path. */
+  const setHighlight = (index: number): void => {
+    const last: number = times.length - 1;
+    setHighlighted(last < 0 ? -1 : Math.min(last, Math.max(0, index)));
+  };
+  const openList = (): void => {
+    if (isDisabled || isReadonly || open) return;
+    setOpen(true);
+    setHighlight(selectedIndex >= 0 ? selectedIndex : 0);
+  };
+  const closeList = (focusTrigger: boolean): void => {
+    setOpen(false);
+    setHighlighted(-1);
+    if (focusTrigger) triggerRef.current?.focus();
+  };
+  const toggle = (): void => { if (open) closeList(false); else openList(); };
+  const choose = (index: number): void => {
+    const next: string | undefined = times[index];
+    if (next === undefined) return;
+    if (next !== value) props.onChange(next);
+    closeList(true);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (isDisabled || isReadonly) return;
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); if (open) setHighlight(highlighted + 1); else openList(); break;
+      case 'ArrowUp': e.preventDefault(); if (open) setHighlight(highlighted - 1); else openList(); break;
+      case 'Home': if (open) { e.preventDefault(); setHighlight(0); } break;
+      case 'End': if (open) { e.preventDefault(); setHighlight(times.length - 1); } break;
+      case 'Enter':
+      case ' ': e.preventDefault(); if (open && highlighted >= 0) choose(highlighted); else openList(); break;
+      case 'Escape': if (open) { e.preventDefault(); closeList(true); } break;
+      case 'Tab': if (open) closeList(false); break;
+      default: break;
+    }
+  };
+
+  const onFocusout = (e: React.FocusEvent<HTMLDivElement>): void => {
+    const next: EventTarget | null = e.relatedTarget;
+    if (rootRef.current !== null && !(next instanceof Node && rootRef.current.contains(next))) closeList(false);
+  };
+
+  useEffect((): void | (() => void) => {
+    if (!open) return;
+    const onDocPointerDown = (e: MouseEvent): void => {
+      const t: EventTarget | null = e.target;
+      if (rootRef.current !== null && t instanceof Node && !rootRef.current.contains(t)) closeList(false);
+    };
+    document.addEventListener('mousedown', onDocPointerDown);
+    return (): void => document.removeEventListener('mousedown', onDocPointerDown);
+  }, [open]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={isInvalid ? 'fdy-timepicker fdy-timepicker--error' : 'fdy-timepicker'}
+      data-value={value}
+      onKeyDown={onKeyDown}
+      onBlur={onFocusout}
+    >
+      <button
+        id={triggerId}
+        ref={triggerRef}
+        type="button"
+        className={open ? 'fdy-timepicker__trigger is-open' : 'fdy-timepicker__trigger'}
+        aria-haspopup="listbox"
+        aria-controls={panelId}
+        aria-expanded={open}
+        aria-activedescendant={activeDescendant}
+        aria-label={props.ariaLabel}
+        aria-labelledby={props.ariaLabelledby}
+        aria-invalid={isInvalid ? 'true' : undefined}
+        aria-readonly={isReadonly ? 'true' : undefined}
+        aria-describedby={props.describedby}
+        disabled={isDisabled}
+        onClick={toggle}
+      >
+        <span className={isPlaceholder ? 'fdy-timepicker__value fdy-timepicker__value--placeholder' : 'fdy-timepicker__value'}>{shown}</span>
+        <span className="fdy-timepicker__icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+               strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+        </span>
+      </button>
+      <ul id={panelId} ref={panelRef} className="fdy-timepicker__panel" role="listbox"
+          aria-label={props.ariaLabel} hidden={!open}>
+        {times.map((t: string, i: number): JSX.Element => (
+          // onMouseDown preventDefault keeps focus on the trigger: an <li> isn't focusable, so a
+          // plain mousedown moves focus out of the control, fires onBlur and closes the panel
+          // before the click lands. Same pattern as FdyCombo.
+          <li
+            id={optionId(i)}
+            key={t}
+            className={i === highlighted ? 'fdy-timepicker__opt is-active' : 'fdy-timepicker__opt'}
+            role="option"
+            aria-selected={t === value}
+            onMouseDown={(e: React.MouseEvent): void => e.preventDefault()}
+            onClick={(): void => choose(i)}
+            onMouseMove={(): void => setHighlight(i)}
+          >{t}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/adapters/react/index.d.ts

@@ -35,6 +35,7 @@ export { FdyDatepicker, type FdyDatepickerProps, type FdyDatepickerMode } from '
 export { FdyMonthpicker, type FdyMonthpickerProps } from './components/FdyMonthpicker';
 export type { FdyMonth } from '../core/month-grid';
 export { FdyDateRange, type FdyDateRangeProps, type DateRangeValue } from './components/FdyDateRange';
+export { FdyTimepicker, type FdyTimepickerProps } from './components/FdyTimepicker';
 export { FdyAutocomplete, type FdyAutocompleteProps } from './components/FdyAutocomplete';
 export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components/FdyCascade';
 export { FdyCfl, type FdyCflProps, type FdyCflHandle, type CflColumn, type CflPage } from './components/FdyCfl';

package/adapters/react/index.js

@@ -4,6 +4,7 @@ export { FdyCombo } from './components/FdyCombo.tsx';
 export { FdyDatepicker } from './components/FdyDatepicker.tsx';
 export { FdyMonthpicker } from './components/FdyMonthpicker.tsx';
 export { FdyDateRange } from './components/FdyDateRange.tsx';
+export { FdyTimepicker } from './components/FdyTimepicker.tsx';
 export { FdyAutocomplete } from './components/FdyAutocomplete.tsx';
 export { FdyCascade } from './components/FdyCascade.tsx';
 export { FdyCfl } from './components/FdyCfl.tsx';

package/adapters/vue/components/FdyDateRange.vue

@@ -29,6 +29,19 @@ const props = defineProps<{
   endPlaceholder?: string;
   ariaLabel?: string;
   ariaLabelledby?: string;
+  /* Forwarded verbatim to BOTH pickers. Without these the range was the one picker in the kit
+     whose calendar nav could not be named in the page's own language: FdyDatepicker takes them,
+     FdyDateRange dropped them, so an Indonesian app got "Previous month" on the only date control
+     it could not reach. Flat `xxxLabel` props, not a `labels` object, because that is the shape
+     every other component in the kit already uses. Raised from keamanan-cluster (#095). */
+  prevMonthLabel?: string;
+  nextMonthLabel?: string;
+  prevYearLabel?: string;
+  nextYearLabel?: string;
+  prevYearsLabel?: string;
+  nextYearsLabel?: string;
+  chooseMonthLabel?: string;
+  chooseYearLabel?: string;
 }>();
 
 const emit = defineEmits<{
@@ -69,6 +82,14 @@ function setEnd(end: string): void {
       :invalid="invalid"
       :describedby="describedby"
       :placeholder="startPlaceholder ?? 'Dari'"
+      :prev-month-label="prevMonthLabel"
+      :next-month-label="nextMonthLabel"
+      :prev-year-label="prevYearLabel"
+      :next-year-label="nextYearLabel"
+      :prev-years-label="prevYearsLabel"
+      :next-years-label="nextYearsLabel"
+      :choose-month-label="chooseMonthLabel"
+      :choose-year-label="chooseYearLabel"
       @update:model-value="setStart"
     />
     <span class="fdy-daterange__sep" aria-hidden="true">–</span>
@@ -82,6 +103,14 @@ function setEnd(end: string): void {
       :invalid="invalid"
       :describedby="describedby"
       :placeholder="endPlaceholder ?? 'Sampai'"
+      :prev-month-label="prevMonthLabel"
+      :next-month-label="nextMonthLabel"
+      :prev-year-label="prevYearLabel"
+      :next-year-label="nextYearLabel"
+      :prev-years-label="prevYearsLabel"
+      :next-years-label="nextYearsLabel"
+      :choose-month-label="chooseMonthLabel"
+      :choose-year-label="chooseYearLabel"
       @update:model-value="setEnd"
     />
   </div>

package/adapters/vue/components/FdyTimepicker.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, type ComputedRef, type Ref } from 'vue';
+import { usePopover } from '../usePopover';
+
+// A Vue-native binding over freeday's `.fdy-timepicker` classes (src/components/timepicker.css).
+// The kit also ships a framework-agnostic enhancer (freeday-timepicker.js), but letting it own the
+// DOM would fight Vue's rendering and leave no `v-model` — the same reason FdyCombo re-implements
+// the listbox rather than wrapping freeday-select.js. Charts delegate to their renderer; form
+// controls do not.
+//
+// `<input type="time">` is what this replaces, and the reason is not theming alone: the native
+// picker is drawn by the OPERATING SYSTEM, so iOS shows a scroll wheel, Android a clock dial and
+// desktop a stepper, each with its own width and value format, and no CSS reaches any of them. A
+// phone and a browser at the same width therefore disagree about a screen that is otherwise
+// identical. Raised from keamanan-cluster, whose shift form was audited on an iPhone 7 (#094).
+//
+// Deliberate difference from the enhancer: focus stays on the TRIGGER with `aria-activedescendant`
+// on it, which is what FdyCombo, FdyDatepicker and FdyAutocomplete do, rather than moving focus
+// into the panel as the raw path does. Both are valid APG listbox patterns; one family, one model.
+
+const props = defineProps<{
+  /** `HH:MM`, 24-hour. `''`/`null` for empty. A loose `H:MM` is normalised for matching. */
+  modelValue: string | null;
+  /** Minutes between options. Default 30. */
+  step?: number;
+  /** `HH:MM` bounds, inclusive. Default `00:00` to `23:59`. */
+  min?: string;
+  max?: string;
+  id?: string;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+  /** Shown when there is no value. Default `--:--`, the same as the raw path. */
+  placeholder?: string;
+  disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its time, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  change: [value: string];
+}>();
+
+const SHAPE: RegExp = /^\d{1,2}:\d{2}$/;
+
+function toMinutes(time: string): number {
+  const [h, m] = time.split(':');
+  return Number(h) * 60 + Number(m);
+}
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : String(n);
+}
+function fromMinutes(total: number): string {
+  return `${pad(Math.floor(total / 60))}:${pad(total % 60)}`;
+}
+/** `7:0` is not a time; `7:00` is the same time as `07:00`. Anything else answers `''`. */
+function normalise(time: string | null): string {
+  if (time === null || !SHAPE.test(time)) return '';
+  const total: number = toMinutes(time);
+  return total >= 0 && total <= 23 * 60 + 59 ? fromMinutes(total) : '';
+}
+function bound(time: string | undefined, fallback: number): number {
+  return time !== undefined && SHAPE.test(time) ? toMinutes(time) : fallback;
+}
+
+const baseId: string = useId();
+const triggerId: ComputedRef<string> = computed((): string => props.id ?? `${baseId}-trigger`);
+const panelId: string = `${baseId}-panel`;
+function optionId(index: number): string {
+  return `${baseId}-opt-${index}`;
+}
+
+const rootEl: Ref<HTMLDivElement | null> = ref(null);
+const triggerEl: Ref<HTMLButtonElement | null> = ref(null);
+const panelEl: Ref<HTMLUListElement | null> = ref(null);
+const open: Ref<boolean> = ref(false);
+
+// Lift the panel into the top layer so it escapes an ancestor overflow clip. A shift form is a
+// modal, and a time list long enough to scroll is exactly the panel a card would cut off.
+usePopover(panelEl, triggerEl, open);
+const highlighted: Ref<number> = ref(-1);
+
+const times: ComputedRef<ReadonlyArray<string>> = computed((): ReadonlyArray<string> => {
+  const stride: number = Math.max(1, Math.trunc(props.step ?? 30));
+  const from: number = bound(props.min, 0);
+  const to: number = bound(props.max, 23 * 60 + 59);
+  const out: string[] = [];
+  for (let m = from; m <= to; m += stride) out.push(fromMinutes(m));
+  return out;
+});
+
+const value: ComputedRef<string> = computed((): string => normalise(props.modelValue));
+const selectedIndex: ComputedRef<number> = computed((): number => times.value.indexOf(value.value));
+const shown: ComputedRef<string> = computed((): string =>
+  value.value !== '' ? value.value : (props.placeholder ?? '--:--'),
+);
+const isPlaceholder: ComputedRef<boolean> = computed((): boolean => value.value === '');
+const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
+const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
+const activeDescendant: ComputedRef<string | undefined> = computed((): string | undefined =>
+  open.value && highlighted.value >= 0 ? optionId(highlighted.value) : undefined,
+);
+
+/* The panel is `max-height:15rem` and scrolls: a highlight the reader cannot see is no highlight,
+   and with 48 half-hour options most of the list is out of view. */
+function revealHighlight(): void {
+  void nextTick((): void => {
+    const list: HTMLUListElement | null = panelEl.value;
+    if (list === null || highlighted.value < 0) return;
+    const opt: Element | undefined = list.children[highlighted.value];
+    if (opt instanceof HTMLElement) opt.scrollIntoView({ block: 'nearest' });
+  });
+}
+
+/* Clamped, not cyclic: FdyCombo wraps because its lists are short and a wrap is a quick way back
+   to the top. Here ArrowUp at 00:00 landing on 23:30 reads as a glitch. Matches the raw path. */
+function setHighlight(index: number): void {
+  const last: number = times.value.length - 1;
+  highlighted.value = last < 0 ? -1 : Math.min(last, Math.max(0, index));
+  revealHighlight();
+}
+
+function openList(): void {
+  if (isDisabled.value || isReadonly.value || open.value) return;
+  open.value = true;
+  setHighlight(selectedIndex.value >= 0 ? selectedIndex.value : 0);
+}
+
+function closeList(focusTrigger: boolean): void {
+  if (!open.value) return;
+  open.value = false;
+  highlighted.value = -1;
+  if (focusTrigger) triggerEl.value?.focus();
+}
+
+function toggle(): void {
+  if (open.value) closeList(false);
+  else openList();
+}
+
+function choose(index: number): void {
+  const next: string | undefined = times.value[index];
+  if (next === undefined) return;
+  if (next !== value.value) {
+    emit('update:modelValue', next);
+    emit('change', next);
+  }
+  closeList(true);
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (isDisabled.value || isReadonly.value) return;
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+      if (open.value) setHighlight(highlighted.value + 1);
+      else openList();
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      if (open.value) setHighlight(highlighted.value - 1);
+      else openList();
+      break;
+    case 'Home':
+      if (open.value) {
+        e.preventDefault();
+        setHighlight(0);
+      }
+      break;
+    case 'End':
+      if (open.value) {
+        e.preventDefault();
+        setHighlight(times.value.length - 1);
+      }
+      break;
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      if (open.value && highlighted.value >= 0) choose(highlighted.value);
+      else openList();
+      break;
+    case 'Escape':
+      if (open.value) {
+        e.preventDefault();
+        closeList(true);
+      }
+      break;
+    case 'Tab':
+      if (open.value) closeList(false);
+      break;
+    default:
+      break;
+  }
+}
+
+function onDocPointerDown(e: MouseEvent): void {
+  const target: EventTarget | null = e.target;
+  if (rootEl.value !== null && target instanceof Node && !rootEl.value.contains(target)) {
+    closeList(false);
+  }
+}
+
+function onFocusout(e: FocusEvent): void {
+  const next: EventTarget | null = e.relatedTarget;
+  if (rootEl.value !== null && !(next instanceof Node && rootEl.value.contains(next))) {
+    closeList(false);
+  }
+}
+
+onMounted((): void => {
+  document.addEventListener('mousedown', onDocPointerDown);
+});
+onBeforeUnmount((): void => {
+  document.removeEventListener('mousedown', onDocPointerDown);
+});
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="fdy-timepicker"
+    :class="{ 'fdy-timepicker--error': isInvalid }"
+    :data-value="value"
+    @keydown="onKeydown"
+    @focusout="onFocusout"
+  >
+    <button
+      :id="triggerId"
+      ref="triggerEl"
+      type="button"
+      class="fdy-timepicker__trigger"
+      :class="{ 'is-open': open }"
+      aria-haspopup="listbox"
+      :aria-controls="panelId"
+      :aria-expanded="open"
+      :aria-activedescendant="activeDescendant"
+      :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-readonly="isReadonly ? 'true' : undefined"
+      :aria-describedby="describedby"
+      :disabled="isDisabled"
+      @click="toggle"
+    >
+      <span class="fdy-timepicker__value" :class="{ 'fdy-timepicker__value--placeholder': isPlaceholder }">{{ shown }}</span>
+      <span class="fdy-timepicker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="9"></circle>
+          <path d="M12 7v5l3 2"></path>
+        </svg>
+      </span>
+    </button>
+    <ul :id="panelId" ref="panelEl" class="fdy-timepicker__panel" role="listbox"
+        :aria-label="ariaLabel" popover="manual" :hidden="!open">
+      <!-- @mousedown.prevent keeps focus on the trigger: an <li> isn't focusable, so a plain
+           mousedown moves focus out of the control, fires @focusout and closes the panel before
+           the click lands — mouse-select would silently do nothing. Same as FdyCombo. -->
+      <li
+        v-for="(t, i) in times"
+        :id="optionId(i)"
+        :key="t"
+        class="fdy-timepicker__opt"
+        :class="{ 'is-active': i === highlighted }"
+        role="option"
+        :aria-selected="t === value"
+        @mousedown.prevent
+        @click="choose(i)"
+        @mousemove="setHighlight(i)"
+      >{{ t }}</li>
+    </ul>
+  </div>
+</template>

package/adapters/vue/index.d.ts

@@ -44,6 +44,7 @@ export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
 export { default as FdyMonthpicker } from './components/FdyMonthpicker.vue';
 export type { FdyMonth } from '../core/month-grid';
 export { default as FdyDateRange } from './components/FdyDateRange.vue';
+export { default as FdyTimepicker } from './components/FdyTimepicker.vue';
 export type { DateRangeValue } from './components/FdyDateRange.vue';
 export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
 export { default as FdyCascade } from './components/FdyCascade.vue';

package/adapters/vue/index.js

@@ -4,6 +4,7 @@ export { default as FdyCombo } from './components/FdyCombo.vue';
 export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
 export { default as FdyMonthpicker } from './components/FdyMonthpicker.vue';
 export { default as FdyDateRange } from './components/FdyDateRange.vue';
+export { default as FdyTimepicker } from './components/FdyTimepicker.vue';
 export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
 export { default as FdyCascade } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';

package/dist/freeday-timepicker.js

@@ -59,6 +59,14 @@
     trigger.setAttribute('aria-haspopup', 'listbox');
     trigger.setAttribute('aria-expanded', 'false');
     trigger.setAttribute('aria-label', label);
+    /* The trigger is a <button>, which is NOT a labelable element, so a form's own `<label for>`
+       can never activate it -- but an id is still what `aria-describedby` targets and what a host
+       needs to point at this control. Both were unreadable from the seed until now, so a Blazor
+       host could not name its own error text. Mirrors the datepicker's seed. */
+    var seedId = wrap.getAttribute('data-id');
+    if (seedId) trigger.id = seedId;
+    var describedby = wrap.getAttribute('data-describedby');
+    if (describedby) trigger.setAttribute('aria-describedby', describedby);
     var valueSpan = document.createElement('span');
     valueSpan.className = 'fdy-timepicker__value';
     trigger.appendChild(valueSpan);
@@ -96,6 +104,30 @@
     wrap.appendChild(panel);
 
     var active = -1;
+    /* A host that renders its seed ONCE and then never re-renders it (Blazor: ShouldRender is
+       false after hydration) still has to be able to disable, lock or invalidate the field
+       afterwards. Without this the parameter was there and nothing read it. Mirrors
+       FreedayDatepicker.setState so the two controls of one family answer the same call. */
+    var stateDisabled = wrap.hasAttribute('data-disabled');
+    var stateReadonly = wrap.hasAttribute('data-readonly');
+    var stateInvalid = wrap.hasAttribute('data-invalid');
+
+    function applyState() {
+      trigger.disabled = stateDisabled;
+      if (stateReadonly) trigger.setAttribute('aria-readonly', 'true');
+      else trigger.removeAttribute('aria-readonly');
+      if (stateInvalid) trigger.setAttribute('aria-invalid', 'true');
+      else trigger.removeAttribute('aria-invalid');
+      wrap.classList.toggle('fdy-timepicker--error', stateInvalid);
+      if ((stateDisabled || stateReadonly) && !panel.hidden) close(false);
+    }
+    function setState(next) {
+      if (!next) return;
+      if (next.disabled != null) stateDisabled = !!next.disabled;
+      if (next.readonly != null) stateReadonly = !!next.readonly;
+      if (next.invalid != null) stateInvalid = !!next.invalid;
+      applyState();
+    }
 
     function updateDisplay() {
       if (value) {
@@ -124,6 +156,7 @@
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
     function open() {
+      if (stateDisabled || stateReadonly) return;
       if (!panel.hidden) return;
       var p = popCtl(); if (p) p.show(); else panel.hidden = false;
       trigger.setAttribute('aria-expanded', 'true');
@@ -174,10 +207,12 @@
     });
 
     updateDisplay();
+    applyState();
 
     var api = {
       wrap: wrap,
       getValue: function () { return value; },
+      setState: setState,
       clear: function () { value = ''; for (var i = 0; i < opts.length; i++) opts[i].setAttribute('aria-selected', 'false'); updateDisplay(); }
     };
     wrap._fdyTp = api;
@@ -197,5 +232,13 @@
     initAll();
   }
 
-  window.FreedayTimepicker = { init: initTime, initAll: initAll };
+  window.FreedayTimepicker = {
+    init: initTime,
+    initAll: initAll,
+    /* See api.setState above: the one call a render-once host needs. */
+    setState: function (root, state) {
+      var api = root && root._fdyTp ? root._fdyTp : null;
+      if (api && api.setState) api.setState(state);
+    }
+  };
 })();