@blukavantui/community 1.0.1 → 1.1.0

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

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

package/src/runtime/time-picker.js

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

package/src/select.ts

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

package/src/switch.ts

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

package/src/table.ts

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

package/src/text-area.ts

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

package/src/text-input.ts

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

package/src/types.ts

@@ -1285,15 +1285,3 @@ DurationSeconds: number;
 /** Played ranges since the previous checkpoint. Seeking gaps are excluded. */
 Segments: BluVideoWatchedSegment[];
 }
-
-
-
-
-
-
-
-
-
-
-
-

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/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/radio-button.css

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

package/styles/radio-group.css

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

package/styles/select.css

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

package/styles/switch.css

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

package/styles/table.css

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

package/styles/text-area.css

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

package/styles/text-input.css

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

package/styles/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/test/form-layout.test.mjs

@@ -0,0 +1,28 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {build} from 'esbuild';
+import {readFile} from 'node:fs/promises';
+import vm from 'node:vm';
+const built=await build({entryPoints:['src/form-layout/table.ts'],bundle:true,format:'esm',platform:'node',write:false});
+const {tableRows}=await import('data:text/javascript;base64,'+Buffer.from(built.outputFiles[0].text).toString('base64'));
+const options={Caption:'Records',Columns:[{Key:'value',Header:'Value',Sortable:true}],Rows:[{value:10},{value:null},{value:2},{value:2}],SortKey:'value'};
+test('Table sorts numerically without mutating records, keeps equal rows stable, and keeps nulls last',()=>{
+ const sorted=tableRows(options).rows;assert.deepEqual(sorted.map(r=>r.value),[2,2,10,null]);assert.equal(sorted[0],options.Rows[2]);assert.equal(sorted[1],options.Rows[3]);assert.deepEqual(options.Rows.map(r=>r.value),[10,null,2,2]);assert.deepEqual(tableRows({...options,SortDirection:'Descending'}).rows.map(r=>r.value),[10,2,2,null]);
+});
+test('Table ignores non-sortable keys and safely clamps paging after data shrinks',()=>{
+ assert.deepEqual(tableRows({...options,Columns:[{Key:'value',Header:'Value'}]}).rows,options.Rows);
+ assert.deepEqual(tableRows({...options,PageSize:2,Page:100}),{rows:[options.Rows[0],options.Rows[1]],page:2,pages:2,total:4,start:3,end:4});
+ assert.equal(tableRows({...options,Rows:[],Page:20,PageSize:5}).page,1);assert.equal(tableRows({...options,Page:NaN,PageSize:Infinity}).page,1);
+});
+test('every draft component has a selective entry and the Table does not load AG Grid',async()=>{
+ const draft=JSON.parse(await readFile('draft-components.json','utf8')),pkg=JSON.parse(await readFile('package.json','utf8'));
+ const sizes=JSON.parse(await readFile('dist/sizes.json','utf8'));
+ for(const c of draft.components){assert.ok(pkg.exports['./'+c.slug]);await readFile('dist/'+c.slug+'.d.ts');}
+ const code=(await Promise.all(sizes.typescript['table'].files.map(f=>readFile('dist/'+f,'utf8')))).join('\n');
+ assert.ok(!/ClientSideRowModel|BluGrid|ag-grid/.test(code));assert.ok(sizes.typescript['table'].bytes<20000);
+});
+test('draft native runtime registers independently without changing commercial globals',async()=>{
+ const commercial={untouched:true},window={BluUIRuntime:commercial,BluUITheme:{version:'1.0.0',setMode(){},getMode(){return 'Light';},mountSelector(){}}};const context=vm.createContext({window,Map,Set,WeakMap,WeakSet,Promise,console});
+ vm.runInContext(await readFile('dist/native/form-layout.js','utf8'),context);
+ assert.equal(window.BluUIRuntime,commercial);assert.equal(typeof window.BluUICommunity.sync,'function');assert.equal(typeof window.BluUICommunity.destroy,'function');
+});

package/test/isolation.test.mjs

@@ -4,8 +4,8 @@ import {readFile,readdir} from 'node:fs/promises';
 import vm from 'node:vm';
 const edition=JSON.parse(await readFile('edition.json','utf8'));
 const sizes=JSON.parse(await readFile('dist/sizes.json','utf8'));
-test('all seven groups expose exactly the approved 55 Community components',()=>{
- const names=Object.values(edition.nativeModules).flat();assert.equal(names.length,55);assert.equal(new Set(names).size,55);assert.deepEqual([...names].sort(),[...edition.components].sort());assert.equal(Object.keys(edition.nativeModules).length,7);
+test('all seven groups expose the declared release component set without duplicates',()=>{
+ const names=Object.values(edition.nativeModules).flat();const expected=edition.version==='1.1.0'?67:55;assert.equal(names.length,expected);assert.equal(new Set(names).size,expected);assert.deepEqual([...names].sort(),[...edition.components].sort());assert.equal(Object.keys(edition.nativeModules).length,7);
 });
 test('non-grid entrypoints do not pull the AG Grid engine or unrelated component factories',async()=>{
  for(const name of ['chat','chat-widget','float-button','date-picker','time-picker','date-time-picker','date-range-picker','font-provider','shape-mask','tree-select','transfer-list','core','layout','inputs','feedback','data']){