@blukavantui/community 1.0.1 → 1.1.0

package/draft-components.json

@@ -0,0 +1,77 @@
+{
+  "status": "local draft — not published; native models validated, compiled consumer testing pending",
+  "components": [
+    {
+      "name": "Checkbox",
+      "slug": "checkbox",
+      "factory": "createCheckbox",
+      "group": "inputs"
+    },
+    {
+      "name": "TextInput",
+      "slug": "text-input",
+      "factory": "createTextInput",
+      "group": "inputs"
+    },
+    {
+      "name": "TextArea",
+      "slug": "text-area",
+      "factory": "createTextArea",
+      "group": "inputs"
+    },
+    {
+      "name": "RadioButton",
+      "slug": "radio-button",
+      "factory": "createRadioButton",
+      "group": "inputs"
+    },
+    {
+      "name": "RadioGroup",
+      "slug": "radio-group",
+      "factory": "createRadioGroup",
+      "group": "inputs"
+    },
+    {
+      "name": "Switch",
+      "slug": "switch",
+      "factory": "createSwitch",
+      "group": "inputs"
+    },
+    {
+      "name": "Select",
+      "slug": "select",
+      "factory": "createSelect",
+      "group": "inputs"
+    },
+    {
+      "name": "FormField",
+      "slug": "form-field",
+      "factory": "createFormField",
+      "group": "inputs"
+    },
+    {
+      "name": "Columns2",
+      "slug": "columns2",
+      "factory": "createColumns2",
+      "group": "layout"
+    },
+    {
+      "name": "Columns3",
+      "slug": "columns3",
+      "factory": "createColumns3",
+      "group": "layout"
+    },
+    {
+      "name": "Columns4",
+      "slug": "columns4",
+      "factory": "createColumns4",
+      "group": "layout"
+    },
+    {
+      "name": "Table",
+      "slug": "table",
+      "factory": "createTable",
+      "group": "data"
+    }
+  ]
+}

package/edition.json

@@ -1,6 +1,6 @@
 {
   "edition": "Community",
-  "version": "1.0.1",
+  "version": "1.1.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.",
@@ -60,7 +60,19 @@
     "HeroSection",
     "SplitSection",
     "LogoCloud",
-    "BluGridBasic"
+    "BluGridBasic",
+    "Checkbox",
+    "TextInput",
+    "TextArea",
+    "RadioButton",
+    "RadioGroup",
+    "Switch",
+    "Select",
+    "FormField",
+    "Columns2",
+    "Columns3",
+    "Columns4",
+    "Table"
   ],
   "gridFeatures": [
     "client-side rows",
@@ -118,7 +130,10 @@
       "Splitter",
       "AppLayout",
       "PageLayout",
-      "ShapeMask"
+      "ShapeMask",
+      "Columns2",
+      "Columns3",
+      "Columns4"
     ],
     "BluKavantUi_Community_Inputs": [
       "TreeSelect",
@@ -128,7 +143,15 @@
       "DatePicker",
       "TimePicker",
       "DateTimePicker",
-      "DateRangePicker"
+      "DateRangePicker",
+      "Checkbox",
+      "TextInput",
+      "TextArea",
+      "RadioButton",
+      "RadioGroup",
+      "Switch",
+      "Select",
+      "FormField"
     ],
     "BluKavantUi_Community_Feedback": [
       "CommandPalette",
@@ -151,7 +174,8 @@
       "Descriptions",
       "Sparkline",
       "DashboardCanvas",
-      "DashboardPanel"
+      "DashboardPanel",
+      "Table"
     ],
     "BluKavantUi_Community_Content": [
       "VideoPlayer",
@@ -240,6 +264,19 @@
     "FontProvider": "font-provider",
     "ShapeMask": "shape-mask",
     "ChipGroup": "chip-group",
-    "BluGridBasic": "grid-basic"
-  }
+    "BluGridBasic": "grid-basic",
+    "Checkbox": "checkbox",
+    "TextInput": "text-input",
+    "TextArea": "text-area",
+    "RadioButton": "radio-button",
+    "RadioGroup": "radio-group",
+    "Switch": "switch",
+    "Select": "select",
+    "FormField": "form-field",
+    "Columns2": "columns2",
+    "Columns3": "columns3",
+    "Columns4": "columns4",
+    "Table": "table"
+  },
+  "nativeVerification": "18 new Blocks verified in a compiled OutSystems development consumer on 2026-10-24. Native packages are distributed separately."
 }

package/npm-shrinkwrap.json

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

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@blukavantui/community",
-  "version": "1.0.1",
-  "description": "BluKavantUI Community: 55 components for Web and OutSystems; ten advanced components are Pro.",
+  "version": "1.1.0",
+  "description": "BluKavantUI Community: 67 Web components. OutSystems integration available separately.",
   "homepage": "https://blukavantui.blutekmedia.com/community",
   "bugs": {
     "url": "https://blutekmedia.com/contact"
   },
-  "author": {
-    "name": "BluTek Media",
-    "url": "https://blutekmedia.com"
-  },
+  "author": "Blutek Media",
   "keywords": [
     "blukavantui",
     "typescript",
@@ -352,7 +349,72 @@
       "import": "./dist/content.js"
     },
     "./content.css": "./dist/content.css",
-    "./marketing-template-layout.css": "./dist/marketing-template-layout.css"
+    "./marketing-template-layout.css": "./dist/marketing-template-layout.css",
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js"
+    },
+    "./checkbox.css": "./dist/checkbox.css",
+    "./text-input": {
+      "types": "./dist/text-input.d.ts",
+      "import": "./dist/text-input.js"
+    },
+    "./text-input.css": "./dist/text-input.css",
+    "./text-area": {
+      "types": "./dist/text-area.d.ts",
+      "import": "./dist/text-area.js"
+    },
+    "./text-area.css": "./dist/text-area.css",
+    "./radio-button": {
+      "types": "./dist/radio-button.d.ts",
+      "import": "./dist/radio-button.js"
+    },
+    "./radio-button.css": "./dist/radio-button.css",
+    "./radio-group": {
+      "types": "./dist/radio-group.d.ts",
+      "import": "./dist/radio-group.js"
+    },
+    "./radio-group.css": "./dist/radio-group.css",
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "import": "./dist/switch.js"
+    },
+    "./switch.css": "./dist/switch.css",
+    "./select": {
+      "types": "./dist/select.d.ts",
+      "import": "./dist/select.js"
+    },
+    "./select.css": "./dist/select.css",
+    "./form-field": {
+      "types": "./dist/form-field.d.ts",
+      "import": "./dist/form-field.js"
+    },
+    "./form-field.css": "./dist/form-field.css",
+    "./columns2": {
+      "types": "./dist/columns2.d.ts",
+      "import": "./dist/columns2.js"
+    },
+    "./columns2.css": "./dist/columns2.css",
+    "./columns3": {
+      "types": "./dist/columns3.d.ts",
+      "import": "./dist/columns3.js"
+    },
+    "./columns3.css": "./dist/columns3.css",
+    "./columns4": {
+      "types": "./dist/columns4.d.ts",
+      "import": "./dist/columns4.js"
+    },
+    "./columns4.css": "./dist/columns4.css",
+    "./table": {
+      "types": "./dist/table.d.ts",
+      "import": "./dist/table.js"
+    },
+    "./table.css": "./dist/table.css",
+    "./form-layout": {
+      "types": "./dist/form-layout.d.ts",
+      "import": "./dist/form-layout.js"
+    },
+    "./form-layout.css": "./dist/form-layout.css"
   },
   "files": [
     "dist",
@@ -368,19 +430,23 @@
     "test",
     "npm-shrinkwrap.json",
     "docs/PUBLISHING.md",
-    "assets"
+    "assets",
+    "draft-components.json",
+    "docs/FORM-LAYOUT-ESSENTIALS.md"
   ],
   "sideEffects": [
     "**/*.css",
     "./src/theme-runtime.ts",
-    "./dist/theme.js"
+    "./dist/theme.js",
+    "./dist/chunk-*.js"
   ],
   "scripts": {
     "build": "node scripts/build.mjs",
     "test": "node --test test/*.test.mjs",
     "check": "tsc --noEmit",
     "prepack": "npm run check && npm run build && npm test",
-    "verify:package": "node scripts/verify-package.mjs"
+    "verify:package": "node scripts/verify-package.mjs",
+    "preview:essentials": "node scripts/preview-essentials.mjs"
   },
   "dependencies": {
     "ag-grid-community": "36.2.0"

package/scripts/build.mjs

@@ -3,31 +3,39 @@ import {readFile,writeFile,mkdir,rm,cp} from 'node:fs/promises';
 import {execFileSync} from 'node:child_process';
 import {gzipSync} from 'node:zlib';
 const edition=JSON.parse(await readFile('edition.json','utf8'));
+const draft=JSON.parse(await readFile('draft-components.json','utf8'));
 const slug=n=>edition.componentEntries?.[n]||n.replace(/([a-z])([A-Z])/g,'$1-$2').toLowerCase();
 const essentials=['button','badge','chip','chip-group','card','skeleton','empty-state'];
-const additions=edition.components.map(slug).filter(n=>!essentials.includes(n)&&n!=='grid-basic');
+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',...essentials,...additions,...Object.keys(groups)])];
+const entries=[...new Set(['index','grid-basic','essentials','theme','form-layout',...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});
-const nativeEntries={'bluui-community':'src/native.ts','bluui-community-grid':'src/native-grid.ts'};
+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'};
 for(const name of additions){
  const source=await readFile('src/component-factories/'+name+'.ts','utf8');
  const installs=[...source.matchAll(/import \{(install\w+)\} from ['"]\.\.\/runtime\/([^'"]+)\.js['"]/g)];
  if(installs.length){const code=installs.map(m=>`import {${m[1]}} from '../runtime/${m[2]}.js';\n${m[1]}();`).join('\n');await mkdir('src/native-components',{recursive:true});await writeFile('src/native-components/'+name+'.ts',code+'\n');nativeEntries['native/'+name]='src/native-components/'+name+'.ts';}
 }
-const native=await build({entryPoints:nativeEntries,bundle:true,format:'iife',target:'es2018',minify:true,outdir:'dist',metafile:true});
+const native=await build({entryPoints:nativeEntries,bundle:true,format:'iife',target:'es2018',minify:true,outdir:'dist',metafile:true,preserveSymlinks:true});
 execFileSync('node',['node_modules/typescript/bin/tsc'],{stdio:'inherit'});
 const sheets={};for(const name of edition.components.map(slug)){sheets[name]=await readFile(`styles/${name}.css`,'utf8');await cp(`styles/${name}.css`,`dist/${name}.css`);}
 await cp('styles/theme.css','dist/theme.css');
 await cp('styles/marketing-template-layout.css','dist/marketing-template-layout.css');
 await cp('assets/fonts','dist/fonts',{recursive:true});
 await writeFile('dist/essentials.css',essentials.map(n=>sheets[n]).join('\n'));
-for(const[name,members]of Object.entries(groups))await writeFile('dist/'+name+'.css',members.map(n=>sheets[n]).join('\n'));
-await writeFile('dist/styles.css',await readFile('styles/theme.css','utf8')+'\n'+Object.values(sheets).join('\n'));
+for(const[name,members]of Object.entries(groups))await writeFile('dist/'+name+'.css',members.filter(n=>!handwritten.has(n)).map(n=>sheets[n]).join('\n'));
+await writeFile('dist/styles.css',await readFile('styles/theme.css','utf8')+'\n'+Object.entries(sheets).filter(([n])=>!handwritten.has(n)).map(([,s])=>s).join('\n'));
+const draftStyles=await readFile('styles/form-layout.css','utf8');
+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 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);
-await writeFile('dist/build-audit.json',JSON.stringify({inputs,outputs:Object.keys({...web.metafile.outputs,...native.metafile.outputs}),sourcePolicy:edition.sourcePolicy},null,2));
+await writeFile('dist/build-audit.json',JSON.stringify({inputs,outputs:Object.keys({...web.metafile.outputs,...native.metafile.outputs}),sourcePolicy:edition.sourcePolicy,draft},null,2));
 const sizes={version:edition.version,typescript:{},native:{}};
 for(const file of ['bluui-community.js','bluui-community-grid.js','styles.css','grid-basic.css','essentials.css','theme.css',...Object.keys(nativeEntries).filter(n=>n.startsWith('native/')).map(n=>n+'.js')]){const b=await readFile('dist/'+file);const measure={bytes:b.length,gzipBytes:gzipSync(b).length};if(file.startsWith('native/'))sizes.native[file]=measure;else sizes[file]=measure;}
 for(const entry of entries){const seen=new Set();const visit=file=>{if(seen.has(file))return;seen.add(file);for(const im of web.metafile.outputs[file]?.imports||[])if(!im.external)visit(im.path);};visit('dist/'+entry+'.js');let bytes=0,gzipBytes=0;for(const f of seen){const b=await readFile(f);bytes+=b.length;gzipBytes+=gzipSync(b).length;}sizes.typescript[entry]={files:[...seen].map(f=>f.slice(5)),bytes,gzipBytes};}

package/src/checkbox.ts

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

package/src/columns2.ts

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

package/src/columns3.ts

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

package/src/columns4.ts

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

package/src/data.ts

@@ -7,3 +7,4 @@ export * from './descriptions.js';
 export * from './sparkline.js';
 export * from './dashboard-canvas.js';
 export * from './dashboard-panel.js';
+export * from './table.js';

package/src/form-field.ts

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

package/src/form-layout/choice.ts

@@ -0,0 +1,66 @@
+import { el, frame, lifecycle, common, attr, uid } from './shared.js';
+import type { CheckboxOptions, SwitchOptions, RadioButtonOptions, RadioGroupOptions, FieldComponent, FieldEvents } from './types.js';
+
+type ToggleOptions = CheckboxOptions & SwitchOptions;
+function toggle(host: HTMLElement, initial: ToggleOptions, events: FieldEvents<boolean>, kind: 'checkbox' | 'switch' | 'radio'): FieldComponent<ToggleOptions, boolean> {
+  let p = { ...initial }, initialized = false; const f = frame(host, p), label = el('label', 'blu-choice');
+  const input = el('input', 'blu-choice__input'), mark = el('span', 'blu-choice__mark'), text = el('span'), state = el('span', 'blu-choice__state');
+  input.type = kind === 'radio' ? 'radio' : 'checkbox'; if (kind === 'switch') input.setAttribute('role', 'switch');
+  label.classList.add('blu-choice--' + kind); mark.setAttribute('aria-hidden', 'true'); state.setAttribute('aria-hidden', 'true');
+  label.append(input, mark, text, state); f.body.append(label); const life = lifecycle(f.root, reset);
+  function update(patch: Partial<ToggleOptions>) {
+    life.check(); if (initialized && kind === 'radio' && !('Checked' in patch)) p.Checked = input.checked;
+    p = { ...p, ...patch }; f.paint(p, [input]); f.label.hidden = true;
+    // The wrapping label names this control. Safari also includes a hidden
+    // explicit label in its accessible name if that label keeps its `for`.
+    f.label.removeAttribute('for');
+    common(input, p); input.checked = !!p.Checked; input.indeterminate = kind === 'checkbox' && !!p.Indeterminate;
+    input.value = p.Value || 'on'; attr(input, 'aria-readonly', p.ReadOnly ? 'true' : undefined);
+    text.textContent = (p.Label || '') + (p.Required ? ' *' : ''); state.textContent = input.checked ? (p.OnText || '') : (p.OffText || ''); initialized = true;
+  }
+  function reset() { update({ Checked: !!initial.Checked, Indeterminate: !!initial.Indeterminate }); }
+  input.addEventListener('click', event => { if (p.ReadOnly) event.preventDefault(); }, { signal: life.signal });
+  input.addEventListener('keydown', event => { if (p.ReadOnly && ['ArrowLeft','ArrowRight','ArrowUp','ArrowDown',' '].includes(event.key)) event.preventDefault(); }, { signal: life.signal });
+  input.addEventListener('change', () => { p.Checked = input.checked; p.Indeterminate = false; state.textContent = input.checked ? (p.OnText || '') : (p.OffText || ''); events.Change?.(input.checked); }, { signal: life.signal });
+  input.addEventListener('blur', () => events.Blur?.(), { signal: life.signal }); update({});
+  return { element: f.root, control: input, update, reset, getValue: () => input.checked, focus: () => input.focus(), validate: () => input.reportValidity(), destroy: life.destroy };
+}
+export function createCheckbox(host: HTMLElement, options: CheckboxOptions = {}, events: FieldEvents<boolean> = {}) { return toggle(host, options, events, 'checkbox'); }
+export function createSwitch(host: HTMLElement, options: SwitchOptions = {}, events: FieldEvents<boolean> = {}) { return toggle(host, options, events, 'switch'); }
+export function createRadioButton(host: HTMLElement, options: RadioButtonOptions, events: FieldEvents<boolean> = {}) { return toggle(host, options, events, 'radio'); }
+
+export function createRadioGroup(host: HTMLElement, initial: RadioGroupOptions, events: FieldEvents<string> = {}) {
+  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 };
+    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) {
+      f.body.replaceChildren(); controls = p.Options.map((option, i) => {
+        const label = el('label', 'blu-choice blu-choice--radio'), input = el('input', 'blu-choice__input'), mark = el('span', 'blu-choice__mark'), copy = el('span');
+        input.type = 'radio'; input.id = f.id + '-' + i; input.value = option.Value; mark.setAttribute('aria-hidden', 'true');
+        const title = el('span', '', option.Label); title.id = input.id + '-label'; copy.append(title);
+        // Keep the option's name separate from its description so screen
+        // readers do not announce the description twice via the wrapping label.
+        input.setAttribute('aria-labelledby', title.id);
+        if (option.Description) { const desc = el('small', 'blu-choice__description', option.Description); desc.id = input.id + '-description'; copy.append(desc); }
+        label.append(input, mark, copy); f.body.append(label);
+        input.onchange = () => { if (input.checked) { p.Value = input.value; events.Change?.(input.value); } };
+        input.onclick = event => { if (p.ReadOnly) event.preventDefault(); };
+        input.onkeydown = event => { if (p.ReadOnly && ['ArrowLeft','ArrowRight','ArrowUp','ArrowDown',' '].includes(event.key)) event.preventDefault(); };
+        input.onblur = () => events.Blur?.(); return input;
+      });
+    }
+    f.paint(p, controls);
+    controls.forEach((input, i) => {
+      common(input, p); input.name = p.Name || name; input.disabled = !!p.Disabled || !!p.Options[i].Disabled; input.checked = input.value === p.Value;
+      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(' '));
+    });
+  }
+  function reset() { update({ Value: initial.Value || '' }); } update({});
+  return { element: f.root, update, reset, getValue: () => controls.find(c => c.checked)?.value || '',
+    focus: () => (controls.find(c => c.checked && !c.disabled) || controls.find(c => !c.disabled))?.focus(),
+    validate: () => controls.filter(c => !c.disabled).every(c => c.reportValidity()), destroy: life.destroy };
+}

package/src/form-layout/layout.ts

@@ -0,0 +1,40 @@
+import { el, frame, bound } from './shared.js';
+import type { FormFieldOptions, ColumnsOptions, ColumnsComponent } from './types.js';
+
+/** Wrap a consumer-owned control. Destroy restores its original ARIA attributes. */
+export function createFormField(host: HTMLElement, initial: FormFieldOptions = {}) {
+  let p = { ...initial }, disposed = false, current: HTMLElement | undefined;
+  let original: Record<string, string | null> = {};
+  const f = frame(host, p), content = f.body;
+  const attributes = ['id', 'aria-describedby', 'aria-invalid', 'aria-required'];
+  function restore() { if (current) for (const name of attributes) { const value = original[name]; if (value === null) current.removeAttribute(name); else current.setAttribute(name, value); } }
+  function update(patch: Partial<FormFieldOptions>) {
+    if (disposed) throw Error('Component is destroyed.'); p = { ...p, ...patch };
+    if (p.Control !== current) {
+      restore(); content.replaceChildren(); current = p.Control;
+      if (current) { original = Object.fromEntries(attributes.map(name => [name, current!.getAttribute(name)])); content.append(current); }
+    }
+    f.paint(p, current ? [current] : []);
+    if (current && original['aria-describedby']) current.setAttribute('aria-describedby', [original['aria-describedby'], current.getAttribute('aria-describedby')].filter(Boolean).join(' '));
+  }
+  update({}); return { element: f.root, content, update, destroy() { if (disposed) return; disposed = true; restore(); f.root.remove(); } };
+}
+
+export function createColumns(host: HTMLElement, count: 2 | 3 | 4, initial: ColumnsOptions = {}): ColumnsComponent {
+  let p = { ...initial }, disposed = false; const root = el('div', 'blu-columns');
+  const columns = Array.from({ length: count }, (_, i) => { const column = el('div', 'blu-columns__column'); column.dataset.column = String(i + 1); root.append(column); return column; }); host.append(root);
+  function update(patch: Partial<ColumnsOptions>) {
+    if (disposed) throw Error('Component is destroyed.'); p = { ...p, ...patch };
+    const pairs: Record<string, string> = { Equal: 'minmax(0,1fr) minmax(0,1fr)', OneThirdTwoThirds: 'minmax(0,1fr) minmax(0,2fr)', TwoThirdsOneThird: 'minmax(0,2fr) minmax(0,1fr)', OneQuarterThreeQuarters: 'minmax(0,1fr) minmax(0,3fr)', ThreeQuartersOneQuarter: 'minmax(0,3fr) minmax(0,1fr)' };
+    if (count === 2 && p.Ratio && !pairs[p.Ratio]) throw Error('Unsupported two-column ratio.');
+    if (count === 3 && p.Ratio && !['Equal', 'WideCenter'].includes(p.Ratio)) throw Error('Unsupported three-column ratio.');
+    if (count === 4 && p.Ratio && p.Ratio !== 'Equal') throw Error('Four columns use equal widths.');
+    root.className = 'blu-columns blu-columns--stack-' + (p.StackAt || 'Medium').toLowerCase() + (p.EqualHeight ? ' blu-columns--equal-height' : '') + (p.ExtendedClass ? ' ' + p.ExtendedClass : '');
+    root.style.setProperty('--blu-columns-tracks', count === 2 ? pairs[p.Ratio || 'Equal'] : count === 3 && p.Ratio === 'WideCenter' ? 'minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)' : `repeat(${count}, minmax(0, 1fr))`);
+    root.style.setProperty('--blu-columns-gap', bound(p.Gap, 24, 0, 96) + 'px'); root.style.alignItems = p.EqualHeight ? 'stretch' : (p.Align || 'Stretch').toLowerCase();
+  }
+  update({}); return { element: root, columns, update, destroy() { if (disposed) return; disposed = true; root.remove(); } };
+}
+export const createColumns2 = (host: HTMLElement, options: ColumnsOptions = {}) => createColumns(host, 2, options);
+export const createColumns3 = (host: HTMLElement, options: ColumnsOptions = {}) => createColumns(host, 3, options);
+export const createColumns4 = (host: HTMLElement, options: ColumnsOptions = {}) => createColumns(host, 4, options);

package/src/form-layout/select.ts

@@ -0,0 +1,97 @@
+import { el, attr, frame, lifecycle, common } from './shared.js';
+import type { SelectOptions, FieldEvents, FieldComponent } from './types.js';
+
+/** A styled listbox backed by a form-associated select; the native menu is never shown. */
+export function createSelect(host: HTMLElement, initial: SelectOptions, events: FieldEvents<string> = {}): FieldComponent<SelectOptions, string> {
+  let p = { ...initial }, open = false, active = -1, prefix = '', prefixAt = 0;
+  const f = frame(host, p), shell = el('div', 'blu-select'), control = el('select', 'blu-select__native');
+  const trigger = el('button', 'blu-select__trigger'), clear = el('button', 'blu-text__action', '×'), popup = el('div', 'blu-select__popup');
+  const search = el('input', 'blu-select__search'), list = el('div', 'blu-select__list'), empty = el('p', 'blu-field__help', 'No matching options');
+  control.tabIndex = -1; control.setAttribute('aria-hidden', 'true'); control.dataset.enhanced = 'true';
+  trigger.type = clear.type = 'button'; trigger.id = f.id; trigger.setAttribute('role', 'combobox'); trigger.setAttribute('aria-haspopup', 'listbox');
+  list.id = f.id + '-list'; list.setAttribute('role', 'listbox'); trigger.setAttribute('aria-controls', list.id);
+  search.type = 'search'; search.placeholder = 'Search options'; search.setAttribute('role', 'combobox'); search.setAttribute('aria-autocomplete', 'list'); search.setAttribute('aria-controls', list.id);
+  popup.hidden = true; popup.append(search, list, empty); shell.append(control, trigger, clear, popup); f.body.append(shell);
+  const hasPopover = typeof popup.showPopover === 'function'; if (hasPopover) popup.setAttribute('popover', 'manual');
+  const life = lifecycle(f.root, reset); let visible: number[] = [];
+  function position() {
+    if (!open || !hasPopover) return; const r = trigger.getBoundingClientRect();
+    const below = window.innerHeight - r.bottom - 12, above = r.top - 12;
+    const up = below < 220 && above > below, height = Math.min(320, Math.max(100, up ? above : below));
+    popup.style.cssText = `position:fixed;inset:auto;margin:0;left:${Math.max(8, Math.min(r.left, window.innerWidth - r.width - 8))}px;width:${Math.min(r.width, window.innerWidth - 16)}px;max-height:${height}px;${up ? 'bottom:' + (window.innerHeight - r.top + 6) : 'top:' + (r.bottom + 6)}px;`;
+  }
+  function activeOption(index: number) {
+    active = index; list.querySelectorAll<HTMLElement>('[role=option]').forEach(node => {
+      const isActive = Number(node.dataset.index) === active; node.dataset.active = String(isActive);
+      if (isActive) node.scrollIntoView({ block: 'nearest' });
+    });
+    const id = active < 0 ? undefined : f.id + '-option-' + active;
+    attr(trigger, 'aria-activedescendant', open ? id : undefined); attr(search, 'aria-activedescendant', open ? id : undefined);
+  }
+  function renderOptions() {
+    visible = p.Options.map((_, i) => i).filter(i => p.Options[i].Label.toLocaleLowerCase().includes(search.value.toLocaleLowerCase()));
+    list.replaceChildren();
+    for (const i of visible) {
+      const o = p.Options[i], row = el('div', 'blu-select__option', o.Label); row.id = f.id + '-option-' + i;
+      row.setAttribute('role', 'option'); row.dataset.index = String(i); row.setAttribute('aria-selected', String(o.Value === control.value));
+      row.setAttribute('aria-disabled', String(!!o.Disabled)); if (o.Description) row.append(el('small', 'blu-choice__description', o.Description));
+      row.onpointerdown = event => event.preventDefault(); row.onclick = () => { if (!o.Disabled) choose(i); }; list.append(row);
+    }
+    empty.hidden = !!visible.length;
+    const enabled = visible.filter(i => !p.Options[i].Disabled);
+    activeOption(enabled.includes(active) ? active : (enabled.find(i => p.Options[i].Value === control.value) ?? enabled[0] ?? -1));
+  }
+  function show(value: boolean, focus = true) {
+    if (value && (p.Disabled || p.ReadOnly)) return;
+    open = value; trigger.setAttribute('aria-expanded', String(open)); search.setAttribute('aria-expanded', String(open));
+    if (open) { popup.hidden = false; if (hasPopover && !popup.matches(':popover-open')) popup.showPopover(); search.value = ''; active = -1; renderOptions(); position(); if (p.Searchable) search.focus(); }
+    else { if (hasPopover && popup.matches(':popover-open')) popup.hidePopover(); popup.hidden = true; activeOption(-1); if (focus) trigger.focus(); }
+  }
+  function choose(index: number) { p.Value = index < 0 ? '' : p.Options[index].Value; control.value = p.Value; paintValue(); show(false); events.Change?.(p.Value); }
+  function paintValue() {
+    trigger.textContent = p.Options.find(o => o.Value === control.value)?.Label || p.Placeholder || 'Choose an option';
+    trigger.dataset.placeholder = String(!control.value); clear.hidden = !p.Clearable || !control.value || !!p.ReadOnly;
+    if (control.validity.valid && !p.Error) { f.error.hidden = true; f.error.textContent = ''; f.paint(p, [trigger]); }
+  }
+  function update(patch: Partial<SelectOptions>) {
+    life.check(); p = { ...p, ...patch };
+    if (p.Options.some(o => !o.Value) || new Set(p.Options.map(o => o.Value)).size !== p.Options.length) throw Error('Select option values must be non-empty and unique.');
+    common(control, p); f.paint(p, [trigger]); control.id = f.id + '-native';
+    const placeholder = el('option', '', p.Placeholder || 'Choose an option'); placeholder.value = '';
+    control.replaceChildren(placeholder, ...p.Options.map(o => { const option = el('option', '', o.Label); option.value = o.Value; option.disabled = !!o.Disabled; return option; }));
+    control.value = p.Options.some(o => o.Value === p.Value) ? p.Value! : ''; p.Value = control.value;
+    trigger.disabled = clear.disabled = !!p.Disabled; attr(trigger, 'aria-readonly', p.ReadOnly ? 'true' : undefined);
+    clear.setAttribute('aria-label', 'Clear ' + (p.Label || 'selection')); search.setAttribute('aria-label', 'Search ' + (p.Label || 'options'));
+    list.setAttribute('aria-label', p.Label || 'Options'); search.hidden = !p.Searchable;
+    if (p.Disabled || p.ReadOnly) show(false, false); else if (open) { renderOptions(); position(); }
+    trigger.setAttribute('aria-expanded', String(open)); paintValue();
+  }
+  function key(event: KeyboardEvent) {
+    if (p.Disabled || p.ReadOnly) return;
+    const enabled = visible.filter(i => !p.Options[i].Disabled), from = enabled.indexOf(active);
+    if (event.key === 'Escape' && open) { event.preventDefault(); show(false); }
+    else if (event.key === 'Tab') show(false, false);
+    else if (['ArrowDown','ArrowUp','Home','End'].includes(event.key)) {
+      if (!open) { event.preventDefault(); show(true); return; }
+      event.preventDefault();
+      const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1 : Math.max(0, Math.min(enabled.length - 1, from + (event.key === 'ArrowDown' ? 1 : -1)));
+      activeOption(enabled[next] ?? -1);
+    } else if (event.key === 'Enter' || (event.key === ' ' && event.target !== search)) {
+      event.preventDefault(); if (!open) show(true); else if (active >= 0) choose(active);
+    } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && event.target !== search) {
+      event.preventDefault(); if (!open) show(true);
+      prefix = Date.now() - prefixAt > 650 ? event.key : prefix + event.key; prefixAt = Date.now();
+      const next = visible.find(i => !p.Options[i].Disabled && p.Options[i].Label.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase())); if (next !== undefined) activeOption(next);
+    }
+  }
+  function reset() { update({ Value: initial.Value || '' }); show(false, false); }
+  trigger.addEventListener('click', () => show(!open), { signal: life.signal }); clear.addEventListener('click', () => choose(-1), { signal: life.signal });
+  shell.addEventListener('keydown', key, { signal: life.signal }); search.addEventListener('input', renderOptions, { signal: life.signal });
+  document.addEventListener('pointerdown', e => { if (open && !f.root.contains(e.target as Node)) show(false, false); }, { signal: life.signal });
+  shell.addEventListener('focusout', e => { if (!shell.contains(e.relatedTarget as Node)) { show(false, false); events.Blur?.(); } }, { signal: life.signal });
+  window.addEventListener('resize', position, { signal: life.signal }); window.addEventListener('scroll', position, { signal: life.signal, capture: true });
+  control.addEventListener('invalid', e => { e.preventDefault(); attr(trigger, 'aria-invalid', 'true'); f.error.textContent = control.validationMessage; f.error.hidden = false; attr(trigger, 'aria-describedby', f.error.id); trigger.focus(); }, { signal: life.signal });
+  control.addEventListener('change', () => { p.Value = control.value; paintValue(); events.Change?.(control.value); }, { signal: life.signal });
+  update({});
+  return { element: f.root, control, update, reset, getValue: () => control.value, focus: () => trigger.focus(), validate: () => control.reportValidity(), destroy() { show(false, false); life.destroy(); } };
+}