@blukavantui/community 1.0.1 → 1.2.0

package/src/web-motion/statistic.ts

@@ -0,0 +1,23 @@
+import type {MotionController} from '../motion/controller.js';
+import {createNumberTransition} from '../motion/value.js';
+type Values={Value?:number;Precision?:number;Locale?:string;IsLoading?:boolean};
+/** Exact value remains accessible throughout the decorative number transition. */
+export function enhanceStatistic(root:HTMLElement,motion:MotionController,read:()=>Values) {
+  const previousKind=root.getAttribute('data-blu-component-motion');root.setAttribute('data-blu-component-motion','statistic');
+  let dead=false,target:HTMLElement|null=null,previous=read().Value??0;
+  let number:ReturnType<typeof createNumberTransition>|undefined;
+  const sync=()=>{
+    if(dead)return;
+    const next=root.querySelector<HTMLElement>('.blu-statistic__value > strong');
+    if(next===target)return;
+    number?.destroy();number=undefined;target=next;
+    if(!next)return;
+    const options=read(),value=Number(options.Value??0);
+    if(!Number.isFinite(value))return;
+    const formatter=new Intl.NumberFormat(options.Locale||'en-US',{minimumFractionDigits:options.Precision??0,maximumFractionDigits:options.Precision??0});
+    number=createNumberTransition(next,motion,{value:previous,format:v=>formatter.format(v)});
+    void number.set(value,{duration:750,easing:'ease-in-out'});previous=value;
+  };
+  sync();const observer=new MutationObserver(sync);observer.observe(root,{childList:true,subtree:true});
+  return {capture(){},destroy(){if(dead)return;dead=true;observer.disconnect();number?.destroy();if(previousKind===null)root.removeAttribute('data-blu-component-motion');else root.setAttribute('data-blu-component-motion',previousKind);}};
+}

package/src/web-motion/surfaces.ts

@@ -0,0 +1,137 @@
+import type { MotionController, MotionEffect } from '../motion/controller.js';
+
+/** Existing components own focus trapping, dismissal and events; the first dialog
+ * presentation receives named context after paint. A closing surface is an inert,
+ * short-lived visual copy; its bounds are frozen so focus restoration cannot reflow it.
+ */
+export function observeSurface(root: HTMLElement, motion: MotionController, kind: 'modal' | 'drawer' | 'palette' | 'select' | 'picker' | 'cascader' | 'tree-select') {
+  const previous = root.getAttribute('data-blu-surface-motion'); root.setAttribute('data-blu-surface-motion', kind);
+  const selector = kind === 'cascader' ? '.blu-cascader__popup' : kind === 'tree-select' ? '.blu-tree-select__popup' : kind === 'picker' ? '.blu-picker__popup' : kind === 'select' ? '.blu-select__popup' : kind === 'palette' ? '.blu-command__dialog' : '.blu-overlay';
+  let target: HTMLElement | null = null, wasOpen = false, destroyed = false, revision = 0, trackingFrame = 0, exitDeadline = 0;
+  let dialogFocusFrame = 0, dialogPresented = false;
+  let ghost: HTMLElement | null = null, ghostTargets: HTMLElement[] = [], rect: DOMRect | undefined, panelRect: DOMRect | undefined;
+  let font = '', background = '', color = '', backdrop = '#18223066', blur = 'none', opacity = '1', panelOpacity = '1', scrollPositions: number[] = [];
+  const win = root.ownerDocument.defaultView!;
+  function isOpen(node: HTMLElement) { return kind === 'palette' ? (node as HTMLDialogElement).open : !node.hidden; }
+  function entrance(): MotionEffect {
+    if (kind !== 'drawer') return kind === 'modal' ? 'scale' : 'slide-down';
+    return target?.dataset.placement === 'left' ? 'slide-right' : target?.dataset.placement === 'bottom' ? 'slide-up' : 'slide-left';
+  }
+  function remember() {
+    if (!target || !isOpen(target)) return;
+    const panel = target.querySelector<HTMLElement>('.blu-overlay__panel') || target;
+    rect = target.getBoundingClientRect(); panelRect = panel.getBoundingClientRect();
+    const css = win.getComputedStyle(target); font = css.font; background = css.backgroundColor; color = css.color;
+    opacity = panel === target ? '1' : css.opacity; panelOpacity = win.getComputedStyle(panel).opacity;
+    if (kind === 'palette') { const scrim = win.getComputedStyle(target, '::backdrop'); backdrop = scrim.backgroundColor; blur = scrim.backdropFilter; }
+    scrollPositions = [target, ...Array.from(target.querySelectorAll<HTMLElement>('*'))].map(el => el.scrollTop);
+  }
+  function stopTracking() { win.cancelAnimationFrame(trackingFrame); trackingFrame = 0; }
+  function cancelDialogFocus() { win.cancelAnimationFrame(dialogFocusFrame); dialogFocusFrame = 0; }
+  function clearGhost() {
+    ++revision;
+    win.clearTimeout(exitDeadline); exitDeadline = 0;
+    for (const element of ghostTargets) motion.cancel(element); ghostTargets = [];
+    ghost?.remove(); ghost = null;
+  }
+  function frozenBounds(element: HTMLElement, box: DOMRect) {
+    Object.assign(element.style, { position: 'fixed', boxSizing: 'border-box', inset: 'auto', left: box.left + 'px', top: box.top + 'px', width: box.width + 'px', height: box.height + 'px', maxWidth: 'none', maxHeight: 'none', margin: '0', transform: 'none' });
+  }
+  function closingCopy(node: HTMLElement) {
+    if (node.ownerDocument.querySelector('.blu-overlay:not([hidden]):not([data-blu-exit-visual]), dialog[open]')) return;
+    if (!rect?.width || !rect.height || !node.isConnected || node.querySelector('video,canvas,iframe')) return;
+    const copy = node.cloneNode(true) as HTMLElement;
+    const sourceNodes = [node, ...Array.from(node.querySelectorAll<HTMLElement>('*'))], copyNodes = [copy, ...Array.from(copy.querySelectorAll<HTMLElement>('*'))];
+    copyNodes.forEach((el, index) => {
+      if (index && el.hasAttribute('popover')) el.hidden = true;
+      for (const name of ['id','name','autofocus','popover','aria-live','aria-labelledby','aria-describedby','aria-controls']) el.removeAttribute(name);
+      // Inert + no names prevent interaction/submission. Preserve enabled styles to avoid a flash.
+      if (el instanceof HTMLInputElement) { const source = sourceNodes[index] as HTMLInputElement; el.value = source.type === 'password' ? '' : source.value; el.checked = source.checked; }
+      else if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) el.value = (sourceNodes[index] as HTMLTextAreaElement).value;
+      el.style.pointerEvents = 'none';
+    });
+    copy.hidden = false; copy.inert = true; copy.setAttribute('aria-hidden', 'true');
+    const parent = node.parentElement!;
+    if (kind === 'modal' || kind === 'drawer') { ghost = copy; parent.append(copy); }
+    else {
+      const portal = node.ownerDocument.createElement('div');
+      portal.className = kind === 'palette' ? 'blu-command blu-motion-exit-surface' : 'blu-motion-exit-surface';
+      portal.style.cssText = `position:fixed;inset:0;width:100vw;height:100dvh;margin:0;padding:0;border:0;max-width:none;max-height:none;background:${kind === 'palette' ? backdrop : 'transparent'};backdrop-filter:${kind === 'palette' ? blur : 'none'};overflow:visible;pointer-events:none;`;
+      if (kind === 'palette') {
+        const surface = node.ownerDocument.createElement('div'); surface.className = copy.className; surface.append(...Array.from(copy.childNodes));
+        frozenBounds(surface, rect); Object.assign(surface.style, { background, color, font }); portal.append(surface);
+      } else { frozenBounds(copy, rect); copy.style.font = font; portal.append(copy); }
+      ghost = portal; parent.append(portal);
+    }
+    ghost.dataset.bluExitVisual = kind; ghost.inert = true; ghost.setAttribute('aria-hidden', 'true'); ghost.style.pointerEvents = 'none';
+    ghost.setAttribute('popover', 'manual');
+    if (ghost.showPopover) { try { ghost.showPopover(); } catch { ghost.removeAttribute('popover'); } }
+    const visual = ghost.querySelector<HTMLElement>('.blu-overlay__panel, .blu-command__dialog, .blu-select__popup, .blu-picker__popup') || ghost;
+    if (panelRect && (kind === 'modal' || kind === 'drawer')) frozenBounds(visual, panelRect);
+    visual.style.opacity = panelOpacity;
+    copyNodes.forEach((el, index) => { el.scrollTop = scrollPositions[index] || 0; });
+    // Fade exactly one layer. Fading both the parent and child multiplies opacity and
+    // makes the content disappear ahead of its backdrop. Popup exits do not rescale.
+    const own = revision, tasks = [motion.animate(ghost, [{ opacity }, { opacity: 0 }], { phase: 'exit', duration: 450, easing: 'ease-in-out' }, 'fade')];
+    ghostTargets = [ghost];
+    if (kind === 'drawer') {
+      const direction = node.dataset.placement === 'left' ? 'translateX(-18px)' : node.dataset.placement === 'bottom' ? 'translateY(18px)' : 'translateX(18px)';
+      ghostTargets.push(visual);
+      tasks.push(motion.animate(visual, [{ transform: 'none' }, { transform: direction }], { duration: 450, easing: 'ease-in-out' }));
+    }
+    // Some browsers suspend WAAPI for off-screen/inert top-layer visuals. The
+    // real popup has already closed; never let a paused cosmetic copy linger.
+    exitDeadline = win.setTimeout(() => { if (!destroyed && own === revision) clearGhost(); }, (motion.resolveOptions?.({ duration: 450 }).duration ?? (motion.mode === 'full' ? 450 : 200)) + 250);
+    void Promise.all(tasks).finally(() => { if (!destroyed && own === revision) clearGhost(); });
+  }
+  const resize = new ResizeObserver(() => { if (wasOpen) remember(); });
+  function sync() {
+    if (destroyed) return;
+    const next = root.matches(selector) ? root : root.querySelector<HTMLElement>(selector);
+    if (target !== next) { if (target) resize.unobserve(target); target = next; wasOpen = false; if (target) resize.observe(target); }
+    if (!target) return;
+    const open = isOpen(target);
+    if (open === wasOpen) return;
+    wasOpen = open; stopTracking(); cancelDialogFocus(); clearGhost();
+    const panel = target.querySelector<HTMLElement>('.blu-overlay__panel') || target;
+    motion.cancel(panel); motion.cancel(target);
+    if (open) {
+      remember(); const own = revision;
+      // Safari can announce only "button" when focus enters a newly exposed
+      // popover before its dialog subtree has reached the accessibility tree.
+      // On the first presentation, focus the named dialog after paint. Never
+      // override navigation the user has already made inside that dialog.
+      if ((kind === 'modal' || kind === 'drawer') && !dialogPresented) {
+        const initialFocus = root.ownerDocument.activeElement;
+        dialogFocusFrame = win.requestAnimationFrame(() => {
+          dialogFocusFrame = win.requestAnimationFrame(() => {
+            dialogFocusFrame = 0;
+            if (destroyed || !wasOpen || own !== revision) return;
+            dialogPresented = true;
+            if (panel.contains(initialFocus) && root.ownerDocument.activeElement === initialFocus) panel.focus({ preventScroll: true });
+          });
+        });
+      }
+      const tasks = [motion.play(panel, entrance(), { duration: kind === 'drawer' ? 450 : 350, easing: 'ease-out' })];
+      if (panel !== target) tasks.push(motion.play(target, 'fade', { duration: 280 }));
+      // ResizeObserver does not observe transforms. Track opening frames and record
+      // the final resting bounds, rather than reusing a partly translated/scaled box.
+      const trackOpening = () => { if (destroyed || !wasOpen || own !== revision) return; remember(); trackingFrame = win.requestAnimationFrame(trackOpening); };
+      trackingFrame = win.requestAnimationFrame(trackOpening);
+      void Promise.all(tasks).then(() => { if (!destroyed && wasOpen && own === revision) { stopTracking(); remember(); } });
+    } else if (motion.mode !== 'off' && !root.closest('.blu-motion-off, [data-blu-motion="off"]')) closingCopy(target);
+  }
+  const observer = new MutationObserver(sync);
+  observer.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ['hidden', 'open'] });
+  const track = () => { if (wasOpen) remember(); };
+  win.addEventListener('resize', track); win.addEventListener('scroll', track, true);
+  root.ownerDocument.addEventListener('pointerdown', track, true); root.ownerDocument.addEventListener('keydown', track, true);
+  sync();
+  return { sync, capture: remember, destroy() {
+    if (destroyed) return; destroyed = true; stopTracking(); cancelDialogFocus(); observer.disconnect(); resize.disconnect(); clearGhost();
+    if (previous === null) root.removeAttribute('data-blu-surface-motion'); else root.setAttribute('data-blu-surface-motion', previous);
+    win.removeEventListener('resize', track); win.removeEventListener('scroll', track, true);
+    root.ownerDocument.removeEventListener('pointerdown', track, true); root.ownerDocument.removeEventListener('keydown', track, true);
+    if (target) { motion.cancel(target); const panel = target.querySelector<HTMLElement>('.blu-overlay__panel'); if (panel) motion.cancel(panel); }
+  } };
+}

package/src/web-motion/tree.ts

@@ -0,0 +1,44 @@
+import type { MotionController } from '../motion/controller.js';
+import { preserveStyles } from '../motion/structure.js';
+
+/** The tree runtime owns hidden/expanded state and keyboard navigation. During a
+ * full-motion collapse only, keep the inert visual in layout until it reaches zero. */
+export function enhanceTree(root: HTMLElement, motion: MotionController) {
+  const previous = root.getAttribute('data-blu-component-motion'); root.setAttribute('data-blu-component-motion', 'tree');
+  type State = { open: boolean; height: number; revision: number; release(): void };
+  const groups = new Map<HTMLElement, State>(); let dead = false;
+  const resize = new ResizeObserver(entries => {
+    for (const entry of entries) { const el = entry.target as HTMLElement, state = groups.get(el); if (state && (!el.hidden || el.style.display === 'block')) state.height = el.getBoundingClientRect().height; }
+  });
+  function sync() {
+    if (dead) return;
+    for (const [group, state] of groups) if (!root.contains(group)) { ++state.revision; motion.cancel(group); state.release(); resize.unobserve(group); groups.delete(group); }
+    for (const group of root.querySelectorAll<HTMLElement>('.blu-tree__group')) {
+      let state = groups.get(group);
+      if (!state) { state = { open: !group.hidden, height: group.getBoundingClientRect().height, revision: 0, release() {} }; groups.set(group, state); resize.observe(group); continue; }
+      const open = !group.hidden;
+      if (state.open === open) continue;
+      const from = state.height, own = ++state.revision;
+      state.open = open; motion.cancel(group); state.release(); state.release = () => {};
+      if (group.parentElement?.closest('[hidden]')) continue;
+      const full = motion.mode === 'full' && !group.closest('.blu-motion-off,[data-blu-motion=off],[data-blu-motion=reduced]');
+      if (!full) { if (open) void motion.play(group, 'fade', { duration: 350 }); continue; }
+      const restore = preserveStyles(group, ['display', 'overflow', 'height']);
+      const inert = group.inert, ariaHidden = group.getAttribute('aria-hidden');
+      state.release = () => { restore(); group.inert = inert; if (ariaHidden === null) group.removeAttribute('aria-hidden'); else group.setAttribute('aria-hidden', ariaHidden); };
+      if (!open) { group.inert = true; group.setAttribute('aria-hidden', 'true'); group.style.setProperty('display', 'block', 'important'); }
+      const to = open ? group.scrollHeight : 0;
+      group.style.overflow = 'hidden'; group.style.height = to + 'px';
+      void motion.animate(group, [{ height: from + 'px' }, { height: to + 'px' }], { duration: 650, easing: 'ease-in-out' }).then(() => {
+        if (!dead && state!.revision === own) { state!.release(); state!.release = () => {}; state!.height = group.getBoundingClientRect().height; }
+      });
+    }
+  }
+  const observer = new MutationObserver(sync); sync();
+  observer.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ['hidden'] });
+  return { destroy() {
+    if (dead) return; dead = true; observer.disconnect(); resize.disconnect();
+    for (const [group, state] of groups) { ++state.revision; motion.cancel(group); state.release(); } groups.clear();
+    if (previous === null) root.removeAttribute('data-blu-component-motion'); else root.setAttribute('data-blu-component-motion', previous);
+  } };
+}

package/styles/checkbox.css

@@ -0,0 +1 @@
+@import './form-layout.css';

package/styles/columns2.css

@@ -0,0 +1 @@
+@import './form-layout.css';

package/styles/columns3.css

@@ -0,0 +1 @@
+@import './form-layout.css';

package/styles/columns4.css

@@ -0,0 +1 @@
+@import './form-layout.css';

package/styles/component-motion.css

@@ -0,0 +1,39 @@
+/* Opt-in web motion. Existing components remain unchanged without the integration. */
+[data-blu-component-motion=field] :is(.blu-text,.blu-textarea,.blu-select__trigger,.blu-choice__mark,.blu-text__action){transition:background-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),border-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),box-shadow var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease)}
+[data-blu-component-motion=field] .blu-choice--switch .blu-choice__mark::after{transition:transform var(--blu-component-motion-duration,320ms) var(--blu-component-motion-ease,cubic-bezier(.2,.8,.2,1))}
+[data-blu-component-motion=field] .blu-choice--radio .blu-choice__mark::after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease-out)}
+[data-blu-component-motion=field] .blu-choice--radio input:checked+.blu-choice__mark::after{transform:scale(1)}
+[data-blu-component-motion=field] .blu-select__trigger::after{transition:transform var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease-out)}
+[data-blu-component-motion=field] .blu-select__trigger[aria-expanded=true]::after{transform:translateY(2px) rotate(225deg)}
+[data-blu-exit-visual] :disabled{opacity:1!important}
+/* Focus rings and validation semantics stay immediate; only decorative feedback moves. */
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-component-motion=field] *,
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-component-motion=field] *::after{transition:none!important;animation:none!important}
+@media(prefers-reduced-motion:reduce){[data-blu-component-motion=field] *,[data-blu-component-motion=field] *::after{transition:none!important;animation:none!important}}
+[data-blu-surface-motion] :is(.blu-select__option,.blu-command__option,.blu-control){transition:background-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),border-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease)}
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-surface-motion] *{transition:none!important}
+@media(prefers-reduced-motion:reduce){[data-blu-surface-motion] *{transition:none!important}}
+/* Side drawers meet both viewport edges; the content scrolls between fixed header/footer. */
+[data-blu-surface-motion=drawer].blu-overlay:is([data-placement=left],[data-placement=right]){padding:0;align-items:stretch}
+[data-blu-surface-motion=drawer].blu-overlay:is([data-placement=left],[data-placement=right])>.blu-overlay__panel{margin:0;height:100dvh;max-height:100dvh;min-height:0;border-radius:0}
+[data-blu-surface-motion=drawer] :is(.blu-overlay__header,.blu-overlay__footer){flex-shrink:0}
+/* Existing notification keyframes are replaced by the scoped controller. */
+[data-blu-component-motion=notifications] .blu-notification{animation:none}
+[data-blu-component-motion=tree] .blu-tree__row{transition:background-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease)}
+[data-blu-surface-motion=picker] :is(.blu-picker__button,.blu-picker__input,.blu-picker__day){transition:background-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),border-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease)}
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-component-motion=tree] *{transition:none!important}
+@media(prefers-reduced-motion:reduce){[data-blu-component-motion=tree] *{transition:none!important}}
+/* Web-only active-location markers: existing links retain focus and behavior. */
+.blu-motion-navigation-marker{position:absolute;display:block;border-radius:3px;background:var(--bluui-primary,#5144ed);pointer-events:none;transform-origin:top left;z-index:1}
+.blu-motion-navigation-marker[hidden]{display:none}
+.blu-motion-navigation-marker[data-kind=pagination]{box-sizing:border-box;border:2px solid var(--bluui-primary,#5144ed);border-radius:8px;background:transparent}
+[data-blu-navigation-motion] .blu-navigation-menu .blu-navigation-menu__link--active{color:var(--bluui-primary,#5144ed);background:var(--bluui-color-primary-soft,#efedff)}
+@media(forced-colors:active){.blu-motion-navigation-marker{background:Highlight}}
+@media(forced-colors:active){.blu-motion-navigation-marker[data-kind=pagination]{background:transparent;border-color:Highlight}}
+
+/* Shared finite transition settings; continuous loading keeps its own cadence. */
+.blu-motion-button.blu-button{transition-duration:var(--blu-component-motion-duration,var(--blu-motion-duration));transition-timing-function:var(--blu-component-motion-ease,var(--blu-motion-ease))}
+/* A preference may sit on the component root itself, not only its parent. */
+:is([data-blu-component-motion],[data-blu-surface-motion],[data-blu-navigation-motion]):is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *,
+:is([data-blu-component-motion],[data-blu-surface-motion],[data-blu-navigation-motion]):is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *::before,
+:is([data-blu-component-motion],[data-blu-surface-motion],[data-blu-navigation-motion]):is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *::after{transition:none!important;animation:none!important}

package/styles/data-motion.css

@@ -0,0 +1,4 @@
+.blu-data-motion-exits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; border-radius: inherit; }
+.blu-data-motion-exit { position: absolute; display: grid; background: var(--bluui-surface, #fff); color: var(--bluui-text-muted, #68758b); font-size: 13px; align-items: center; border-bottom: 1px solid var(--bluui-border, #dce3ed); pointer-events: none; }
+.blu-data-motion-exit > span { padding: 10px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+@media (forced-colors: active) { .blu-data-motion-exits { display: none; } }

package/styles/date-picker.css

@@ -6,7 +6,7 @@
 .blu-picker [hidden],.blu-picker__dialog [hidden] {display:none!important;}
 .blu-picker__fields {display:flex;flex-wrap:wrap;gap:12px;}
 .blu-picker__field {flex:1 1 180px;min-width:0;}
-.blu-picker__field label,.blu-picker__select-field>span {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
+.blu-picker__field label,.blu-picker__select-caption {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
 .blu-picker__input {display:block;width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--bluui-control-border,#69788d);border-radius:9px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:inherit;line-height:1.4;}
 .blu-picker__field-control {position:relative;}
 .blu-picker__field-control>.blu-picker__input {padding-right:38px;}
@@ -29,7 +29,7 @@
 .blu-picker__dialog::backdrop {background:transparent;pointer-events:none;}
 .blu-picker__dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
 .blu-picker__dialog-head h2 {font-size:16px;line-height:1.4;font-family:var(--blu-font-heading-family,inherit);margin:0;overflow-wrap:anywhere;}
-.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 72px 32px;align-items:end;gap:6px;margin-top:0;}
+.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 88px 32px;align-items:end;gap:6px;margin-top:0;}
 .blu-picker__calendar-nav>.blu-picker__button {height:36px;padding:2px;font-size:22px;}
 .blu-picker__select-field {min-width:0;}
 .blu-picker__caption {font-size:15px;text-align:center;margin:16px 0 8px;}
@@ -54,8 +54,8 @@
 /* Compact popup controls; editable text stays at 16px to avoid iOS focus zoom. */
 .blu-picker__dialog .blu-picker__input {min-height:36px;padding:5px 7px;font-size:16px;line-height:1.2;}
 .blu-picker__dialog .blu-picker__button {min-height:34px;min-width:32px;padding:5px 9px;font-size:13px;line-height:1.25;}
-.blu-picker__dialog .blu-picker__select-field>span {font-size:11px;margin-bottom:2px;}
-.blu-picker__calendar-nav .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
+.blu-picker__dialog .blu-picker__select-caption {font-size:11px;margin-bottom:2px;}
+.blu-picker__calendar-nav .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog .blu-picker__error {margin-top:4px;font-size:12px;line-height:1.3;}
 @media(pointer:coarse){
  .blu-picker__field-control>.blu-picker__input {font-size:16px;min-height:44px;}
@@ -72,7 +72,7 @@
 .blu-picker__dialog[data-compact=true] .blu-picker__calendar td {height:24px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__day {min-height:24px;padding:3px 0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__time-area {margin:4px 0;gap:6px;}
-.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 .blu-picker__dialog[data-compact=true] .blu-picker__selection {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__popup-actions {margin-top:4px;gap:4px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__presets {margin-bottom:4px;gap:4px;}

package/styles/date-range-picker.css

@@ -6,7 +6,7 @@
 .blu-picker [hidden],.blu-picker__dialog [hidden] {display:none!important;}
 .blu-picker__fields {display:flex;flex-wrap:wrap;gap:12px;}
 .blu-picker__field {flex:1 1 180px;min-width:0;}
-.blu-picker__field label,.blu-picker__select-field>span {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
+.blu-picker__field label,.blu-picker__select-caption {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
 .blu-picker__input {display:block;width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--bluui-control-border,#69788d);border-radius:9px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:inherit;line-height:1.4;}
 .blu-picker__field-control {position:relative;}
 .blu-picker__field-control>.blu-picker__input {padding-right:38px;}
@@ -29,7 +29,7 @@
 .blu-picker__dialog::backdrop {background:transparent;pointer-events:none;}
 .blu-picker__dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
 .blu-picker__dialog-head h2 {font-size:16px;line-height:1.4;font-family:var(--blu-font-heading-family,inherit);margin:0;overflow-wrap:anywhere;}
-.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 72px 32px;align-items:end;gap:6px;margin-top:0;}
+.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 88px 32px;align-items:end;gap:6px;margin-top:0;}
 .blu-picker__calendar-nav>.blu-picker__button {height:36px;padding:2px;font-size:22px;}
 .blu-picker__select-field {min-width:0;}
 .blu-picker__caption {font-size:15px;text-align:center;margin:16px 0 8px;}
@@ -54,8 +54,8 @@
 /* Compact popup controls; editable text stays at 16px to avoid iOS focus zoom. */
 .blu-picker__dialog .blu-picker__input {min-height:36px;padding:5px 7px;font-size:16px;line-height:1.2;}
 .blu-picker__dialog .blu-picker__button {min-height:34px;min-width:32px;padding:5px 9px;font-size:13px;line-height:1.25;}
-.blu-picker__dialog .blu-picker__select-field>span {font-size:11px;margin-bottom:2px;}
-.blu-picker__calendar-nav .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
+.blu-picker__dialog .blu-picker__select-caption {font-size:11px;margin-bottom:2px;}
+.blu-picker__calendar-nav .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog .blu-picker__error {margin-top:4px;font-size:12px;line-height:1.3;}
 @media(pointer:coarse){
  .blu-picker__field-control>.blu-picker__input {font-size:16px;min-height:44px;}
@@ -72,7 +72,7 @@
 .blu-picker__dialog[data-compact=true] .blu-picker__calendar td {height:24px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__day {min-height:24px;padding:3px 0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__time-area {margin:4px 0;gap:6px;}
-.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 .blu-picker__dialog[data-compact=true] .blu-picker__selection {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__popup-actions {margin-top:4px;gap:4px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__presets {margin-bottom:4px;gap:4px;}

package/styles/date-time-picker.css

@@ -6,7 +6,7 @@
 .blu-picker [hidden],.blu-picker__dialog [hidden] {display:none!important;}
 .blu-picker__fields {display:flex;flex-wrap:wrap;gap:12px;}
 .blu-picker__field {flex:1 1 180px;min-width:0;}
-.blu-picker__field label,.blu-picker__select-field>span {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
+.blu-picker__field label,.blu-picker__select-caption {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
 .blu-picker__input {display:block;width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--bluui-control-border,#69788d);border-radius:9px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:inherit;line-height:1.4;}
 .blu-picker__field-control {position:relative;}
 .blu-picker__field-control>.blu-picker__input {padding-right:38px;}
@@ -29,7 +29,7 @@
 .blu-picker__dialog::backdrop {background:transparent;pointer-events:none;}
 .blu-picker__dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
 .blu-picker__dialog-head h2 {font-size:16px;line-height:1.4;font-family:var(--blu-font-heading-family,inherit);margin:0;overflow-wrap:anywhere;}
-.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 72px 32px;align-items:end;gap:6px;margin-top:0;}
+.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 88px 32px;align-items:end;gap:6px;margin-top:0;}
 .blu-picker__calendar-nav>.blu-picker__button {height:36px;padding:2px;font-size:22px;}
 .blu-picker__select-field {min-width:0;}
 .blu-picker__caption {font-size:15px;text-align:center;margin:16px 0 8px;}
@@ -54,8 +54,8 @@
 /* Compact popup controls; editable text stays at 16px to avoid iOS focus zoom. */
 .blu-picker__dialog .blu-picker__input {min-height:36px;padding:5px 7px;font-size:16px;line-height:1.2;}
 .blu-picker__dialog .blu-picker__button {min-height:34px;min-width:32px;padding:5px 9px;font-size:13px;line-height:1.25;}
-.blu-picker__dialog .blu-picker__select-field>span {font-size:11px;margin-bottom:2px;}
-.blu-picker__calendar-nav .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
+.blu-picker__dialog .blu-picker__select-caption {font-size:11px;margin-bottom:2px;}
+.blu-picker__calendar-nav .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog .blu-picker__error {margin-top:4px;font-size:12px;line-height:1.3;}
 @media(pointer:coarse){
  .blu-picker__field-control>.blu-picker__input {font-size:16px;min-height:44px;}
@@ -72,7 +72,7 @@
 .blu-picker__dialog[data-compact=true] .blu-picker__calendar td {height:24px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__day {min-height:24px;padding:3px 0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__time-area {margin:4px 0;gap:6px;}
-.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 .blu-picker__dialog[data-compact=true] .blu-picker__selection {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__popup-actions {margin-top:4px;gap:4px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__presets {margin-bottom:4px;gap:4px;}

package/styles/form-field.css

@@ -0,0 +1 @@
+@import './form-layout.css';

package/styles/form-layout.css

@@ -0,0 +1,62 @@
+/* Community Form & Layout Essentials — local draft; no OutSystems UI selectors. */
+.blu-field,.blu-columns,.blu-table{box-sizing:border-box;min-width:0;color:var(--bluui-text,#182230);font-family:var(--blu-font-family,Inter,system-ui,sans-serif);font-size:14px}
+.blu-field *,.blu-columns *,.blu-table *{box-sizing:border-box}
+.blu-field [hidden],.blu-table [hidden]{display:none!important}
+.blu-field{--blu-field-height:42px;--blu-field-padding:12px;display:flex;flex-direction:column;gap:7px;border:0;padding:0;margin:0;min-inline-size:0}
+.blu-field--small{--blu-field-height:34px;--blu-field-padding:9px;font-size:13px}.blu-field--large{--blu-field-height:50px;--blu-field-padding:15px;font-size:16px}
+.blu-field__label{font-weight:600;line-height:1.5;padding:0;margin:0 0 2px}.blu-field__body{min-width:0}
+.blu-field__help,.blu-choice__description,.blu-field__count{font-size:12px;color:var(--bluui-text-muted,#5c6b80);line-height:1.5}.blu-field__error{color:var(--bluui-color-error-text,#b42318);font-size:12px;line-height:1.5}.blu-field__count{text-align:end;margin-top:5px;font-variant-numeric:tabular-nums}
+.blu-text,.blu-textarea,.blu-select__trigger{border:1px solid var(--bluui-control-border,#7b8799);border-radius:var(--blu-radius-md,8px);background:var(--bluui-surface,#fff);color:inherit;transition:border-color .12s,box-shadow .12s}
+.blu-text{display:flex;align-items:center;gap:8px;min-height:var(--blu-field-height);padding:0 var(--blu-field-padding)}
+.blu-text__input{width:100%;min-width:0;border:0!important;box-shadow:none!important;outline:none!important;background:transparent!important;color:inherit;padding:9px 0!important;font:inherit;line-height:1.5;height:auto}
+.blu-text__input::placeholder,.blu-textarea::placeholder{color:var(--bluui-text-muted,#5c6b80);opacity:1}
+.blu-text:focus-within,.blu-textarea:focus-visible,.blu-select__trigger:focus-visible{border-color:var(--bluui-primary,#4f46e5);outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:2px}
+.blu-text__adornment{display:inline-flex;flex:none;gap:6px;align-items:center;color:var(--bluui-text-muted,#5c6b80);white-space:nowrap}.blu-text__adornment img{width:24px;height:24px;object-fit:contain;border-radius:4px}
+.blu-text__action{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:4px;background:transparent;color:var(--bluui-primary,#4f46e5);font:inherit;font-size:12px;font-weight:600;min-width:26px;min-height:30px;cursor:pointer;white-space:nowrap;padding:3px}
+.blu-text__action:hover{background:var(--bluui-hover,#f0f2f7)}
+.blu-field button:focus-visible,.blu-table button:focus-visible,.blu-table__scroll:focus-visible{outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:3px}
+.blu-textarea{display:block;width:100%;min-height:var(--blu-field-height);padding:10px var(--blu-field-padding);font:inherit;line-height:1.6}
+.blu-field[data-invalid=true] .blu-text,.blu-field[data-invalid=true] .blu-textarea,.blu-field[data-invalid=true] .blu-select__trigger{border-color:var(--bluui-color-error-text,#b42318)}
+.blu-field[data-disabled=true]{opacity:.6}.blu-field input:disabled,.blu-field textarea:disabled,.blu-field button:disabled{cursor:not-allowed}
+.blu-field input[readonly],.blu-field textarea[readonly]{cursor:default}
+.blu-choice{display:flex;align-items:center;position:relative;gap:10px;min-height:32px;cursor:pointer;line-height:1.5}.blu-choice__input{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;opacity:0}
+.blu-choice__mark{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:19px;height:19px;border:1.5px solid var(--bluui-control-border,#7b8799);border-radius:5px;background:var(--bluui-surface,#fff);color:var(--bluui-on-primary,#fff)}
+.blu-choice__input:checked+.blu-choice__mark,.blu-choice__input:indeterminate+.blu-choice__mark{background:var(--bluui-primary,#4f46e5);border-color:var(--bluui-primary,#4f46e5)}
+.blu-choice--checkbox .blu-choice__input:checked+.blu-choice__mark:after{content:'';width:5px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
+.blu-choice__input:indeterminate+.blu-choice__mark:after{content:'';width:9px;height:2px;background:currentColor;transform:none;border:0}
+.blu-choice__input:focus-visible+.blu-choice__mark{outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:3px}
+.blu-choice:has(input:disabled){opacity:.6;cursor:not-allowed}.blu-field[data-disabled=true] .blu-choice:has(input:disabled){opacity:1}
+.blu-choice--radio .blu-choice__mark{border-radius:50%}.blu-choice--radio .blu-choice__input:checked+.blu-choice__mark:after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
+.blu-choice--switch .blu-choice__mark{width:38px;height:22px;border-radius:20px;background:var(--bluui-control-border,#7b8799);padding:2px;justify-content:flex-start}
+.blu-choice--switch .blu-choice__mark:after{content:'';height:16px;width:16px;background:#fff;border-radius:50%;transition:transform .15s}
+.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark:after{transform:translateX(14px)}.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark{background:var(--bluui-primary,#4f46e5)}
+.blu-choice__state{margin-inline-start:auto;font-size:12px;color:var(--bluui-text-muted,#5c6b80)}.blu-choice__description{display:block}
+.blu-radio-group{display:flex;flex-direction:column;gap:10px}.blu-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:12px 24px}
+.blu-select{position:relative;display:flex;gap:5px}.blu-select__native{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%);pointer-events:none}
+.blu-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:var(--blu-field-height);width:100%;padding:9px var(--blu-field-padding);font:inherit;text-align:start;cursor:pointer}
+.blu-select__trigger:after{content:'';width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);flex-shrink:0}.blu-select__trigger[data-placeholder=true]{color:var(--bluui-text-muted,#5c6b80)}
+.blu-select__popup{box-sizing:border-box;position:absolute;inset:calc(100% + 6px) 0 auto;z-index:1000;max-height:320px;overflow:auto;margin:0;padding:6px;border:1px solid var(--bluui-border-strong,#b8c4d4);border-radius:10px;background:var(--bluui-surface,#fff);box-shadow:var(--bluui-menu-shadow,0 10px 30px #17203326);color:var(--bluui-text,#182230);font:inherit}
+.blu-select__search{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--bluui-control-border,#7b8799);border-radius:6px;background:var(--bluui-surface,#fff);color:inherit;font:inherit;margin-bottom:5px;outline-offset:2px}
+.blu-select__option{padding:9px 10px;border-radius:5px;cursor:pointer;line-height:1.5}.blu-select__option[aria-selected=true]{font-weight:600;color:var(--bluui-primary,#4f46e5)}.blu-select__option[data-active=true]{background:var(--bluui-selected,#e9e6ff)}.blu-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}
+.blu-columns{display:grid;grid-template-columns:var(--blu-columns-tracks,1fr 1fr);gap:var(--blu-columns-gap,24px)}.blu-columns__column{min-width:0;display:flex;flex-direction:column;gap:20px}
+@media(max-width:479px){.blu-columns--stack-small{grid-template-columns:minmax(0,1fr)}}
+@media(max-width:767px){.blu-columns--stack-medium{grid-template-columns:minmax(0,1fr)}}
+@media(max-width:1023px){.blu-columns--stack-large{grid-template-columns:minmax(0,1fr)}}
+.blu-table{border:1px solid var(--bluui-border,#e2e8f0);border-radius:12px;background:var(--bluui-surface,#fff);overflow:hidden}
+.blu-table__scroll{overflow:auto}.blu-table table{width:100%;border-collapse:collapse;font:inherit;text-align:start}.blu-table caption{text-align:start;padding:18px;font-weight:600;font-size:15px}
+.blu-table th{font-size:12px;color:var(--bluui-text-muted,#5c6b80);background:var(--bluui-surface-muted,#f7f8fb);font-weight:600;white-space:nowrap}
+.blu-table th,.blu-table td{padding:14px 18px;border-top:1px solid var(--bluui-border,#e2e8f0);line-height:1.5}
+.blu-table[data-density=Compact] th,.blu-table[data-density=Compact] td{padding:8px 12px}
+.blu-table[data-striped=true] tbody tr:nth-child(even){background:var(--bluui-surface-muted,#f7f8fb)}
+.blu-table__sort{font:inherit;font-weight:600;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:12px}
+.blu-table__empty{text-align:center!important;height:140px;color:var(--bluui-text-muted,#5c6b80)}
+.blu-table__footer{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--bluui-border,#e2e8f0);font-size:12px;flex-wrap:wrap}.blu-table__footer>span{margin-inline-end:auto;color:var(--bluui-text-muted,#5c6b80)}
+.blu-table-button{border:1px solid var(--bluui-border-strong,#b8c4d4);border-radius:6px;padding:6px 10px;background:var(--bluui-surface,#fff);font:inherit;font-size:12px;color:var(--bluui-text,#182230);cursor:pointer;min-height:30px;white-space:nowrap}.blu-table-button:hover{background:var(--bluui-hover,#f0f2f7)}.blu-table-button:disabled{opacity:.5;cursor:not-allowed}.blu-table__actions{display:flex;gap:6px}
+@media(prefers-reduced-motion:reduce){.blu-field *{transition:none!important}}
+@media(forced-colors:active){.blu-choice__mark{forced-color-adjust:none;border-color:ButtonText;background:Canvas;color:HighlightText}.blu-choice__input:checked+.blu-choice__mark,.blu-choice__input:indeterminate+.blu-choice__mark{background:Highlight;border-color:Highlight}.blu-select__option[data-active=true]{outline:2px solid Highlight}.blu-choice--switch .blu-choice__mark:after{background:ButtonText}.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark:after{background:HighlightText}}
+
+/* Equal height is row-scoped; stacked columns retain their content height. */
+.blu-columns.blu-columns--equal-height{align-items:stretch}
+.blu-columns--equal-height > .blu-columns__column > :only-child{flex:1 1 auto}
+.blu-columns--equal-height > .blu-columns__column > [data-placeholder]{display:flex;flex-direction:column}
+.blu-columns--equal-height > .blu-columns__column > [data-placeholder] > :only-child{flex:1 1 auto}

package/styles/motion-optional.css

@@ -0,0 +1,15 @@
+/* Opt-in decoration. Layers never consume pointer events or enter the accessibility tree. */
+.blu-motion-ripple,.blu-motion-shimmer{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none!important}
+.blu-motion-ripple__wave{position:absolute;border-radius:50%;background:var(--blu-ripple-color,currentColor);pointer-events:none!important;opacity:0}
+.blu-motion-choice-ripple{inset:-10px;border-radius:999px;--blu-ripple-color:var(--bluui-primary,#4f46e5)}
+.blu-motion-shimmer__beam{position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--blu-shimmer-color,#ffffffb8) 50%,transparent 80%);animation:blu-motion-shimmer var(--blu-shimmer-duration,1800ms) ease-in-out infinite}
+@keyframes blu-motion-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
+.blu-motion-shimmer[data-paused=true] .blu-motion-shimmer__beam{animation-play-state:paused}
+.blu-motion-icon{display:block;width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
+.blu-motion-emphasis{position:absolute;pointer-events:none!important;color:var(--blu-emphasis-color,currentColor)}
+.blu-motion-emphasis--underline{inset:auto 0 0;height:2px;background:currentColor;transform-origin:left center;border-radius:2px}
+.blu-motion-emphasis--border{inset:0;border-radius:inherit}
+.blu-motion-emphasis--border svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2px}
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) :is(.blu-motion-shimmer__beam,.blu-motion-ripple__wave){display:none;animation:none!important}
+@media(prefers-reduced-motion:reduce){.blu-motion-shimmer__beam,.blu-motion-ripple__wave{display:none;animation:none!important}}
+@media(forced-colors:active){.blu-motion-shimmer__beam,.blu-motion-ripple__wave{display:none}.blu-motion-emphasis{color:Highlight}}

package/styles/motion-presets.css

@@ -0,0 +1,92 @@
+/* Generated by scripts/build-motion-css.mjs. Edit src/motion/effects.ts, then regenerate. */
+.blu-motion-enter-fade, .blu-motion-fade-in { animation: blu-motion-enter-fade var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
+.blu-motion-exit-fade, .blu-motion-fade-out { animation: blu-motion-exit-fade var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
+.blu-motion-enter-slide-up, .blu-motion-slide-up { animation: blu-motion-enter-slide-up var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-slide-up { 0% { opacity: 0; transform: translateY(var(--blu-motion-distance)); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-slide-up { animation: blu-motion-exit-slide-up var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-slide-up { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(calc(-1 * var(--blu-motion-distance))); } }
+.blu-motion-enter-slide-down { animation: blu-motion-enter-slide-down var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-slide-down { 0% { opacity: 0; transform: translateY(calc(-1 * var(--blu-motion-distance))); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-slide-down { animation: blu-motion-exit-slide-down var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-slide-down { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(var(--blu-motion-distance)); } }
+.blu-motion-enter-slide-left { animation: blu-motion-enter-slide-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-slide-left { 0% { opacity: 0; transform: translateX(var(--blu-motion-distance)); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-slide-left { animation: blu-motion-exit-slide-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-slide-left { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(calc(-1 * var(--blu-motion-distance))); } }
+.blu-motion-enter-slide-right { animation: blu-motion-enter-slide-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-slide-right { 0% { opacity: 0; transform: translateX(calc(-1 * var(--blu-motion-distance))); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-slide-right { animation: blu-motion-exit-slide-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-slide-right { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(var(--blu-motion-distance)); } }
+.blu-motion-enter-zoom-in, .blu-motion-scale-in { animation: blu-motion-enter-zoom-in var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-zoom-in { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-zoom-in { animation: blu-motion-exit-zoom-in var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-zoom-in { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.08); } }
+.blu-motion-enter-zoom-out { animation: blu-motion-enter-zoom-out var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-zoom-out { 0% { opacity: 0; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-zoom-out { animation: blu-motion-exit-zoom-out var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-zoom-out { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.92); } }
+.blu-motion-enter-rotate-left { animation: blu-motion-enter-rotate-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-rotate-left { 0% { opacity: 0; transform: rotate(8deg) scale(.97); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-rotate-left { animation: blu-motion-exit-rotate-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-rotate-left { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: rotate(-8deg) scale(.97); } }
+.blu-motion-enter-rotate-right { animation: blu-motion-enter-rotate-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-rotate-right { 0% { opacity: 0; transform: rotate(-8deg) scale(.97); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-rotate-right { animation: blu-motion-exit-rotate-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-rotate-right { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: rotate(8deg) scale(.97); } }
+.blu-motion-enter-flip-x { animation: blu-motion-enter-flip-x var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-flip-x { 0% { opacity: 0; transform: perspective(600px) rotateX(30deg); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-flip-x { animation: blu-motion-exit-flip-x var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-flip-x { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: perspective(600px) rotateX(-30deg); } }
+.blu-motion-enter-flip-y { animation: blu-motion-enter-flip-y var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-flip-y { 0% { opacity: 0; transform: perspective(600px) rotateY(30deg); } 100% { opacity: 1; transform: none; } }
+.blu-motion-exit-flip-y { animation: blu-motion-exit-flip-y var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-flip-y { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: perspective(600px) rotateY(-30deg); } }
+.blu-motion-enter-pop { animation: blu-motion-enter-pop var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-pop { 0% { opacity: 0; transform: scale(.9); } 72% { opacity: 1; transform: scale(1.025); } 100% { opacity: 1; transform: scale(1); } }
+.blu-motion-exit-pop { animation: blu-motion-exit-pop var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-pop { 0% { opacity: 1; transform: scale(1); } 25% { opacity: 1; transform: scale(1.025); } 100% { opacity: 0; transform: scale(.9); } }
+.blu-motion-enter-bounce { animation: blu-motion-enter-bounce var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-bounce { 0% { opacity: 0; transform: translateY(var(--blu-motion-distance)); } 72% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 1; transform: translateY(0); } }
+.blu-motion-exit-bounce { animation: blu-motion-exit-bounce var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-bounce { 0% { opacity: 1; transform: translateY(0); } 25% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 0; transform: translateY(var(--blu-motion-distance)); } }
+.blu-motion-enter-wipe-up { animation: blu-motion-enter-wipe-up var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-wipe-up { 0% { opacity: 0; clip-path: inset(100% 0 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
+.blu-motion-exit-wipe-up { animation: blu-motion-exit-wipe-up var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-wipe-up { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 100% 0); } }
+.blu-motion-enter-wipe-down { animation: blu-motion-enter-wipe-down var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-wipe-down { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
+.blu-motion-exit-wipe-down { animation: blu-motion-exit-wipe-down var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-wipe-down { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(100% 0 0 0); } }
+.blu-motion-enter-wipe-left { animation: blu-motion-enter-wipe-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-wipe-left { 0% { opacity: 0; clip-path: inset(0 0 0 100%); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
+.blu-motion-exit-wipe-left { animation: blu-motion-exit-wipe-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-wipe-left { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 100% 0 0); } }
+.blu-motion-enter-wipe-right { animation: blu-motion-enter-wipe-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-wipe-right { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
+.blu-motion-exit-wipe-right { animation: blu-motion-exit-wipe-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-wipe-right { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 100%); } }
+.blu-motion-enter-circle-reveal { animation: blu-motion-enter-circle-reveal var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-circle-reveal { 0% { opacity: 0; clip-path: circle(0% at 50% 50%); } 100% { opacity: 1; clip-path: circle(72% at 50% 50%); } }
+.blu-motion-exit-circle-reveal { animation: blu-motion-exit-circle-reveal var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-circle-reveal { 0% { opacity: 1; clip-path: circle(72% at 50% 50%); } 100% { opacity: 0; clip-path: circle(0% at 50% 50%); } }
+.blu-motion-enter-blur-clear { animation: blu-motion-enter-blur-clear var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-enter-blur-clear { 0% { opacity: 0; filter: blur(6px); } 100% { opacity: 1; filter: blur(0px); } }
+.blu-motion-exit-blur-clear { animation: blu-motion-exit-blur-clear var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }
+@keyframes blu-motion-exit-blur-clear { 0% { opacity: 1; filter: blur(0px); } 100% { opacity: 0; filter: blur(6px); } }
+.blu-motion-ease-standard { --blu-motion-ease: cubic-bezier(.2,.8,.2,1); }
+.blu-motion-ease-in { --blu-motion-ease: cubic-bezier(.42,0,1,1); }
+.blu-motion-ease-out { --blu-motion-ease: cubic-bezier(0,0,.58,1); }
+.blu-motion-ease-in-out { --blu-motion-ease: cubic-bezier(.42,0,.58,1); }
+.blu-motion-ease-linear { --blu-motion-ease: linear; }
+.blu-motion-ease-spring { --blu-motion-ease: cubic-bezier(.34,1.25,.64,1); }
+.blu-motion-origin-center { transform-origin: 50% 50%; }
+.blu-motion-origin-top { transform-origin: 50% 0%; }
+.blu-motion-origin-bottom { transform-origin: 50% 100%; }
+.blu-motion-origin-left { transform-origin: 0% 50%; }
+.blu-motion-origin-right { transform-origin: 100% 50%; }
+.blu-motion-origin-top-left { transform-origin: 0% 0%; }
+.blu-motion-origin-top-right { transform-origin: 100% 0%; }
+.blu-motion-origin-bottom-left { transform-origin: 0% 100%; }
+.blu-motion-origin-bottom-right { transform-origin: 100% 100%; }

package/styles/motion-tokens.css

@@ -0,0 +1,6 @@
+/* Generated from src/motion/tokens.ts. */
+:root {
+  --blu-motion-fast: 280ms;
+  --blu-motion-normal: 450ms;
+  --blu-motion-slow: 750ms;
+}