@blukavantui/community 1.0.1 → 1.2.0

package/src/native-motion.ts

@@ -0,0 +1,188 @@
+/** Private, unpublished O11 1.2 integration. Enhances stable native wrappers; never owns their children. */
+import { createMotionController, type MotionController, type MotionEffect } from './motion/controller.js';
+import { createComponentMotionScope, validateComponentMotion, type ComponentMotionSettings } from './motion/component-settings.js';
+import { motionEffects, motionOrigins, type MotionOrigin } from './motion/effects.js';
+import { createRipple } from './motion/optional.js';
+import { createPressFeedback } from './motion/feedback.js';
+import { createMotionPresence } from './motion/presence.js';
+import { enhanceField } from './web-motion/fields.js';
+import { nativeComponentAdapter } from './native-motion-components.js';
+import { nativeFoundationAdapter } from './native-motion-foundations.js';
+import { observeSurface } from './web-motion/surfaces.js';
+
+export interface NativeMotionOptions {
+  EnableMotion?: boolean;
+  Preference?: 'System' | 'Reduced' | 'Off';
+  UseDefaultDuration?: boolean;
+  DurationMs?: number;
+  Easing?: ComponentMotionSettings['easing'];
+  Effect?: MotionEffect; Origin?: MotionOrigin; Phase?: 'enter'|'exit';
+  ReplayKey?: string;
+  ActivePanel?: string;
+  FocusFallbackId?: string;
+  Ripple?: boolean;
+  Value?: number; Precision?: number; Locale?: string;
+  IsVisible?: boolean; IsActive?: boolean; Paused?: boolean;
+  Once?: boolean; Order?: string; Columns?: number; GapMs?: number;
+  LoopDurationMs?: number; Decoration?: string;
+  RowKeysJson?: string; RowsJson?: string; ColumnsJson?: string; RowKey?: string; Page?: number; PageSize?: number; SortKey?: string; SortDirection?: string; Loading?: boolean;
+  Progress?: number; Label?: string; Variant?: string;
+}
+export type Kind = string;
+export type Adapter = { update(p: NativeMotionOptions): void; capture?(): void; destroy(): void };
+type Owner = { root: HTMLElement; kind: Kind; parent?: Owner; controller?: MotionController; scope?: ReturnType<typeof createComponentMotionScope>; adapter: Adapter; signature: string; priorKind: string | null; options: NativeMotionOptions };
+
+export function nativeMotionSettings(p: NativeMotionOptions): ComponentMotionSettings {
+  const preference = p.Preference ?? 'System';
+  if (!['System', 'Reduced', 'Off'].includes(preference)) throw Error('Preference must be System, Reduced or Off.');
+  if (p.Effect !== undefined && !(motionEffects as readonly string[]).includes(p.Effect) && p.Effect !== 'scale') throw Error('Unknown motion effect.');
+  if (p.UseDefaultDuration === false && p.DurationMs === undefined) throw Error('DurationMs is required when UseDefaultDuration is False.');
+  if(p.Origin!==undefined&&!(p.Origin in motionOrigins))throw Error('Unknown transform origin.');
+  if(p.Phase!==undefined&&!['enter','exit'].includes(p.Phase))throw Error('Unknown motion phase.');
+  return validateComponentMotion({ mode: preference === 'System' ? 'inherit' : preference.toLowerCase() as 'reduced' | 'off',
+    duration: p.UseDefaultDuration === false ? p.DurationMs : undefined, easing: p.Easing });
+}
+
+/** Multiple producer scripts share this registry, never overlapping body controllers. */
+export function createNativeMotionRuntime() {
+  const extensions = new Map<string, (root: HTMLElement, motion: MotionController) => Adapter>();
+  const owners = new Map<string, Owner>();
+  const hosts = new WeakMap<HTMLElement, string>();
+  function actionOwner(id:string) {
+    if(owners.has(id))return owners.get(id);
+    // Consumers can pass the Id of their own Container inside a provider;
+    // they never need access to a producer Block's private widget names.
+    for(let el=document.getElementById(id);el;el=el.parentElement){const owner=owners.get(hosts.get(el)||'');if(owner)return owner;}
+  }
+  function parentOf(root: HTMLElement): Owner | undefined {
+    for (let el = root.parentElement; el; el = el.parentElement) {
+      const owner = owners.get(hosts.get(el) || '');
+      if (owner?.kind === 'provider') return owner;
+    }
+  }
+  function destroy(id: string) {
+    const owner = owners.get(id); if (!owner) return;
+    // Children release their adapters before a screen provider disappears.
+    for (const [childId, child] of owners) if (child.parent === owner) destroy(childId);
+    owner.adapter.destroy(); owner.scope?.destroy(); owner.controller?.destroy();
+    if (owner.priorKind === null) owner.root.removeAttribute('data-blu-native-motion');
+    else owner.root.setAttribute('data-blu-native-motion', owner.priorKind);
+    owners.delete(id); if (hosts.get(owner.root) === id) hosts.delete(owner.root);
+  }
+  function makeAdapter(kind: Kind, root: HTMLElement, motion: MotionController): Adapter {
+    const extension = extensions.get(kind);
+    if(extension) return extension(root, motion);
+    const foundation = nativeFoundationAdapter(kind, root, motion);
+    if(foundation) return foundation;
+    const component = nativeComponentAdapter(kind, root, motion);
+    if(component) return component;
+    if (kind === 'chart') return {update() {},destroy() {}};
+    if (kind === 'modal') {
+      // The original modal owns focus, events and slots. Only its JS-created
+      // surface is enhanced; closing copies are inert, unnamed visual decoration.
+      const surface = observeSurface(root, motion, 'modal');
+      return { update() { surface.sync(); }, capture: surface.capture, destroy: surface.destroy };
+    }
+    if (kind === 'button') {
+      const press = createPressFeedback(root, motion);
+      let ripple: ReturnType<typeof createRipple> | undefined;
+      let busy = root.getAttribute('aria-busy'), face: HTMLElement | null = null;
+      const refresh = () => {
+        const next = root.getAttribute('aria-busy');
+        if (next === busy) return;
+        busy = next; if (face) motion.cancel(face);
+        face = root.querySelector<HTMLElement>('.blu-button-content');
+        // Native If widgets still own the label/spinner. Fade the stable face only.
+        if (face) void motion.play(face, 'fade', { duration: 350 });
+      };
+      const observer = new MutationObserver(refresh);
+      observer.observe(root, { attributes: true, attributeFilter: ['aria-busy'], childList: true, subtree: true });
+      return { update(p) { if(p.Ripple && !ripple) ripple=createRipple(root,motion); else if(!p.Ripple && ripple){ripple.destroy();ripple=undefined;} refresh(); }, destroy() { ripple?.destroy(); observer.disconnect(); if (face) motion.cancel(face); press.destroy(); } };
+    }
+    if (kind === 'field') {
+      let target: HTMLElement | null = null, field: ReturnType<typeof enhanceField> | undefined;
+      return { update() {
+        const next = root.matches('.blu-field') ? root : root.querySelector<HTMLElement>('.blu-field');
+        if (next !== target) { field?.destroy(); target = next; field = target ? enhanceField(target, motion) : undefined; }
+        field?.sync();
+      }, destroy() { field?.destroy(); } };
+    }
+    if (kind === 'workspace') {
+      const panels = Array.from(root.children).filter((el): el is HTMLElement => el instanceof HTMLElement && el.classList.contains('blu-native-workspace-panel'));
+      if (panels.length !== 2) throw Error('WorkspaceTransition requires two stable native panel wrappers.');
+      const presence = panels.map(el => createMotionPresence(el, motion));
+      let active = -1, dead = false, revision = 0;
+      return { update(p) {
+        const next = p.ActivePanel === 'Second' ? 1 : 0;
+        if (next === active) return;
+        const old = active; active = next; const own = ++revision;
+        const fallback = (p.FocusFallbackId ? root.ownerDocument.getElementById(p.FocusFallbackId) : root) || root;
+        if (old < 0) { panels.forEach((panel, i) => { panel.hidden = i !== next; panel.inert = i !== next; }); return; }
+        // Existing values and nodes stay in place; application state already changed.
+        if (panels[old].contains(root.ownerDocument.activeElement)) fallback.focus({ preventScroll: true });
+        if (panels[old].contains(root.ownerDocument.activeElement)) root.focus({ preventScroll: true });
+        const options = { effect: p.Effect || 'fade' as MotionEffect, duration: 650, focusFallback: root };
+        void presence[old].hide(options).then(() => { if (!dead && own === revision) panels[old].inert = true; });
+        void presence[next].show(options);
+      }, destroy() { dead = true; ++revision; presence.forEach(p => p.destroy()); } };
+    }
+    if(!['container','provider'].includes(kind)) throw Error('Unsupported native motion adapter: '+kind);
+    let replay: string | undefined;
+    return { update(p) {
+      if (kind !== 'container' || p.ReplayKey === replay) return;
+      replay = p.ReplayKey;
+      void motion.play(root, p.Effect || 'fade', { duration: 750, origin:p.Origin,phase:p.Phase });
+    }, destroy() { motion.cancel(root); } };
+  }
+  function sync(kind: Kind, hostId: string, p: NativeMotionOptions, ownerId = hostId): string {
+    try {
+      if (!ownerId) throw Error('A stable native motion owner is required.');
+      // These two foundation Blocks own their empty visual slot. Disabling
+      // motion must leave a static icon/progress indicator, not erase it.
+      if(p.EnableMotion!==true&&(kind==='icon'||kind==='loading'))p={...p,EnableMotion:true,Preference:'Off'};
+      if (p.EnableMotion !== true) { destroy(ownerId); return ''; }
+      const settings = nativeMotionSettings(p); // Reject invalid changes before touching the old adapter.
+      const root = document.getElementById(hostId); if (!root) { destroy(ownerId); return 'Native motion host is not rendered yet.'; }
+      const parent = parentOf(root), previous = owners.get(ownerId), occupant = hosts.get(root);
+      if (occupant && occupant !== ownerId) throw Error('Native motion host already has an owner.');
+      if (previous && (previous.root !== root || previous.kind !== kind || previous.parent !== parent)) destroy(ownerId);
+      let owner = owners.get(ownerId);
+      const signature = JSON.stringify(settings);
+      if (!owner) {
+        const controller = parent ? undefined : createMotionController(root, 'system');
+        const base = parent?.scope?.motion || parent?.controller || controller!;
+        // A private controller owns the root attribute; its component scope is destroyed first.
+        const scope = createComponentMotionScope(root, base, settings);
+        const priorKind = root.getAttribute('data-blu-native-motion');
+        root.setAttribute('data-blu-native-motion', kind);
+        try {
+          owner = { root, kind, parent, controller, scope, adapter: makeAdapter(kind, root, scope.motion), signature, priorKind, options: { ...p } };
+          owners.set(ownerId, owner); hosts.set(root, ownerId);
+        } catch (error) { scope.destroy(); controller?.destroy(); if (priorKind === null) root.removeAttribute('data-blu-native-motion'); else root.setAttribute('data-blu-native-motion', priorKind); throw error; }
+      } else if (owner.signature !== signature) { owner.scope!.update(settings); owner.signature = signature; }
+      const preference = settings.mode === 'inherit' ? 'system' : settings.mode || 'system';
+      if (owner.controller && owner.controller.preference !== preference) owner.controller.setPreference(preference);
+      owner.options = { ...p };
+      owner.adapter.update({ ...p, ReplayKey: p.ReplayKey ?? '' });
+      // O11 can ready inner Blocks before their enclosing provider.
+      if (kind === 'provider') for (const [childId, child] of Array.from(owners)) {
+        if (child !== owner && root.contains(child.root) && child.parent !== parentOf(child.root)) sync(child.kind, child.root.id, child.options, childId);
+      }
+      return '';
+    } catch (error) { return error instanceof Error ? error.message : String(error); }
+  }
+  return { version: '1.2.0-local-full', sync, destroy,
+    register(kind: string, build: (root: HTMLElement, motion: MotionController) => Adapter) { if(extensions.has(kind)) return; extensions.set(kind,build); },
+    play(id: string, targetId: string, effect: MotionEffect = 'fade', phase: 'enter'|'exit' = 'enter') { nativeMotionSettings({Effect:effect,Phase:phase});const owner=actionOwner(id),target=document.getElementById(targetId); if(!owner?.scope || !target || !owner.root.contains(target))return Promise.resolve('cancelled'); return owner.scope.motion.play(target,effect,{phase}); },
+    cancel(id: string, targetId: string) { const owner=actionOwner(id),target=document.getElementById(targetId); if(target&&owner?.root.contains(target)) owner.scope?.motion.cancel(target); },
+    setPreference(id:string,preference:NativeMotionOptions['Preference']) {const owner=actionOwner(id);return owner?sync(owner.kind,owner.root.id,{...owner.options,Preference:preference},hosts.get(owner.root)):'Native motion owner is unavailable.';},
+    capture: (id: string) => owners.get(id)?.adapter.capture?.(),
+    /** Read-only counts for lifecycle checks; does not expose application data. */
+    inspect: () => ({ owners: owners.size, kinds: Array.from(owners.values(), o => o.kind) }),
+  };
+}
+
+declare global { interface Window { BluUIMotion12?: ReturnType<typeof createNativeMotionRuntime>; BluUIMotion12Plugins?: Array<(runtime:ReturnType<typeof createNativeMotionRuntime>)=>void> } }
+if (typeof window !== 'undefined' && !window.BluUIMotion12) window.BluUIMotion12 = createNativeMotionRuntime();
+
+if(typeof window!=="undefined"&&window.BluUIMotion12)for(const install of window.BluUIMotion12Plugins?.splice(0)||[])install(window.BluUIMotion12);

package/src/radio-button.ts

@@ -0,0 +1,2 @@
+export {createRadioButton} from './form-layout/choice.js';
+export type * from './form-layout/types.js';

package/src/radio-group.ts

@@ -0,0 +1,2 @@
+export {createRadioGroup} from './form-layout/choice.js';
+export type * from './form-layout/types.js';

package/src/runtime/date-picker.js

@@ -1,4 +1,4 @@
-// ../blu-grid/docs/scripts/advanced/shared.js
+// docs/scripts/advanced/shared.js
 import { state, register } from "./kernel.js";
 var shared = state("advanced", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
 var uid = () => `blu-advanced-${++shared.serial}`;
@@ -91,7 +91,7 @@ function createAPI(kind, init2, update2) {
   }, destroy }));
 }
 
-// ../blu-grid/docs/scripts/advanced/date-utils.js
+// docs/scripts/advanced/date-utils.js
 var pad = (n) => String(n).padStart(2, "0");
 function dateValue(d) {
   return String(d.getFullYear()).padStart(4, "0") + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
@@ -172,7 +172,7 @@ function validateRange(start, end, options = {}) {
   return "";
 }
 
-// ../blu-grid/docs/scripts/advanced/pickers.js
+// docs/scripts/advanced/pickers.js
 var formatOptions = ["YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY"];
 var today = () => dateValue(/* @__PURE__ */ new Date());
 var datePart = (value) => String(value || "").split("T")[0];
@@ -256,14 +256,15 @@ function positionPopup(s) {
   const below = Math.max(0, top + height - edge - anchor.bottom - gap), above = Math.max(0, anchor.top - gap - top - edge);
   const natural = panel.scrollHeight + 2, up = natural > below && above > below, room = Math.max(0, height - edge * 2);
   panel.style.maxHeight = room + "px";
-  panel.style.left = Math.max(left + edge, Math.min(anchor.left, left + width - edge - panelWidth)) + "px";
+  const fields = s.fieldRow.getBoundingClientRect();
+  panel.style.left = Math.max(left + edge, Math.min(fields.left + (fields.width - panelWidth) / 2, left + width - edge - panelWidth)) + "px";
   const preferred = up ? anchor.top - gap - natural : anchor.bottom + gap;
   panel.style.top = Math.max(top + edge, Math.min(preferred, top + height - edge - Math.min(natural, room))) + "px";
   panel.dataset.placement = up ? "top" : "bottom";
 }
 function focusPopup(s) {
   const timeField = s.timeOnly || s.dateTime && s.anchor === s.fields[1].input;
-  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus();
+  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus({ preventScroll: true });
 }
 function commit(s, first, end, time, keepOpen = false) {
   const issue = validate(s, first, end, time);
@@ -287,7 +288,7 @@ function commit(s, first, end, time, keepOpen = false) {
   s.inputSignature = JSON.stringify(s.range ? [s.start, s.end] : [s.value]);
   paintInputs(s);
   if (!keepOpen) close(s);
-  if (returnToInput) s.fields[0].input.focus();
+  if (returnToInput) s.fields[0].input.focus({ preventScroll: true });
   s.notice.textContent = s.range ? first ? labelDate(s, first) + " to " + labelDate(s, end) : "Date range cleared" : value ? "Selected " + (s.timeOnly ? formatTime(value, s.cycle) : labelDate(s, first) + (s.hasTime ? " at " + formatTime(time, s.cycle) : "")) : "Selection cleared";
   if (changed) {
     if (s.range) emit(s, "Change", first, end);
@@ -391,11 +392,18 @@ function appendOption(select, value, label) {
   return option;
 }
 function selectField(s, label, name) {
-  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "", label), select = node("select", "blu-picker__input");
+  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "blu-picker__select-caption", label), select = node("select", "blu-picker__input");
   select.id = s.uid + "-" + name;
   wrap.append(caption, select);
   return { wrap, select };
 }
+function focusPopupButton(event) {
+  if (event.button !== 0) return;
+  const target = event.target.closest?.("button");
+  if (!target || target.disabled) return;
+  event.preventDefault();
+  target.focus({ preventScroll: true });
+}
 function focusDay(s, value) {
   const min = datePart(s.options.Min) || "0001-01-01", max = datePart(s.options.Max) || "9999-12-31";
   value = value < min ? min : value > max ? max : value;
@@ -403,7 +411,7 @@ function focusDay(s, value) {
   s.focusDate = value;
   s.month = value.slice(0, 7);
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
 }
 function keyDay(s, event, value) {
   if (event.altKey || event.ctrlKey || event.metaKey) return;
@@ -441,7 +449,7 @@ function chooseDay(s, value) {
     return;
   }
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
   paintDraft(s);
 }
 function paintDraft(s) {
@@ -594,6 +602,7 @@ function init(s) {
   attr(s.dialog, "aria-modal", "false");
   if (s.dialog.showPopover) attr(s.dialog, "popover", "manual");
   s.root.append(s.dialog);
+  s.dialog.addEventListener("mousedown", focusPopupButton);
   s.title = node("h2", "blu-advanced-sr");
   s.title.id = s.uid + "-title";
   s.dialog.append(s.title);
@@ -606,7 +615,7 @@ function init(s) {
   const month = selectField(s, "Month", "month");
   s.monthSelect = month.select;
   const year = node("label", "blu-picker__select-field");
-  year.append(node("span", "", "Year"));
+  year.append(node("span", "blu-picker__select-caption", "Year"));
   s.yearInput = node("input", "blu-picker__input");
   s.yearInput.type = "number";
   s.yearInput.step = "1";
@@ -804,8 +813,8 @@ function update(s) {
     else {
       paintCalendar(s);
       paintTimes(s);
-      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus();
-      else if (focusId) document.getElementById(focusId)?.focus();
+      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus({ preventScroll: true });
+      else if (focusId) document.getElementById(focusId)?.focus({ preventScroll: true });
       positionPopup(s);
     }
   }

package/src/runtime/date-range-picker.js

@@ -1,4 +1,4 @@
-// ../blu-grid/docs/scripts/advanced/shared.js
+// docs/scripts/advanced/shared.js
 import { state, register } from "./kernel.js";
 var shared = state("advanced", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
 var uid = () => `blu-advanced-${++shared.serial}`;
@@ -91,7 +91,7 @@ function createAPI(kind, init2, update2) {
   }, destroy }));
 }
 
-// ../blu-grid/docs/scripts/advanced/date-utils.js
+// docs/scripts/advanced/date-utils.js
 var pad = (n) => String(n).padStart(2, "0");
 function dateValue(d) {
   return String(d.getFullYear()).padStart(4, "0") + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
@@ -172,7 +172,7 @@ function validateRange(start, end, options = {}) {
   return "";
 }
 
-// ../blu-grid/docs/scripts/advanced/pickers.js
+// docs/scripts/advanced/pickers.js
 var formatOptions = ["YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY"];
 var today = () => dateValue(/* @__PURE__ */ new Date());
 var datePart = (value) => String(value || "").split("T")[0];
@@ -256,14 +256,15 @@ function positionPopup(s) {
   const below = Math.max(0, top + height - edge - anchor.bottom - gap), above = Math.max(0, anchor.top - gap - top - edge);
   const natural = panel.scrollHeight + 2, up = natural > below && above > below, room = Math.max(0, height - edge * 2);
   panel.style.maxHeight = room + "px";
-  panel.style.left = Math.max(left + edge, Math.min(anchor.left, left + width - edge - panelWidth)) + "px";
+  const fields = s.fieldRow.getBoundingClientRect();
+  panel.style.left = Math.max(left + edge, Math.min(fields.left + (fields.width - panelWidth) / 2, left + width - edge - panelWidth)) + "px";
   const preferred = up ? anchor.top - gap - natural : anchor.bottom + gap;
   panel.style.top = Math.max(top + edge, Math.min(preferred, top + height - edge - Math.min(natural, room))) + "px";
   panel.dataset.placement = up ? "top" : "bottom";
 }
 function focusPopup(s) {
   const timeField = s.timeOnly || s.dateTime && s.anchor === s.fields[1].input;
-  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus();
+  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus({ preventScroll: true });
 }
 function commit(s, first, end, time, keepOpen = false) {
   const issue = validate(s, first, end, time);
@@ -287,7 +288,7 @@ function commit(s, first, end, time, keepOpen = false) {
   s.inputSignature = JSON.stringify(s.range ? [s.start, s.end] : [s.value]);
   paintInputs(s);
   if (!keepOpen) close(s);
-  if (returnToInput) s.fields[0].input.focus();
+  if (returnToInput) s.fields[0].input.focus({ preventScroll: true });
   s.notice.textContent = s.range ? first ? labelDate(s, first) + " to " + labelDate(s, end) : "Date range cleared" : value ? "Selected " + (s.timeOnly ? formatTime(value, s.cycle) : labelDate(s, first) + (s.hasTime ? " at " + formatTime(time, s.cycle) : "")) : "Selection cleared";
   if (changed) {
     if (s.range) emit(s, "Change", first, end);
@@ -391,11 +392,18 @@ function appendOption(select, value, label) {
   return option;
 }
 function selectField(s, label, name) {
-  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "", label), select = node("select", "blu-picker__input");
+  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "blu-picker__select-caption", label), select = node("select", "blu-picker__input");
   select.id = s.uid + "-" + name;
   wrap.append(caption, select);
   return { wrap, select };
 }
+function focusPopupButton(event) {
+  if (event.button !== 0) return;
+  const target = event.target.closest?.("button");
+  if (!target || target.disabled) return;
+  event.preventDefault();
+  target.focus({ preventScroll: true });
+}
 function focusDay(s, value) {
   const min = datePart(s.options.Min) || "0001-01-01", max = datePart(s.options.Max) || "9999-12-31";
   value = value < min ? min : value > max ? max : value;
@@ -403,7 +411,7 @@ function focusDay(s, value) {
   s.focusDate = value;
   s.month = value.slice(0, 7);
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
 }
 function keyDay(s, event, value) {
   if (event.altKey || event.ctrlKey || event.metaKey) return;
@@ -441,7 +449,7 @@ function chooseDay(s, value) {
     return;
   }
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
   paintDraft(s);
 }
 function paintDraft(s) {
@@ -594,6 +602,7 @@ function init(s) {
   attr(s.dialog, "aria-modal", "false");
   if (s.dialog.showPopover) attr(s.dialog, "popover", "manual");
   s.root.append(s.dialog);
+  s.dialog.addEventListener("mousedown", focusPopupButton);
   s.title = node("h2", "blu-advanced-sr");
   s.title.id = s.uid + "-title";
   s.dialog.append(s.title);
@@ -606,7 +615,7 @@ function init(s) {
   const month = selectField(s, "Month", "month");
   s.monthSelect = month.select;
   const year = node("label", "blu-picker__select-field");
-  year.append(node("span", "", "Year"));
+  year.append(node("span", "blu-picker__select-caption", "Year"));
   s.yearInput = node("input", "blu-picker__input");
   s.yearInput.type = "number";
   s.yearInput.step = "1";
@@ -804,8 +813,8 @@ function update(s) {
     else {
       paintCalendar(s);
       paintTimes(s);
-      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus();
-      else if (focusId) document.getElementById(focusId)?.focus();
+      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus({ preventScroll: true });
+      else if (focusId) document.getElementById(focusId)?.focus({ preventScroll: true });
       positionPopup(s);
     }
   }

package/src/runtime/date-time-picker.js

@@ -1,4 +1,4 @@
-// ../blu-grid/docs/scripts/advanced/shared.js
+// docs/scripts/advanced/shared.js
 import { state, register } from "./kernel.js";
 var shared = state("advanced", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
 var uid = () => `blu-advanced-${++shared.serial}`;
@@ -91,7 +91,7 @@ function createAPI(kind, init2, update2) {
   }, destroy }));
 }
 
-// ../blu-grid/docs/scripts/advanced/date-utils.js
+// docs/scripts/advanced/date-utils.js
 var pad = (n) => String(n).padStart(2, "0");
 function dateValue(d) {
   return String(d.getFullYear()).padStart(4, "0") + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
@@ -172,7 +172,7 @@ function validateRange(start, end, options = {}) {
   return "";
 }
 
-// ../blu-grid/docs/scripts/advanced/pickers.js
+// docs/scripts/advanced/pickers.js
 var formatOptions = ["YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY"];
 var today = () => dateValue(/* @__PURE__ */ new Date());
 var datePart = (value) => String(value || "").split("T")[0];
@@ -256,14 +256,15 @@ function positionPopup(s) {
   const below = Math.max(0, top + height - edge - anchor.bottom - gap), above = Math.max(0, anchor.top - gap - top - edge);
   const natural = panel.scrollHeight + 2, up = natural > below && above > below, room = Math.max(0, height - edge * 2);
   panel.style.maxHeight = room + "px";
-  panel.style.left = Math.max(left + edge, Math.min(anchor.left, left + width - edge - panelWidth)) + "px";
+  const fields = s.fieldRow.getBoundingClientRect();
+  panel.style.left = Math.max(left + edge, Math.min(fields.left + (fields.width - panelWidth) / 2, left + width - edge - panelWidth)) + "px";
   const preferred = up ? anchor.top - gap - natural : anchor.bottom + gap;
   panel.style.top = Math.max(top + edge, Math.min(preferred, top + height - edge - Math.min(natural, room))) + "px";
   panel.dataset.placement = up ? "top" : "bottom";
 }
 function focusPopup(s) {
   const timeField = s.timeOnly || s.dateTime && s.anchor === s.fields[1].input;
-  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus();
+  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus({ preventScroll: true });
 }
 function commit(s, first, end, time, keepOpen = false) {
   const issue = validate(s, first, end, time);
@@ -287,7 +288,7 @@ function commit(s, first, end, time, keepOpen = false) {
   s.inputSignature = JSON.stringify(s.range ? [s.start, s.end] : [s.value]);
   paintInputs(s);
   if (!keepOpen) close(s);
-  if (returnToInput) s.fields[0].input.focus();
+  if (returnToInput) s.fields[0].input.focus({ preventScroll: true });
   s.notice.textContent = s.range ? first ? labelDate(s, first) + " to " + labelDate(s, end) : "Date range cleared" : value ? "Selected " + (s.timeOnly ? formatTime(value, s.cycle) : labelDate(s, first) + (s.hasTime ? " at " + formatTime(time, s.cycle) : "")) : "Selection cleared";
   if (changed) {
     if (s.range) emit(s, "Change", first, end);
@@ -391,11 +392,18 @@ function appendOption(select, value, label) {
   return option;
 }
 function selectField(s, label, name) {
-  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "", label), select = node("select", "blu-picker__input");
+  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "blu-picker__select-caption", label), select = node("select", "blu-picker__input");
   select.id = s.uid + "-" + name;
   wrap.append(caption, select);
   return { wrap, select };
 }
+function focusPopupButton(event) {
+  if (event.button !== 0) return;
+  const target = event.target.closest?.("button");
+  if (!target || target.disabled) return;
+  event.preventDefault();
+  target.focus({ preventScroll: true });
+}
 function focusDay(s, value) {
   const min = datePart(s.options.Min) || "0001-01-01", max = datePart(s.options.Max) || "9999-12-31";
   value = value < min ? min : value > max ? max : value;
@@ -403,7 +411,7 @@ function focusDay(s, value) {
   s.focusDate = value;
   s.month = value.slice(0, 7);
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
 }
 function keyDay(s, event, value) {
   if (event.altKey || event.ctrlKey || event.metaKey) return;
@@ -441,7 +449,7 @@ function chooseDay(s, value) {
     return;
   }
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
   paintDraft(s);
 }
 function paintDraft(s) {
@@ -594,6 +602,7 @@ function init(s) {
   attr(s.dialog, "aria-modal", "false");
   if (s.dialog.showPopover) attr(s.dialog, "popover", "manual");
   s.root.append(s.dialog);
+  s.dialog.addEventListener("mousedown", focusPopupButton);
   s.title = node("h2", "blu-advanced-sr");
   s.title.id = s.uid + "-title";
   s.dialog.append(s.title);
@@ -606,7 +615,7 @@ function init(s) {
   const month = selectField(s, "Month", "month");
   s.monthSelect = month.select;
   const year = node("label", "blu-picker__select-field");
-  year.append(node("span", "", "Year"));
+  year.append(node("span", "blu-picker__select-caption", "Year"));
   s.yearInput = node("input", "blu-picker__input");
   s.yearInput.type = "number";
   s.yearInput.step = "1";
@@ -804,8 +813,8 @@ function update(s) {
     else {
       paintCalendar(s);
       paintTimes(s);
-      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus();
-      else if (focusId) document.getElementById(focusId)?.focus();
+      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus({ preventScroll: true });
+      else if (focusId) document.getElementById(focusId)?.focus({ preventScroll: true });
       positionPopup(s);
     }
   }