@svgrid/grid 1.2.34 → 2.0.0

package/src/SvCountryInput.svelte

@@ -8,23 +8,48 @@
    * roving active index + keyboard); only portal/measure/focus render concerns
    * live here.
    */
-  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
   import { flagEmoji } from './countries'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createCountryInput } from './createCountryInput.svelte'
 
-  type Props = {
+  /** User-facing strings (localizable via `messages`). */
+  type CountryMessages = { search: string; noResults: string }
+  const DEFAULT_MESSAGES: CountryMessages = { search: 'Search countries', noResults: 'No matches' }
+
+  type Props = SvEditorProps & {
     value?: string | null
     onChange?: (code: string) => void
     /** Show the dial code beside each country. */
     showDial?: boolean
     placeholder?: string
-    disabled?: boolean
-    name?: string
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
+    /** Override the built-in strings (search + empty-state). */
+    messages?: Partial<CountryMessages>
   }
 
-  let { value = null, onChange, showDial = false, placeholder = 'Select country…', disabled = false, name, size = 'md', ariaLabel }: Props = $props()
+  let {
+    value = null,
+    onChange,
+    showDial = false,
+    placeholder = 'Select country…',
+    disabled = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-country')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
 
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let searchEl = $state<HTMLInputElement | null>(null)
@@ -36,7 +61,13 @@
     onChange: (c) => onChange?.(c),
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
+    searchLabel: () => M.search,
     focusTrigger: () => triggerEl?.focus(),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 
   const selected = $derived(ci.selected)
@@ -61,20 +92,22 @@
   })
 </script>
 
-<button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-open={ci.open} class:is-disabled={disabled} {...ci.triggerProps()}>
-  {#if selected}
-    <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
-    <span class="sv-country__name">{selected.name}</span>
-    {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
-  {:else}
-    <span class="sv-country__ph">{placeholder}</span>
-  {/if}
-  <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
-</button>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...ci.triggerProps()}>
+    {#if selected}
+      <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
+      <span class="sv-country__name">{selected.name}</span>
+      {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
+    {:else}
+      <span class="sv-country__ph">{placeholder}</span>
+    {/if}
+    <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+  </button>
+</SvField>
 
 {#if ci.open}
-  <div bind:this={panelEl} class="sv-country__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
-    <input bind:this={searchEl} class="sv-country__search" placeholder="Search countries…" {...ci.searchProps()} />
+  <div bind:this={panelEl} class="sv-country__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
+    <input bind:this={searchEl} class="sv-country__search" placeholder={`${M.search}…`} {...ci.searchProps()} />
     <div class="sv-country__list" {...ci.listboxProps()}>
       {#each ci.filtered as c, i (c.code)}
         <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
@@ -84,7 +117,7 @@
           <span class="sv-country__dial">{c.dial}</span>
         </div>
       {:else}
-        <div class="sv-ddl__empty">No matches</div>
+        <div class="sv-ddl__empty">{M.noResults}</div>
       {/each}
     </div>
   </div>
@@ -95,13 +128,15 @@
   .sv-country {
     --_accent: var(--sg-accent, #2563eb);
     display: inline-flex; align-items: center; gap: 8px; width: 220px;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: left;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: start;
     border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px); padding: 0 10px; cursor: pointer;
   }
   .sv-country--sm { height: 28px; font-size: 12px; }
   .sv-country--md { height: 34px; font-size: 13px; }
   .sv-country--lg { height: 40px; font-size: 15px; }
   .sv-country.is-open, .sv-country:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
+  .sv-country.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-country.is-invalid.is-open, .sv-country.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-country.is-disabled { opacity: 0.6; cursor: not-allowed; }
   .sv-country__flag { font-size: 16px; }
   .sv-country__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/src/SvDateRangeInput.svelte

@@ -0,0 +1,256 @@
+<script lang="ts" module>
+  export type DateRangeValue = [Date, Date] | null
+</script>
+
+<script lang="ts">
+  /**
+   * SvDateRangeInput - a start/end date-range field with a portalled two-month
+   * range calendar and one-click presets (Today, Last 7 days, This month, ...).
+   * Parity target: Smart date-range pickers. Emits `[start, end]` (inclusive) or
+   * null. It composes the existing headless range engine: the popover is just a
+   * `<SvCalendar selectionMode="range">`, so hover-preview, min/max, restricted /
+   * important dates and keyboard all come for free.
+   *
+   * Part of the SvGrid editor kit: carries the shared editor contract (label,
+   * hint, error/validation a11y, size, `dir`/RTL and localizable `messages`) via
+   * `<SvField>`, exactly like the other field editors.
+   */
+  import SvCalendar from './SvCalendar.svelte'
+  import SvField from './SvField.svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { editorAria, nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { formatDate } from './datetime/date-format'
+  import { toDate, startOfDay, type DateLike } from './datetime/date-core'
+  import { rangeDays } from './datetime/date-selection'
+  import type { CalendarPreset } from './createCalendar.svelte'
+
+  /** User-facing strings (localizable via `messages`). */
+  type RangeMessages = { dialog: string; clear: string; open: string; to: string }
+  const DEFAULT_MESSAGES: RangeMessages = {
+    dialog: 'Choose a date range', clear: 'Clear', open: 'Open calendar', to: 'to',
+  }
+
+  type Props = SvEditorProps & {
+    /** Inclusive [start, end] range, or null. */
+    value?: DateRangeValue
+    onChange?: (value: DateRangeValue) => void
+    /** Display format for each end (token engine, e.g. 'yyyy-MM-dd'). */
+    formatString?: string
+    min?: DateLike | null
+    max?: DateLike | null
+    /** Number of month panels shown side by side. Default 2. */
+    months?: number
+    firstDayOfWeek?: number
+    weekNumbers?: boolean
+    locale?: string
+    placeholder?: string
+    /** Quick shortcuts shown in the calendar's side rail. */
+    presets?: ReadonlyArray<CalendarPreset>
+    /** Animate the calendar's month navigation. */
+    animate?: boolean | 'slide' | 'fade'
+    /** Open the popover as soon as the field is focused. */
+    autoOpen?: boolean
+    /** Override the built-in strings. */
+    messages?: Partial<RangeMessages>
+  }
+
+  let {
+    value = null,
+    onChange,
+    formatString = 'yyyy-MM-dd',
+    min = null,
+    max = null,
+    months = 2,
+    firstDayOfWeek = 0,
+    weekNumbers = false,
+    locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US',
+    placeholder = 'Select date range',
+    presets,
+    animate = false,
+    autoOpen = false,
+    disabled = false,
+    readonly = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-daterange')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  const isInteractive = $derived(!disabled && !readonly)
+
+  const fmt = (d: Date) => formatDate(d, formatString, locale)
+  // The label shown in the field: "start to end", one end, or the placeholder.
+  const display = $derived.by(() => {
+    if (!value) return ''
+    const [a, b] = value
+    return a && b ? `${fmt(a)} ${M.to} ${fmt(b)}` : a ? fmt(a) : ''
+  })
+  // The calendar wants the FULL inclusive span as its value (every day renders
+  // selected); we only keep the two endpoints.
+  const calValue = $derived(value ? rangeDays(value[0], value[1]) : null)
+
+  let open = $state(false)
+  function openPanel() { if (isInteractive && !open) open = true }
+  function closePanel() { open = false }
+  function toggle() { open ? closePanel() : openPanel() }
+  function clear() { onChange?.(null) }
+
+  function onCalendarChange(dates: Date[]) {
+    if (!dates.length) return
+    const start = dates[0]!
+    const end = dates[dates.length - 1]!
+    onChange?.([startOfDay(start), startOfDay(end)])
+    // A completed range (2+ distinct days, or a single-day range) closes the panel.
+    if (dates.length >= 1 && start !== end) closePanel()
+  }
+
+  // --- Portalled popover positioning (DOM-bound; stays in the component) -------
+  let triggerEl = $state<HTMLDivElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  function updatePos() {
+    if (!triggerEl) return
+    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 360, minWidth: 300 })
+  }
+
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    const reposition = () => updatePos()
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as Node | null
+      if (!t) return
+      if (triggerEl?.contains(t) || panelEl?.contains(t)) return
+      closePanel()
+    }
+    document.addEventListener('pointerdown', onDown, true)
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+      document.removeEventListener('pointerdown', onDown, true)
+    }
+  })
+
+  function onFieldKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') { closePanel() }
+    else if (e.key === 'ArrowDown' && (e.altKey || !value)) { e.preventDefault(); openPanel() }
+  }
+  function focusOpen(node: HTMLInputElement) {
+    if (!autoOpen) return
+    node.focus()
+    openPanel()
+  }
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<div class="sv-dri" class:sv-dri--disabled={disabled}>
+  <div class="sv-dri__field sv-dri__field--{size}" class:is-invalid={invalid} bind:this={triggerEl} dir={resolvedDir}>
+    <svg class="sv-dri__icon" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
+    <input
+      id={uid}
+      class="sv-dri__input"
+      type="text"
+      readonly
+      {placeholder}
+      value={display}
+      {disabled}
+      {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+      aria-haspopup="dialog"
+      aria-expanded={open}
+      onclick={() => isInteractive && toggle()}
+      onkeydown={onFieldKeydown}
+      use:focusOpen
+    />
+    {#if value && isInteractive}
+      <button type="button" class="sv-dri__clear" aria-label={M.clear} onclick={(e) => { e.stopPropagation(); clear() }}>&times;</button>
+    {/if}
+  </div>
+
+  {#if open}
+    <div
+      class="sv-dri__panel"
+      bind:this={panelEl}
+      use:portalToBody
+      use:popIn={{ up: panelRect.openUpward }}
+      style:position="fixed"
+      style:top={`${panelRect.top}px`}
+      style:left={`${panelRect.left}px`}
+      role="dialog"
+      aria-label={M.dialog}
+      dir={resolvedDir}
+    >
+      <SvCalendar
+        value={calValue}
+        selectionMode="range"
+        {min}
+        {max}
+        {months}
+        {firstDayOfWeek}
+        {weekNumbers}
+        {locale}
+        {presets}
+        {animate}
+        dir={resolvedDir}
+        onChange={onCalendarChange}
+      />
+    </div>
+  {/if}
+
+  {#if name}
+    <input type="hidden" name={`${name}_start`} value={value?.[0] ? value[0].toISOString() : ''} />
+    <input type="hidden" name={`${name}_end`} value={value?.[1] ? value[1].toISOString() : ''} />
+  {/if}
+</div>
+</SvField>
+
+<style>
+  .sv-dri {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-input-border, var(--sg-border, #cbd5e1));
+    --_radius: var(--sg-radius, 8px);
+    display: inline-block; position: relative; color: var(--sg-fg, #0f172a);
+  }
+  .sv-dri--disabled { opacity: 0.6; }
+  .sv-dri__field {
+    display: flex; align-items: center; gap: 6px; width: 260px;
+    background: var(--sg-input-bg, #fff); border: 1px solid var(--_border); border-radius: var(--_radius);
+    padding-inline: 10px 4px;
+  }
+  .sv-dri__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-dri__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-dri__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  .sv-dri__field--sm { height: 28px; font-size: 12px; }
+  .sv-dri__field--md { height: 34px; font-size: 13px; }
+  .sv-dri__field--lg { height: 40px; font-size: 15px; }
+  .sv-dri__icon { color: var(--sg-muted, #64748b); flex: none; }
+  .sv-dri__input {
+    flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit;
+    cursor: pointer; text-overflow: ellipsis;
+  }
+  .sv-dri__input::placeholder { color: var(--sg-muted, #94a3b8); }
+  .sv-dri__clear {
+    display: grid; place-items: center; width: 24px; height: 24px; flex: none;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 17px; line-height: 1;
+  }
+  .sv-dri__clear:hover { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 10%, transparent); }
+
+  :global(.sv-dri__panel) {
+    z-index: 2147483647;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35);
+  }
+</style>

package/src/SvDateRangeInput.test.ts

@@ -0,0 +1,80 @@
+/**
+ * Component tests for SvDateRangeInput: the field renders the formatted range,
+ * the two-month range calendar portals to <body>, picking a range emits
+ * [start, end], and the shared editor contract (label / error) is wired.
+ */
+import { describe, expect, it, afterEach } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvDateRangeInput from './SvDateRangeInput.svelte'
+
+function mountDri(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvDateRangeInput, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+// The calendar panel portals to <body>, so query the document.
+const panel = () => document.querySelector<HTMLElement>('.sv-dri__panel')
+
+afterEach(() => {
+  document.querySelectorAll('.sv-dri__panel').forEach((n) => n.remove())
+})
+
+describe('SvDateRangeInput', () => {
+  it('formats the initial [start, end] range with the "to" separator', () => {
+    const { target, destroy } = mountDri({
+      value: [new Date(2026, 5, 1), new Date(2026, 5, 7)],
+      formatString: 'yyyy-MM-dd',
+    })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-dri__input')!
+      expect(input.value).toBe('2026-06-01 to 2026-06-07')
+    } finally { destroy() }
+  })
+
+  it('shows the placeholder when empty and opens the calendar on click', () => {
+    const { target, destroy } = mountDri({ value: null, placeholder: 'Pick a range' })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-dri__input')!
+      expect(input.value).toBe('')
+      expect(input.placeholder).toBe('Pick a range')
+      expect(panel()).toBeNull()
+      input.click()
+      flushSync()
+      expect(panel()).not.toBeNull()
+      // The portalled panel embeds a range-mode SvCalendar.
+      expect(panel()!.querySelector('.sv-cal')).not.toBeNull()
+    } finally { destroy() }
+  })
+
+  it('wires the shared editor contract (label + aria-invalid + error text)', () => {
+    const { target, destroy } = mountDri({
+      value: null, label: 'Period', required: true, invalid: true, error: 'Required',
+    })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-dri__input')!
+      const labelEl = target.querySelector<HTMLLabelElement>('.sv-field__label')!
+      expect(labelEl.textContent).toContain('Period')
+      expect(labelEl.getAttribute('for')).toBe(input.id)
+      expect(input.getAttribute('aria-invalid')).toBe('true')
+      expect(input.getAttribute('aria-required')).toBe('true')
+      const err = target.querySelector<HTMLElement>('.sv-field__error')!
+      expect(err.textContent).toBe('Required')
+      expect(err.id).toBe(input.getAttribute('aria-describedby'))
+    } finally { destroy() }
+  })
+
+  it('localizes the "to" separator via messages', () => {
+    const { target, destroy } = mountDri({
+      value: [new Date(2026, 5, 1), new Date(2026, 5, 7)],
+      formatString: 'dd/MM/yyyy',
+      messages: { to: 'au' },
+    })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-dri__input')!
+      expect(input.value).toBe('01/06/2026 au 07/06/2026')
+    } finally { destroy() }
+  })
+})

package/src/SvDateTimePicker.svelte

@@ -15,11 +15,20 @@
    */
   import SvCalendar from './SvCalendar.svelte'
   import SvTimePicker from './SvTimePicker.svelte'
-  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import SvField from './SvField.svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createDateTimePicker, type DateTimeValue, type DropDownDisplayMode } from './createDateTimePicker.svelte'
   import type { DateLike } from './datetime/date-core'
 
-  type Props = {
+  /** User-facing strings (localizable via `messages`). */
+  type DateTimeMessages = { dialog: string; date: string; time: string; clear: string; open: string }
+  const DEFAULT_MESSAGES: DateTimeMessages = {
+    dialog: 'Choose date and time', date: 'DATE', time: 'TIME', clear: 'Clear', open: 'Open picker',
+  }
+
+  type Props = SvEditorProps & {
     value?: DateTimeValue
     onChange?: (value: Date | null) => void
     /** Fired when the value is finalized (Enter, blur, or a single-date pick).
@@ -33,9 +42,6 @@
     max?: DateLike | null
     nullable?: boolean
     placeholder?: string
-    disabled?: boolean
-    readonly?: boolean
-    name?: string
     locale?: string
     firstDayOfWeek?: number
     weekNumbers?: boolean
@@ -50,6 +56,8 @@
     autoOpen?: boolean
     /** Animate the calendar's month/drill navigation (honors reduced-motion). */
     animate?: boolean | 'slide' | 'fade'
+    /** Override the built-in strings (tabs, dialog, clear/open aria-labels). */
+    messages?: Partial<DateTimeMessages>
   }
 
   let {
@@ -75,8 +83,22 @@
     stepMinutes = 1,
     autoOpen = false,
     animate = false,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-dtp')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
   // The headless core owns value math, parse/format, clamping, the dropdown
   // open/tab state and the sub-picker wiring. Reactive inputs are getters;
   // callbacks are closures.
@@ -95,6 +117,14 @@
     stepMinutes: () => stepMinutes,
     disabled: () => disabled,
     readonly: () => readonly,
+    toggleLabel: () => M.open,
+    clearLabel: () => M.clear,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel,
   })
 
   // --- Portalled dropdown positioning (DOM-bound; stays in the component) -----
@@ -114,17 +144,16 @@
     const reposition = () => updatePos()
     window.addEventListener('scroll', reposition, true)
     window.addEventListener('resize', reposition)
-    const onDown = (e: PointerEvent) => {
-      const t = e.target as Node | null
-      if (!t) return
-      if (triggerEl?.contains(t) || panelEl?.contains(t)) return
-      dtp.closePanel()
-    }
-    document.addEventListener('pointerdown', onDown, true)
+    const layer = createDismissableLayer({
+      element: () => [triggerEl, panelEl],
+      onDismiss: () => dtp.closePanel(),
+      closeOnEscape: false,
+    })
+    layer.activate()
     return () => {
       window.removeEventListener('scroll', reposition, true)
       window.removeEventListener('resize', reposition)
-      document.removeEventListener('pointerdown', onDown, true)
+      layer.release()
     }
   })
 
@@ -142,8 +171,9 @@
   }
 </script>
 
-<div class="sv-dtp" class:sv-dtp--disabled={disabled} onfocusout={onRootFocusOut}>
-  <div class="sv-dtp__field" bind:this={triggerEl}>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<div class="sv-dtp" class:sv-dtp--disabled={disabled} dir={resolvedDir} onfocusout={onRootFocusOut}>
+  <div class="sv-dtp__field" class:is-invalid={invalid} bind:this={triggerEl}>
     {#if spinButtons}
       <div class="sv-dtp__spin">
         <button {...dtp.spinProps(1)}>▲</button>
@@ -170,16 +200,18 @@
       class="sv-dtp__panel"
       bind:this={panelEl}
       use:portalToBody
+      use:popIn={{ up: panelRect.openUpward }}
       style:position="fixed"
       style:top={`${panelRect.top}px`}
       style:left={`${panelRect.left}px`}
       role="dialog"
-      aria-label="Choose date and time"
+      aria-label={M.dialog}
+      dir={resolvedDir}
     >
       {#if dtp.showDateTab && dtp.showTimeTab}
         <div class="sv-dtp__tabs" role="tablist">
-          <button class:is-active={dtp.tab === 'date'} {...dtp.tabProps('date')}>DATE</button>
-          <button class:is-active={dtp.tab === 'time'} {...dtp.tabProps('time')}>TIME</button>
+          <button class:is-active={dtp.tab === 'date'} {...dtp.tabProps('date')}>{M.date}</button>
+          <button class:is-active={dtp.tab === 'time'} {...dtp.tabProps('time')}>{M.time}</button>
         </div>
       {/if}
       <div class="sv-dtp__body">
@@ -193,6 +225,7 @@
             {weekNumbers}
             {locale}
             {animate}
+            dir={resolvedDir}
             onChange={dtp.onCalendarChange}
           />
         {:else if dtp.showTimeTab}
@@ -201,6 +234,7 @@
             format={hourFormat}
             {minuteInterval}
             footer
+            dir={resolvedDir}
             onChange={dtp.onTimeChange}
           />
         {/if}
@@ -210,6 +244,7 @@
 
   {#if name}<input type="hidden" {name} value={dtp.current ? dtp.current.toISOString() : ''} />{/if}
 </div>
+</SvField>
 
 <style>
   .sv-dtp {
@@ -225,14 +260,16 @@
   .sv-dtp__field {
     display: flex; align-items: center; gap: 2px;
     background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);
-    padding: 0 4px 0 0; height: 34px;
+    padding-block: 0; padding-inline: 0 4px; height: 34px;
   }
   .sv-dtp__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-dtp__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-dtp__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-dtp__input {
     flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit;
     font: inherit; font-size: 13px; padding: 0 8px; height: 100%;
   }
-  .sv-dtp__spin { display: flex; flex-direction: column; border-right: 1px solid var(--_border); }
+  .sv-dtp__spin { display: flex; flex-direction: column; border-inline-end: 1px solid var(--_border); }
   .sv-dtp__spin button {
     flex: 1; width: 20px; border: 0; background: none; color: var(--_muted); cursor: pointer;
     font-size: 7px; line-height: 1; padding: 0;