@blukavantui/community 1.1.0 → 1.2.0

package/dist/switch.js

@@ -1 +1 @@
-import"./chunk-EPZGLHPD.js";import{b as a}from"./chunk-GXHANADL.js";import"./chunk-EOKNLCNS.js";export{a as createSwitch};
+import"./chunk-EPZGLHPD.js";import{b as a}from"./chunk-TZSX4OTV.js";import"./chunk-EOKNLCNS.js";export{a as createSwitch};

package/dist/table.js

@@ -1 +1 @@
-import{a}from"./chunk-IZJN3EF7.js";import"./chunk-EOKNLCNS.js";export{a as createTable};
+import"./chunk-YLFXSHKZ.js";import{b as a}from"./chunk-T45FJNEQ.js";import"./chunk-EOKNLCNS.js";export{a as createTable};

package/dist/time-picker.js

@@ -1 +1 @@
-import{a}from"./chunk-JVE6CXCJ.js";import"./chunk-MEEQNPGM.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createTimePicker};
+import"./chunk-V4ZQLQ7L.js";import{a}from"./chunk-EPPETNK6.js";import"./chunk-MEEQNPGM.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createTimePicker};

package/dist/tree-view.js

@@ -1 +1 @@
-import{a}from"./chunk-H7ETPJVW.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createTreeView};
+import"./chunk-ZDGZGAYG.js";import{a}from"./chunk-3PODK22R.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createTreeView};

package/dist/web-motion/chip-ripple.d.ts

@@ -0,0 +1,6 @@
+import type { MotionController } from '../motion/controller.js';
+/** Decorate the selected chip after its real click, even if that click replaces
+ * its button. No synthesized activation or application-state change. */
+export declare function enhanceChipRipple(root: HTMLElement, motion: MotionController): {
+    destroy(): void;
+};

package/dist/web-motion/choice-ripple.d.ts

@@ -0,0 +1,6 @@
+import type { MotionController, MotionOptions } from '../motion/controller.js';
+/** One decorative pulse per native activation. Label clicks, Space and radio
+ * arrow changes keep the original input, focus, value and change events. */
+export declare function enhanceChoiceRipple(root: HTMLElement, motion: MotionController, timing?: MotionOptions): {
+    destroy(): void;
+};

package/dist/web-motion/content.d.ts

@@ -0,0 +1,9 @@
+import type { MotionController } from '../motion/controller.js';
+export type ContentMotionKind = 'profile-card' | 'video-lightbox' | 'video-player' | 'collection-layout' | 'cascader' | 'transfer' | 'chip' | 'tree-select' | 'timeline' | 'skeleton' | 'media-image' | 'tour' | 'notification-center';
+/** DOM-only enhancement: the original component still owns data, focus and media playback. */
+export declare function enhanceContentMotion(root: HTMLElement, motion: MotionController, kind: ContentMotionKind, options?: {
+    timelineKeys?: () => string[];
+}): {
+    capture: () => void;
+    destroy(): void;
+};

package/dist/web-motion/data-rows.d.ts

@@ -0,0 +1,12 @@
+import type { MotionController } from '../motion/controller.js';
+export interface MotionRow {
+    key: string;
+    element: HTMLElement;
+    cells: HTMLElement[];
+    cellKeys: string[];
+}
+/** Presentation only. Data, selection, sorting, paging and keyboard handling stay with the component. */
+export declare function enhanceDataRows(root: HTMLElement, motion: MotionController, read: () => MotionRow[]): {
+    capture: () => void;
+    destroy(): void;
+};

package/dist/web-motion/fields.d.ts

@@ -0,0 +1,6 @@
+import type { MotionController } from '../motion/controller.js';
+/** Adds feedback to existing controls without replacing inputs or intercepting native events. */
+export declare function enhanceField(root: HTMLElement, motion: MotionController): {
+    sync: () => void;
+    destroy(): void;
+};

package/dist/web-motion/navigation.d.ts

@@ -0,0 +1,6 @@
+import type { MotionController } from '../motion/controller.js';
+/** The existing Sidebar/Pagination still owns navigation, focus and events.
+ * This marker only follows aria-current; it never intercepts links or history. */
+export declare function enhanceNavigation(root: HTMLElement, motion: MotionController, kind: 'sidebar' | 'pagination' | 'tabs'): {
+    destroy(): void;
+};

package/dist/web-motion/notifications.d.ts

@@ -0,0 +1,6 @@
+import type { MotionController } from '../motion/controller.js';
+/** Observe the existing message stack. Its runtime still owns timers, pause on
+ * hover/focus, announcements and dismissal. Exits are decorative, inert copies. */
+export declare function enhanceNotifications(root: HTMLElement, motion: MotionController): {
+    destroy(): void;
+};

package/dist/web-motion/select-ripple.d.ts

@@ -0,0 +1,6 @@
+import type { MotionController, MotionOptions } from '../motion/controller.js';
+/** Decorate an actual open/close or selection change, after Select has updated
+ * its label. The component continues to own focus, keyboard and value events. */
+export declare function enhanceSelectRipple(root: HTMLElement, motion: MotionController, timing?: MotionOptions): {
+    destroy(): void;
+};

package/dist/web-motion/statistic.d.ts

@@ -0,0 +1,13 @@
+import type { MotionController } from '../motion/controller.js';
+type Values = {
+    Value?: number;
+    Precision?: number;
+    Locale?: string;
+    IsLoading?: boolean;
+};
+/** Exact value remains accessible throughout the decorative number transition. */
+export declare function enhanceStatistic(root: HTMLElement, motion: MotionController, read: () => Values): {
+    capture(): void;
+    destroy(): void;
+};
+export {};

package/dist/web-motion/surfaces.d.ts

@@ -0,0 +1,10 @@
+import type { MotionController } 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 declare function observeSurface(root: HTMLElement, motion: MotionController, kind: 'modal' | 'drawer' | 'palette' | 'select' | 'picker' | 'cascader' | 'tree-select'): {
+    sync: () => void;
+    capture: () => void;
+    destroy(): void;
+};

package/dist/web-motion/tree.d.ts

@@ -0,0 +1,6 @@
+import type { MotionController } from '../motion/controller.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 declare function enhanceTree(root: HTMLElement, motion: MotionController): {
+    destroy(): void;
+};

package/docs/FORM-LAYOUT-ESSENTIALS.md

@@ -1,6 +1,6 @@
-# Community Form & Layout Essentials — local draft
+# Community Form & Layout Essentials
 
-This is unreleased development work. The npm and native 1.0.1 releases do not contain these additions. No version has been changed and no package, website, or native module has been published. `edition.json` continues to describe the existing release; `draft-components.json` explicitly tracks this batch. Native source preparation is not proof of Service Studio editor or runtime behavior.
+These 12 controls and 18 native Blocks shipped in Community 1.1.0. The isolated 1.2.0 review candidate adds opt-in motion and retains their existing APIs. Public 1.2 publication is held. This is not a full-library accessibility certification.
 
 ## Local preview and build
 
@@ -86,7 +86,7 @@ Table columns accept `Key`, `Header`, `Sortable`, `Align`, and optional text-onl
 
 ## Native local implementation and verification boundary
 
-Eighteen public native blocks are implemented and merged into the local Service Studio editors for `BluKavantUi_Community_Inputs`, `BluKavantUi_Community_Layout`, and `BluKavantUi_Community_Data`, under `Essentials`. Each block has a custom icon. Local OML review copies, original backups, model-edit source, validation results, and dependency inventories are saved in `native-builds/FormLayoutEssentials20261022/`. These are unpublished development copies; the released OMLs and npm archives are unchanged.
+Eighteen public native blocks are implemented in the Service Studio producers for `BluKavantUi_Community_Inputs`, `BluKavantUi_Community_Layout`, and `BluKavantUi_Community_Data`, under `Essentials`. Each block has a custom icon. Local OML review copies, original backups, model-edit source, validation results, and dependency inventories are saved in `native-builds/FormLayoutEssentials20261022/`. These are unpublished development copies; the released OMLs and npm archives are unchanged.
 
 All three producers pass Service Studio validation with zero errors and only their two pre-existing license/notice resource warnings. The actual **Remove Unused Dependencies** command was run on each producer; all reported no dependencies to remove. Remaining references are `(System)` and, for Inputs/Data, `BluKavantUi_Community_Core`. There is no OutSystems UI or Material UI dependency. Platform Container, Expression, Image, and Placeholder widgets support editor display; they are distinct from the OutSystems UI producer.
 
@@ -119,4 +119,4 @@ OnReady and OnParametersChanged synchronize each control; OnDestroy disposes it.
 
 Consumers own values and application validation: assign the returned OnChange value to the variable passed into the block, and pass application validation messages through `Error`. These custom HTML controls do **not** automatically register with OutSystems `Form.Valid`; the consumer must validate its model before saving. Browser constraint validation and the web `validate()` API remain available for ordinary HTML forms.
 
-No running OutSystems consumer was published or exercised. Runtime integration in a compiled OutSystems application remains a required pre-release check once publication is authorized. No dependency refresh or publication of the existing demo consumers was performed. FormBuilder/FormRenderer remain Pro.
+Compiled development consumers have been exercised. See the 1.2 review evidence for exact keyboard, VoiceOver and motion coverage; this does not establish coverage of every consumer application. Public publication remains held. FormBuilder/FormRenderer remain Pro.

package/edition.json

@@ -1,6 +1,6 @@
 {
   "edition": "Community",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "BluKavantUI Community Free Use, Official Distribution Licence 1.2",
   "distribution": "Official @blukavantui/community npm package, official BluKavantUI Web downloads and official OutSystems Forge listing when published",
   "redistribution": "No republishing, mirroring or resale of the reusable components, including modified copies; see LICENSE.txt for permitted private work, application delivery and third-party rights.",

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@blukavantui/community",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@blukavantui/community",
-      "version": "1.1.0",
+      "version": "1.2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "ag-grid-community": "36.2.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blukavantui/community",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "BluKavantUI Community: 67 Web components. OutSystems integration available separately.",
   "homepage": "https://blukavantui.blutekmedia.com/community",
   "bugs": {
@@ -414,7 +414,30 @@
       "types": "./dist/form-layout.d.ts",
       "import": "./dist/form-layout.js"
     },
-    "./form-layout.css": "./dist/form-layout.css"
+    "./form-layout.css": "./dist/form-layout.css",
+    "./motion": {
+      "types": "./dist/motion.d.ts",
+      "import": "./dist/motion.js"
+    },
+    "./motion.css": "./dist/motion.css",
+    "./component-motion": {
+      "types": "./dist/component-motion.d.ts",
+      "import": "./dist/component-motion.js"
+    },
+    "./data-motion": {
+      "types": "./dist/data-motion.d.ts",
+      "import": "./dist/data-motion.js"
+    },
+    "./motion/settings": {
+      "types": "./dist/motion-settings.d.ts",
+      "import": "./dist/motion-settings.js"
+    },
+    "./motion/enhancers": {
+      "types": "./dist/motion-enhancers.d.ts",
+      "import": "./dist/motion-enhancers.js"
+    },
+    "./component-motion.css": "./dist/component-motion.css",
+    "./data-motion.css": "./dist/data-motion.css"
   },
   "files": [
     "dist",
@@ -432,7 +455,10 @@
     "docs/PUBLISHING.md",
     "assets",
     "draft-components.json",
-    "docs/FORM-LAYOUT-ESSENTIALS.md"
+    "docs/FORM-LAYOUT-ESSENTIALS.md",
+    "scripts/build-motion-css.mjs",
+    "scripts/build-motion-styles.mjs",
+    "scripts/motion-entries.mjs"
   ],
   "sideEffects": [
     "**/*.css",

package/scripts/build-motion-css.mjs

@@ -0,0 +1,36 @@
+/** Web-only utility generation from the same presets as WAAPI. Does not touch native/release artifacts. */
+import { build } from 'esbuild';
+import { readFile, writeFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+const root = fileURLToPath(new URL('../', import.meta.url));
+const result = await build({ absWorkingDir: root, entryPoints: ['src/motion/effects.ts'], bundle: true, format: 'esm', platform: 'node', write: false });
+const { motionEffects, motionEasings, motionFrames, motionClass, motionEasingClass, motionOrigins } = await import('data:text/javascript;base64,' + Buffer.from(result.outputFiles[0].text).toString('base64'));
+const lines = ['/* Generated by scripts/build-motion-css.mjs. Edit src/motion/effects.ts, then regenerate. */'];
+for (const effect of motionEffects) {
+  for (const phase of ['enter', 'exit']) {
+    const name = motionClass(effect, phase);
+    const aliases = effect === 'fade' ? [`.blu-motion-fade-${phase === 'enter' ? 'in' : 'out'}`]
+      : phase === 'enter' && effect === 'slide-up' ? ['.blu-motion-slide-up']
+      : phase === 'enter' && effect === 'zoom-in' ? ['.blu-motion-scale-in'] : [];
+    lines.push([`.${name}`, ...aliases].join(', ') + ` { animation: ${name} var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }`);
+    const frames = motionFrames(effect, phase, 'var(--blu-motion-distance)');
+    lines.push(`@keyframes ${name} { ${frames.map((frame, index) => {
+      const percent = (frame.offset ?? index / (frames.length - 1)) * 100;
+      return `${percent}% { ${Object.entries(frame).filter(([key]) => key !== 'offset').map(([key, value]) => `${key.replace(/[A-Z]/g, letter => "-" + letter.toLowerCase())}: ${value};`).join(' ')} }`;
+    }).join(' ')} }`);
+  }
+}
+for (const [name, curve] of Object.entries(motionEasings)) lines.push(`.${motionEasingClass(name)} { --blu-motion-ease: ${curve}; }`);
+for (const [name, origin] of Object.entries(motionOrigins)) lines.push(`.blu-motion-origin-${name} { transform-origin: ${origin}; }`);
+// Exit utilities do not manage hidden/inert. Owners must do that after animationend or use createMotionPresence.
+const css = lines.join('\n') + '\n';
+const target = new URL('../styles/motion-presets.css', import.meta.url);
+if (process.argv.includes('--check')) {
+  if (await readFile(target, 'utf8') !== css) throw Error('Motion CSS is stale. Run node scripts/build-motion-css.mjs.');
+} else await writeFile(target, css);
+
+const tokenBuild = await build({absWorkingDir:root,entryPoints:['src/motion/tokens.ts'],bundle:true,format:'esm',platform:'node',write:false});
+const {motionTiming} = await import('data:text/javascript;base64,'+Buffer.from(tokenBuild.outputFiles[0].text).toString('base64'));
+const tokenCSS = '/* Generated from src/motion/tokens.ts. */\n:root {\n'+['fast','normal','slow'].map(key=>`  --blu-motion-${key}: ${motionTiming[key]}ms;`).join('\n')+'\n}\n';
+const tokenTarget = new URL('../styles/motion-tokens.css',import.meta.url);
+if(process.argv.includes('--check')) {if(await readFile(tokenTarget,'utf8')!==tokenCSS)throw Error('Motion tokens CSS is stale.');} else await writeFile(tokenTarget,tokenCSS);

package/scripts/build-motion-styles.mjs

@@ -0,0 +1,29 @@
+import { build } from 'esbuild';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/** The same stylesheet is used by the package build and local documentation. */
+export async function buildMotionStyles(outdir) {
+  const root = fileURLToPath(new URL('../', import.meta.url));
+  const result = await build({ absWorkingDir: root, entryPoints: ['styles/motion.css'],
+    bundle: true, write: false, target: ['safari16.4', 'chrome110'], legalComments: 'inline' });
+  const css = result.outputFiles[0].text;
+  await mkdir(outdir, { recursive: true });
+  await writeFile(resolve(outdir, 'motion.css'), css);
+  return css;
+}
+
+/** Call after generating the base full stylesheet; used by the normal release build. */
+export async function includeMotionStyles(outdir) {
+  const base = await readFile(resolve(outdir, 'styles.css'), 'utf8');
+  const motion = await buildMotionStyles(outdir);
+  let combined = motion;
+  for (const name of ['component-motion', 'data-motion']) {
+    const css = await readFile(new URL('../styles/' + name + '.css', import.meta.url), 'utf8');
+    await writeFile(resolve(outdir, name + '.css'), css);
+    combined += '\n' + css;
+  }
+  await writeFile(resolve(outdir, 'styles.css'), base + '\n' + combined);
+  return motion;
+}

package/scripts/build.mjs

@@ -1,3 +1,6 @@
+import './build-motion-css.mjs';
+import { motionEntries } from './motion-entries.mjs';
+import { includeMotionStyles } from './build-motion-styles.mjs';
 import {build} from 'esbuild';
 import {readFile,writeFile,mkdir,rm,cp} from 'node:fs/promises';
 import {execFileSync} from 'node:child_process';
@@ -9,7 +12,7 @@ const essentials=['button','badge','chip','chip-group','card','skeleton','empty-
 const handwritten=new Set(draft.components.map(c=>c.slug));
 const additions=edition.components.map(slug).filter(n=>!essentials.includes(n)&&n!=='grid-basic'&&!handwritten.has(n));
 const groups=Object.fromEntries(Object.entries(edition.nativeModules).map(([k,v])=>[k.split('_').at(-1).toLowerCase(),v.map(slug)]));
-const entries=[...new Set(['index','grid-basic','essentials','theme','form-layout',...draft.components.map(c=>c.slug),...essentials,...additions,...Object.keys(groups)])];
+const entries=[...new Set(['index','grid-basic','essentials','theme','form-layout',...motionEntries,...draft.components.map(c=>c.slug),...essentials,...additions,...Object.keys(groups)])];
 await rm('dist',{recursive:true,force:true});await mkdir('dist');
 const web=await build({entryPoints:entries.map(n=>'src/'+n+'.ts'),bundle:true,splitting:true,format:'esm',target:'es2020',minify:true,outdir:'dist',metafile:true,preserveSymlinks:true});
 const nativeEntries={'bluui-community':'src/native.ts','bluui-community-grid':'src/native-grid.ts','native/form-layout':'src/native-components/form-layout.ts'};
@@ -32,6 +35,7 @@ await cp('styles/form-layout.css','dist/form-layout.css');
 for(const c of draft.components)await cp(`styles/${c.slug}.css`,`dist/${c.slug}.css`);
 for(const group of new Set(draft.components.map(c=>c.group)))await writeFile('dist/'+group+'.css',await readFile('dist/'+group+'.css','utf8')+'\n'+draftStyles);
 await writeFile('dist/styles.css',await readFile('dist/styles.css','utf8')+'\n'+draftStyles);
+await includeMotionStyles('dist');
 await cp('draft-components.json','dist/draft-components.json');
 const inputs=[...new Set([...Object.keys(web.metafile.inputs),...Object.keys(native.metafile.inputs)])];
 for(const file of inputs)if(!file.startsWith('src/')&&!file.startsWith('node_modules/ag-grid-community/')&&!file.startsWith('node_modules/ag-stack/'))throw Error('Unexpected source in Community bundle: '+file);

package/scripts/motion-entries.mjs

@@ -0,0 +1,2 @@
+/** Shared by the normal build and isolated local package verification. */
+export const motionEntries = ['motion', 'motion-settings', 'motion-enhancers', 'component-motion', 'data-motion'];

package/src/component-motion.ts

@@ -0,0 +1,101 @@
+/** Local, opt-in web integration. Import after the component styles plus component-motion.css.
+ * Create the controller on a scope containing every component host (normally document.body).
+ * Dispose this collection before disposing its controller. No native entry points import this file.
+ */
+import type { MotionController } from './motion/controller.js';
+import { createComponentMotionScope, validateComponentMotion } from './motion/component-settings.js';
+import type { ComponentMotionSettings, ComponentMotionHandle } from './motion/component-settings.js';
+export type { ComponentMotionSettings, ComponentMotionHandle } from './motion/component-settings.js';
+import { createMotionButton } from './motion/button.js';
+import { createPressFeedback } from './motion/feedback.js';
+import { createModal } from './component-factories/modal.js';
+import { createDrawer } from './component-factories/drawer.js';
+import { createCommandPalette } from './component-factories/command-palette.js';
+import { createTextInput } from './text-input.js';
+import { createTextArea } from './text-area.js';
+import { createCheckbox } from './checkbox.js';
+import { createSwitch } from './switch.js';
+import { createRadioButton } from './radio-button.js';
+import { createRadioGroup } from './radio-group.js';
+import { createSelect } from './select.js';
+import { createFormField } from './form-field.js';
+import { observeSurface } from './web-motion/surfaces.js';
+import { enhanceField } from './web-motion/fields.js';
+import { createDatePicker } from './component-factories/date-picker.js';
+import { createTimePicker } from './component-factories/time-picker.js';
+import { createDateTimePicker } from './component-factories/date-time-picker.js';
+import { createDateRangePicker } from './component-factories/date-range-picker.js';
+import { createTreeView } from './component-factories/tree-view.js';
+import { createNotification } from './component-factories/notification.js';
+import { enhanceTree } from './web-motion/tree.js';
+import { enhanceNotifications } from './web-motion/notifications.js';
+import { createSidebar } from './component-factories/sidebar.js';
+import { createPagination } from './component-factories/pagination.js';
+import { enhanceNavigation } from './web-motion/navigation.js';
+
+type Instance = { element: HTMLElement; destroy(): void };
+type Enhancement = { destroy(): void };
+export function createMotionComponents(motion: MotionController, initial: ComponentMotionSettings = {}) {
+  let defaults = validateComponentMotion(initial), disposed = false;
+  const instances = new Set<Instance>();
+  const configurations = new Map<Instance, () => void>();
+  function decorate<A extends unknown[], C extends Instance>(factory: (...args: A) => C, enhance: (component: C, local: MotionController) => Enhancement) {
+    return (...args: A): C & ComponentMotionHandle => {
+      if (disposed) throw Error('Motion components are destroyed.');
+      const component = factory(...args);
+      const scoped = createComponentMotionScope(component.element, motion, defaults);
+      let extra: Enhancement;
+      try { extra = enhance(component, scoped.motion); } catch (error) { scoped.destroy(); component.destroy(); throw error; }
+      const destroy = component.destroy.bind(component); let dead = false, overrides: ComponentMotionSettings = {};
+      const apply = () => scoped.update({ ...defaults, ...overrides });
+      const result = Object.assign(component, { setMotion(settings: ComponentMotionSettings = {}) {
+        if (dead) throw Error('Component is destroyed.');
+        overrides = validateComponentMotion(settings);
+        if (overrides.mode === 'inherit') delete overrides.mode;
+        apply();
+      } });
+      component.destroy = () => { if (dead) return; dead = true; extra.destroy(); scoped.destroy(); destroy(); instances.delete(component); configurations.delete(component); };
+      configurations.set(component, apply); instances.add(component); return result;
+    };
+  }
+  const field = (component: Instance, local: MotionController) => enhanceField(component.element, local);
+  const surface = (kind: 'modal' | 'drawer' | 'palette') => (component: Instance, local: MotionController) => observeSurface(component.element, local, kind);
+  const picker = (component: Instance, local: MotionController) => observeSurface(component.element, local, 'picker');
+  return {
+    createSidebar: decorate(createSidebar, (component, local) => enhanceNavigation(component.element, local, 'sidebar')),
+    createPagination: decorate(createPagination, (component, local) => enhanceNavigation(component.element, local, 'pagination')),
+    createDatePicker: decorate(createDatePicker, picker),
+    createTimePicker: decorate(createTimePicker, picker),
+    createDateTimePicker: decorate(createDateTimePicker, picker),
+    createDateRangePicker: decorate(createDateRangePicker, picker),
+    createTreeView: decorate(createTreeView, (component, local) => enhanceTree(component.element, local)),
+    createNotification: decorate(createNotification, (component, local) => enhanceNotifications(component.element, local)),
+    createButton: decorate(createMotionButton, (component, local) => {
+      const button = component.element.querySelector('button')!;
+      const press = createPressFeedback(button, local), update = component.update.bind(component);
+      component.update = patch => { update(patch); button.classList.add('blu-motion-press'); };
+      return press;
+    }),
+    createModal: decorate(createModal, surface('modal')),
+    createDrawer: decorate(createDrawer, surface('drawer')),
+    createCommandPalette: decorate(createCommandPalette, surface('palette')),
+    createTextInput: decorate(createTextInput, field),
+    createTextArea: decorate(createTextArea, field),
+    createCheckbox: decorate(createCheckbox, field),
+    createSwitch: decorate(createSwitch, field),
+    createRadioButton: decorate(createRadioButton, field),
+    createRadioGroup: decorate(createRadioGroup, field),
+    createFormField: decorate(createFormField, field),
+    createSelect: decorate(createSelect, (component, local) => {
+      const feedback = field(component, local), menu = observeSurface(component.element, local, 'select');
+      return { destroy() { menu.destroy(); feedback.destroy(); } };
+    }),
+    /** Replace collection defaults. Existing per-component overrides stay in place. */
+    configure(settings: ComponentMotionSettings = {}) {
+      if (disposed) throw Error('Motion components are destroyed.');
+      defaults = validateComponentMotion(settings);
+      for (const apply of configurations.values()) apply();
+    },
+    destroy() { if (disposed) return; disposed = true; for (const component of Array.from(instances).reverse()) component.destroy(); },
+  };
+}

package/src/data-motion.ts

@@ -0,0 +1,60 @@
+/** Local opt-in data entry. Existing Table/Grid defaults and native entries are unchanged. */
+import { createTable as baseTable, tableRows } from './form-layout/table.js';
+import type { TableOptions, TableEvents } from './form-layout/types.js';
+import { createGridBasic as baseGrid } from './grid-basic.js';
+import type { GridBasicOptions, GridBasicEvents } from './grid-basic.js';
+import type { MotionController } from './motion/controller.js';
+import { enhanceDataRows } from './web-motion/data-rows.js';
+
+import { createComponentMotionScope, type ComponentMotionSettings } from './motion/component-settings.js';
+import { createMotionSettingsGroup } from './motion/settings-group.js';
+
+export function createMotionData(motion: MotionController, defaults: ComponentMotionSettings = {}) {
+  const settings = createMotionSettingsGroup(defaults);
+  const instances = new Set<{ destroy(): void }>(); let dead = false;
+  function own<C extends { destroy(): void }>(component: C, extra: { destroy(): void }, scope: ReturnType<typeof createComponentMotionScope>) {
+    const binding = settings.bind(scope.update);
+    const destroy = component.destroy.bind(component); let disposed = false;
+    component.destroy = () => { if (disposed) return; disposed = true; binding.destroy(); extra.destroy(); scope.destroy(); destroy(); instances.delete(component); };
+    instances.add(component); return Object.assign(component, {setMotion: binding.setMotion});
+  }
+  return {
+    configure(next: ComponentMotionSettings = {}) { if (dead) throw Error('Motion data components are destroyed.'); settings.configure(next); },
+    createTable<Row extends object>(host: HTMLElement, initial: TableOptions<Row>, events: TableEvents<Row> = {}) {
+      if (dead) throw Error('Motion data components are destroyed.');
+      let options = initial;
+      function validate(p: TableOptions<Row>) {
+        if (!p.RowKey) throw Error('Animated tables require a stable RowKey.');
+        const ids = p.Rows.map(row => row[p.RowKey!]);
+        if (ids.some(id => !['string', 'number'].includes(typeof id) || String(id) === '') || new Set(ids.map(String)).size !== ids.length) throw Error('Animated tables require unique, nonempty row keys.');
+      }
+      validate(options);
+      const component = baseTable(host, initial, events), update = component.update;
+      const scope = createComponentMotionScope(component.element, motion, settings.settings);
+      const extra = enhanceDataRows(component.element, scope.motion, () => {
+        const rows = options.Loading ? [] : tableRows({ ...options, ...component.getState() }).rows;
+        const elements = [...component.element.querySelectorAll<HTMLTableRowElement>('tbody > tr')];
+        return rows.map((row, index) => ({ key: String(row[options.RowKey!]), element: elements[index], cells: [...elements[index].cells], cellKeys: [...options.Columns.map(c => c.Key), '__actions'] }));
+      });
+      component.update = patch => {
+        const next = { ...options, ...patch }; validate(next); extra.capture();
+        const focused = document.activeElement instanceof HTMLElement && component.element.contains(document.activeElement) ? document.activeElement : null;
+        update(patch); options = next;
+        if (focused && !focused.isConnected && document.activeElement === document.body) component.element.querySelector<HTMLElement>('.blu-table__scroll')!.focus({ preventScroll: true });
+      };
+      return own(component, extra, scope);
+    },
+    createGridBasic(host: HTMLElement, initial: GridBasicOptions, events: GridBasicEvents = {}) {
+      if (dead) throw Error('Motion data components are destroyed.');
+      const component = baseGrid(host, initial, events), update = component.update;
+      const scope = createComponentMotionScope(component.element, motion, settings.settings);
+      const extra = enhanceDataRows(component.element, scope.motion, () => [...component.element.querySelectorAll<HTMLElement>('.ag-center-cols-container > .ag-row[row-id], .ag-grid-scrolling-container > .ag-row[row-id]')].map(element => {
+        const cells = [...element.querySelectorAll<HTMLElement>('.ag-cell')];
+        return { key: element.getAttribute('row-id')!, element, cells, cellKeys: cells.map(cell => cell.getAttribute('col-id')!) };
+      }));
+      component.update = patch => { extra.capture(); update(patch); };
+      return own(component, extra, scope);
+    },
+    destroy() { if (dead) return; dead = true; for (const component of [...instances]) component.destroy(); },
+  };
+}

package/src/form-layout/choice.ts

@@ -33,7 +33,19 @@ export function createRadioGroup(host: HTMLElement, initial: RadioGroupOptions,
   let p = { ...initial }, controls: HTMLInputElement[] = [];
   const f = frame(host, p, true), name = p.Name || uid(); const life = lifecycle(f.root, reset);
   function update(patch: Partial<RadioGroupOptions>) {
-    life.check(); const replace = !controls.length || 'Options' in patch; p = { ...p, ...patch };
+    life.check();
+    // Native bindings resend Options on every value change. Preserve the same
+    // inputs when the options are unchanged so keyboard and screen-reader focus
+    // stay on the selected choice.
+    const replace = !controls.length || (!!patch.Options && (
+      patch.Options.length !== p.Options.length || patch.Options.some((option, i) => {
+        const previous = p.Options[i];
+        return option.Value !== previous.Value || option.Label !== previous.Label ||
+          option.Description !== previous.Description || option.Disabled !== previous.Disabled;
+      })
+    ));
+    const focusedValue = controls.find(input => input === document.activeElement)?.value;
+    p = { ...p, ...patch };
     if (new Set(p.Options.map(o => o.Value)).size !== p.Options.length) throw Error('Radio option values must be unique.');
     f.body.className = 'blu-radio-group blu-radio-group--' + (p.Direction || 'Vertical').toLowerCase();
     if (replace) {
@@ -58,6 +70,10 @@ export function createRadioGroup(host: HTMLElement, initial: RadioGroupOptions,
       attr(input, 'aria-readonly', p.ReadOnly ? 'true' : undefined);
       if (p.Options[i].Description) attr(input, 'aria-describedby', [input.getAttribute('aria-describedby'), input.id + '-description'].filter(Boolean).join(' '));
     });
+    if (replace && focusedValue !== undefined) {
+      (controls.find(input => input.value === focusedValue && !input.disabled) ||
+        controls.find(input => input.checked && !input.disabled) || controls.find(input => !input.disabled))?.focus();
+    }
   }
   function reset() { update({ Value: initial.Value || '' }); } update({});
   return { element: f.root, update, reset, getValue: () => controls.find(c => c.checked)?.value || '',

package/src/motion/action-feedback.ts

@@ -0,0 +1,38 @@
+import type { MotionController } from './controller.js';
+
+export interface ActionMessages { pending: string; success: string; error: string }
+export type ActionResult = 'success' | 'error' | 'busy' | 'cancelled';
+
+/** Feedback follows an actual action promise. No simulated success, timed reset,
+ * duplicated live region or overlapping action. The caller owns data and controls. */
+export function createActionFeedback(status: HTMLElement, motion: MotionController) {
+  const original = { role: status.getAttribute('role'), atomic: status.getAttribute('aria-atomic'), state: status.getAttribute('data-action-state') };
+  status.setAttribute('role', 'status'); status.setAttribute('aria-atomic', 'true');
+  let dead = false, pending = false;
+  const show = (text: string, state: string) => {
+    status.textContent = text; status.dataset.actionState = state;
+    void motion.play(status, 'fade', { duration: 350, easing: 'ease-out' });
+  };
+  return {
+    get pending() { return pending; },
+    async run(action: () => unknown | Promise<unknown>, messages: ActionMessages): Promise<ActionResult> {
+      if (dead) return 'cancelled';
+      if (pending) return 'busy';
+      pending = true; show(messages.pending, 'pending');
+      try {
+        await action();
+        if (dead) return 'cancelled';
+        show(messages.success, 'success'); return 'success';
+      } catch {
+        if (dead) return 'cancelled';
+        show(messages.error, 'error'); return 'error';
+      } finally { pending = false; }
+    },
+    destroy() {
+      if (dead) return; dead = true; motion.cancel(status);
+      for (const [key, value] of [['role', original.role], ['aria-atomic', original.atomic], ['data-action-state', original.state]]) {
+        if (value === null) status.removeAttribute(key!); else status.setAttribute(key!, value!);
+      }
+    },
+  };
+}

package/src/motion/border-glow.ts

@@ -0,0 +1,41 @@
+import { preserveStyles } from './structure.js';
+
+export interface BorderGlowOptions {
+  /** One slow circuit in milliseconds, 4–60 seconds. Default: 12 seconds. */
+  duration?: number;
+  paused?: boolean;
+}
+const owners = new WeakSet<HTMLElement>();
+function duration(value: number = 12000) {
+  if (!Number.isFinite(value) || value < 4000 || value > 60000) throw Error('Border glow duration must be from 4000 to 60000 ms.');
+  return value;
+}
+/** Decorative, noninteractive border only. CSS honors the motion scope and OS.
+ * Pause automatically while outside the viewport or in a hidden document. */
+export function createBorderGlow(element: HTMLElement, options: BorderGlowOptions = {}) {
+  let time = duration(options.duration), paused = options.paused ?? false, visible = true, dead = false;
+  if (owners.has(element)) throw Error('This element already has a border glow.');
+  const doc = element.ownerDocument, win = doc.defaultView;
+  if (!win || !element.isConnected) throw Error('Mount a border glow on a connected browser element.');
+  const restore = preserveStyles(element, ['position']);
+  if (win.getComputedStyle(element).position === 'static') element.style.position = 'relative';
+  const overlay = doc.createElement('span'), rim = doc.createElement('span'), beam = doc.createElement('span');
+  overlay.className = 'blu-motion-border-glow'; rim.className = 'blu-motion-border-glow__rim';
+  beam.className = 'blu-motion-border-glow__beam'; rim.append(beam);
+  overlay.setAttribute('aria-hidden', 'true'); overlay.inert = true; overlay.append(rim); element.append(overlay); owners.add(element);
+  const sync = () => { overlay.style.setProperty('--blu-glow-duration', time + 'ms'); overlay.dataset.paused = String(paused || !visible || doc.hidden); };
+  const measure = () => overlay.style.setProperty('--blu-glow-size', Math.ceil(Math.hypot(element.offsetWidth + 4, element.offsetHeight + 4)) + 'px');
+  const resize = new ResizeObserver(measure); resize.observe(element); measure();
+  const intersection = typeof IntersectionObserver === 'function' ? new IntersectionObserver(entries => { visible = entries[0].isIntersecting; sync(); }) : null;
+  intersection?.observe(element); doc.addEventListener('visibilitychange', sync); sync();
+  return {
+    element: overlay,
+    update(next: BorderGlowOptions) {
+      if (dead) throw Error('Border glow is destroyed.');
+      if (next.duration !== undefined) time = duration(next.duration);
+      if (next.paused !== undefined) paused = next.paused;
+      sync();
+    },
+    destroy() { if (dead) return; dead = true; resize.disconnect(); intersection?.disconnect(); doc.removeEventListener('visibilitychange', sync); overlay.remove(); restore(); owners.delete(element); },
+  };
+}