@blukavantui/community 1.0.1 → 1.1.0

package/dist/styles.css

@@ -4523,7 +4523,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4546,7 +4546,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4571,8 +4571,8 @@ Keep bulk commands together in a wrapping row between the panels. */
 /* 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;}
@@ -4589,7 +4589,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4602,7 +4602,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4625,7 +4625,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4650,8 +4650,8 @@ Keep bulk commands together in a wrapping row between the panels. */
 /* 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;}
@@ -4668,7 +4668,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4681,7 +4681,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4704,7 +4704,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4729,8 +4729,8 @@ Keep bulk commands together in a wrapping row between the panels. */
 /* 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;}
@@ -4747,7 +4747,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4760,7 +4760,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4783,7 +4783,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -4808,8 +4808,8 @@ Keep bulk commands together in a wrapping row between the panels. */
 /* 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;}
@@ -4826,7 +4826,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .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;}
@@ -8880,3 +8880,66 @@ beside the live host/List, never inside a JavaScript-owned host. */
 
 /* Service Studio caption is hidden once the owned grid has initialized. */
 .blu-community-block:has([data-blu-community-ready]) > .blu-community-preview { display: none; }
+
+/* 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/dist/switch.css

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

package/dist/switch.d.ts

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

package/dist/switch.js

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

package/dist/table.css

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

package/dist/table.d.ts

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

package/dist/table.js

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

package/dist/text-area.css

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

package/dist/text-area.d.ts

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

package/dist/text-area.js

@@ -0,0 +1 @@
+import"./chunk-YCLR3IE3.js";import{b as a}from"./chunk-AL2ETLJV.js";import"./chunk-EOKNLCNS.js";export{a as createTextArea};

package/dist/text-input.css

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

package/dist/text-input.d.ts

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

package/dist/text-input.js

@@ -0,0 +1 @@
+import"./chunk-RWBLICYX.js";import{a}from"./chunk-AL2ETLJV.js";import"./chunk-EOKNLCNS.js";export{a as createTextInput};

package/dist/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/dist/time-picker.js

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

package/docs/FORM-LAYOUT-ESSENTIALS.md

@@ -0,0 +1,122 @@
+# Community Form & Layout Essentials — local draft
+
+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.
+
+## Local preview and build
+
+For the standard documentation playgrounds, use the local site at http://127.0.0.1:3384/components/text-input?platform=web#playground. All 12 additions appear in the **Form inputs**, **Layouts**, and **Data** sidebar groups. Existing inputs share **Form inputs** with the new controls; **Form builder** stays separate, with the shared Properties, Examples, Code and API tabs. Regenerate their local metadata with `node scripts/build-essentials-preview.mjs` from `bluui-site` after changing contracts.
+
+For the separate composed-workflow example and component test harness, from `bluui-community`, run `npm run check`, `npm run build`, `npm test`, then `npm run preview:essentials`. Open http://127.0.0.1:3387/. The preview is bound to loopback only. The sample request form stores its rows in page memory. Run its component checks for browser interaction coverage. Source lives in `src/form-layout/`; the combined web package synchronizes these files from Community before building. Do not edit the generated web copies.
+
+## Components
+
+| Component / factory | Purpose and options |
+| --- | --- |
+| Checkbox / `createCheckbox` | `Checked`, `Indeterminate`, `Label`, `Description`, `Required`, `Disabled`, `ReadOnly`, submitted `Value`; `Change(checked)` |
+| Text Input / `createTextInput` | `Value`, `Type` (text, email, password, search, tel, url), `Placeholder`, `MaxLength`, `Autocomplete`, `Leading`, `Trailing`, `Clearable`, `RevealPassword`; `Change(value)`, `Action(key,value)` |
+| Text Area / `createTextArea` | `Value`, `Rows`, `MaxLength`, `AutoGrow`, `MaxHeight`, `ShowCount`; `Change(value)` |
+| Radio Button / `createRadioButton` | A single radio; share `Name` to form a native group, assign distinct `Value`; `Checked`, `Change(checked)` |
+| Radio Group / `createRadioGroup` | `Options`, `Value`, `Direction` (Horizontal or Vertical), per-option descriptions/disabled state; `Change(value)` |
+| Switch / `createSwitch` | `Checked`, `OnText`, `OffText`; `Change(checked)`; consumer owns persistence |
+| Select / `createSelect` | Custom single-select listbox; `Options`, `Value`, `Placeholder`, `Clearable`, `Searchable`; `Change(value)` |
+| Form Field / `createFormField` | Label, required marker, description, error, and a consumer-owned `Control` element. Preserves its previous ARIA attributes on destroy. Validation and disabled state of a consumer control remain consumer-owned. |
+| Columns2 / `createColumns2` | Equal, OneThirdTwoThirds, TwoThirdsOneThird, OneQuarterThreeQuarters, ThreeQuartersOneQuarter |
+| Columns3 / `createColumns3` | Equal or WideCenter |
+| Columns4 / `createColumns4` | Equal |
+| Table / `createTable` | Semantic HTML table; columns, rows, optional single-column sort and pagination, row-action callbacks, loading and empty states |
+
+`src/form-layout/types.ts` is the complete typed web contract. All factory calls accept a host element and options; controls and the table accept events as a separate third argument. Fields share `Id` (set at creation), `Name`, `Label`, `Description`, `Error`, `Required`, `Disabled`, `ReadOnly`, `Size` (Small/Medium/Large), and `ExtendedClass`. Use a visible label. Setting `Error` supplies a custom validity message; clear it with `update({Error: ''})` after correcting application validation.
+
+## Use locally
+
+Use a local link or these local build outputs; installing npm 1.0.1 will not fetch draft components. In a consuming app that links this workspace package:
+
+```ts
+import {createTextInput} from '@blukavantui/community/text-input';
+import {createSelect} from '@blukavantui/community/select';
+import {createColumns2} from '@blukavantui/community/columns2';
+import '@blukavantui/community/theme.css';
+import '@blukavantui/community/form-layout.css';
+
+const columns = createColumns2(host, {Ratio: 'OneThirdTwoThirds', Gap: 24});
+const name = createTextInput(columns.columns[0], {
+  Name: 'name', Label: 'Customer name', Required: true,
+  Leading: {Kind: 'Image', Src: '/assets/company.svg', Alt: 'Company'},
+  Trailing: {Kind: 'Action', Text: 'Find', Label: 'Find customer', Key: 'find'},
+}, {Change(value) { draft.name = value; }, Action(key, value) { findCustomer(value); }});
+const team = createSelect(columns.columns[1], {
+  Name: 'team', Label: 'Team', Searchable: true, Clearable: true,
+  Options: [{Value: 'operations', Label: 'Operations'}],
+});
+// Later: name.update({Error: 'Enter a customer name.'});
+// Cleanup children before their layout: name.destroy(); team.destroy(); columns.destroy();
+```
+
+Text adornments accept `{Kind:'Text',Text}`, icons accept `{Kind:'Icon',Text,Label?}`, images accept `{Kind:'Image',Src,Alt}`, and actions accept `{Kind:'Action',Text,Label,Key}`. Image URLs must be HTTP(S) or relative URLs. Empty alt text is appropriate for decorative images. Adornments are rendered as text/DOM, never interpreted as HTML. Images are sized consistently on either side. For paragraphs with a large image on the left/right, use the existing `SplitSection` component; the preview includes an interactive example.
+
+Fields expose `element`, `update(patch)`, `getValue()`, `reset()`, `focus()`, `validate()`, and `destroy()`. Individual controls also expose `control`, the actual input/textarea/select. RadioGroup provides a group handle rather than one control. Programmatic updates and reset do not emit Change; user interactions do. Reset restores the value given at creation, while preserving updated configuration. A canceled native form reset is respected. Mount inside the final form so the reset listener attaches to the correct owner. Use `update()` for programmatic changes; direct DOM property assignments do not synchronize component state unless an input/change event is dispatched.
+
+The Select uses a custom popup, keyboard navigation, type-ahead, optional search, disabled-option skipping, Escape, outside click, and a native select for FormData and constraint validation. Only its custom trigger is exposed to assistive technology. Empty string is reserved for the placeholder; option values must be unique and non-empty. Read-only Select values should be supplied by the consumer. The popup uses the browser top layer when available and an in-place fallback otherwise.
+
+RadioGroup uses standard radio inputs, so arrow keys follow browser radio navigation. Read-only controls reject user changes. A read-only group should also have an assigned value. Disabled controls do not submit through FormData. Checkbox indeterminate state is a visual/semantic mixed state; the checked value determines form submission.
+
+Columns expose `columns` (two/three/four real content elements), `element`, `update`, and `destroy`. Append existing content to the slots and update proportions without replacing those nodes. `Gap` is 0–96px (24 default); `Align` is Start/Center/End/Stretch. `EqualHeight` defaults to false. Enable it to stretch each column and its single content wrapper to the tallest content within that row; it overrides Align while enabled. Wrap multiple widgets in one outer card/container when that card should fill the height. Stacked rows retain natural content heights. `StackAt` is Small (below 480px), Medium (below 768px, default), or Large (below 1024px). Columns stack in source order. Destroy child component instances before their layout to release their listeners.
+
+## Table versus Grid Basic
+
+Table is for straightforward record lists: semantic headers, optional client sorting, optional paging, and named row actions. It has no grid engine. Grid Basic remains the choice for column filters, column resizing, automatic sizing, or grid-style selection. FormBuilder and FormRenderer remain Pro; this batch adds foundational controls, not a form designer.
+
+```ts
+import {createTable} from '@blukavantui/community/table';
+const table = createTable(host, {
+  Caption: 'Service requests', RowKey: 'Id', PageSize: 10,
+  Rows: [{Id: 'REQ-1', Name: 'Equipment setup', Quantity: 2}],
+  Columns: [
+    {Key: 'Id', Header: 'Request', Sortable: true},
+    {Key: 'Name', Header: 'Title'},
+    {Key: 'Quantity', Header: 'Items', Align: 'Right', Sortable: true},
+  ],
+  Actions: [{Key: 'view', Label: 'View'}],
+}, {RowAction(key, row) { openRequest(row.Id); }});
+// table.update({Rows: refreshedRows, Loading: false});
+// table.update({Loading: true}); table.destroy();
+```
+
+Table columns accept `Key`, `Header`, `Sortable`, `Align`, and optional text-only `Format(value,row)`. Sorting uses the raw cell value, never the displayed format. Numbers sort numerically; other values use locale-aware natural string ordering; null/undefined remain last in either direction. Paging is one-based and clamped after row updates. Omit PageSize for an unpaged list. `Density` is Compact/Comfortable; `Striped` is optional. `SortKey`, `SortDirection`, `Page`, `Loading`, `EmptyMessage`, and `Caption` are updateable. Events: `RowAction(key,row)`, `SortChanged(key,direction)`, `PageChanged(page)`. Row actions may supply `Disabled: true` or a web-only `Disabled(row)` predicate. RowKey makes repeated action names accessible and preserves focus across updates. The application owns loading, persistence, and routing; the component makes no network requests.
+
+## 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.
+
+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.
+
+Columns2/3/4 use real, editable `Column1`…`Column4` placeholders and CSS layout, with editor-only boundaries/minimum height. Their dynamic `Ratio` input affects runtime; Service Studio does not resolve that instance argument in the canvas. Choose a fixed preset when the proportions must be visible while designing:
+
+| Native block | Visible proportions |
+| --- | --- |
+| Columns2, Columns3, Columns4 | Two, three or four equal columns |
+| Columns2OneThird | 1 : 2 |
+| Columns2TwoThirds | 2 : 1 |
+| Columns2OneQuarter | 1 : 3 |
+| Columns2ThreeQuarters | 3 : 1 |
+| Columns3WideCenter | 1 : 2 : 1 |
+
+The five presets accept `EqualHeight`, `Gap`, `Align`, `StackAt`, and `ExtendedClass`; they have no `Ratio` input. These dynamic settings resolve at runtime, while the editor displays the default spacing/alignment. All eight arrangements and an equal two-column layout nested inside a 1:2 layout were visually checked in the actual `ColumnsPreview` canvas. Each grid now owns its tracks, so nested columns do not inherit the parent's proportions. Empty Columns2 placeholders were also visually checked. Browser responsive stacking was checked at 390px; do not treat that as a compiled native consumer check.
+
+Native TextInput offers `LeadingImageUrl`, `LeadingImageAlt`, `LeadingText`, `TrailingImageUrl`, `TrailingImageAlt`, and `TrailingText`. An image takes precedence over text; text takes precedence over the corresponding advanced `LeadingJson`/`TrailingJson` adornment. Advanced JSON supports the same icon/action contract as the web component. Images do not modify the field value. **Service Studio displays generic expression/image previews for dynamic block arguments; it does not show the passed image URL as the final image.**
+
+For images visible and editable in the canvas, use the new native `InputGroup` block:
+
+1. Put a TextInput in its `Control` placeholder, with its accessible `Label` set.
+2. Put ordinary Image widgets in `Leading`, `Trailing`, or both. Set their actual image resource or literal URL and meaningful alt text (empty alt for decoration).
+3. Keep label, help, errors and validation on TextInput. Use an outer FormField only when you can supply the actual focusable input ID; the referenced Block ID identifies a wrapper, not the input.
+
+InputGroup keeps the consumer-owned widgets in place; no JavaScript moves or clones them. Its CSS aligns the side images and removes the inner input border. The private `TextInputPreview` canvas was visually checked with real images on the left, right, and both sides. The text value still appears as Service Studio's expression preview. InputGroup and the five proportion presets are native composition helpers, not additional web factories; the web TextInput and Columns APIs already provide these options.
+
+Native RadioGroup/Select take `OptionsJson` containing an array of `{Value,Label,Description?,Disabled?}`. Table takes `ColumnsJson`, `RowsJson`, and `ActionsJson`; columns require `Key` and `Header`, and actions require `Key` and `Label`. Supply at least one column. Native JSON cannot contain web formatter/predicate functions; format values before serialization, and use Boolean `Disabled` for actions. RowAction emits `Key` and serialized `RowJson`; sorting/paging emit their selected key/direction/page. JSON is parsed on both creation and updates; malformed JSON reports OnError.
+
+OnReady and OnParametersChanged synchronize each control; OnDestroy disposes it. The local browser harness runs the exact generated native action scripts to verify mounting, image arguments, callbacks, JSON updates, disposal, and FormField ARIA restoration. Native FormField's `ControlId` must identify the actual input, not an enclosing block. It adds label/help/error associations while preserving consumer-owned attributes.
+
+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.

package/docs/PUBLISHING.md

@@ -1,25 +1,129 @@
-# Community npm publication handover
-
-This package is part of the reviewed 1.0.1 Community npm batch. Publication needs
-Jason's explicit approval. Preparing or running checks does not publish anything.
-
-The scope is exactly @blukavantui/community and @blukavantui/charts-community.
-Publish Community first, then Charts Community, whose dependency is ^1.0.1.
-Pro and Charts Pro remain licensed website downloads and are excluded.
-
-Publish the reviewed tarballs, not an arbitrary source directory or workspace.
-Compare their SHA-256 and npm SHA-512 integrity to the release review manifest.
-Confirm the publishing account can publish under the blukavantui organization.
-Use npm's normal interactive login and 2FA; never place credentials in packages.
-Recheck that the selected name/version is unpublished immediately before release.
-
-After approval, use explicit --access public and --registry=https://registry.npmjs.org/.
-Registry verification and a fresh install of both exact versions must follow.
-Website instructions and download links remain a separately approved deployment.
-The existing website tarballs retain their bytes; this npm batch changes package
-metadata/documentation and removes Charts folder-sync copies, not component code.
-
-References:
-- https://docs.npmjs.com/cli/v11/commands/npm-publish/
-- https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/
-- https://docs.npmjs.com/trusted-publishers/
+# Publishing BluKavantUI Community to npm
+
+This guide prepares and publishes the Web package `@blukavantui/community`.
+It does not publish native OutSystems modules or deploy the website.
+
+## What Jason needs to set up
+
+1. Create or sign into your personal account at <https://www.npmjs.com/signup>,
+   verify your email, and enable two-factor authentication. Keep account recovery
+   codes somewhere safe; do not place credentials in this project.
+2. Create or obtain access to the `blukavantui` npm organization. Its scope must
+   match the package name. A package-name 404 does not prove the organization name
+   is available. Confirm ownership in the npm website and give your publishing
+   account permission to publish public packages under that organization.
+3. Review `LICENSE.txt` version 1.2. It adds the official npm source and service
+   provider distribution rights while preserving the Community use model and
+   third-party rights. The package remains source available under a custom license.
+4. Finish the component changes intended for this release and select the version.
+   Preparing the license, README and release checks does not require freezing
+   development; publishing does require choosing the exact source snapshot.
+
+No access token is required for an interactive first publish. Complete the npm
+browser login and any requested two-factor challenge yourself.
+
+## Version and source checks
+
+From the Community package directory, check the registry:
+
+```sh
+npm view @blukavantui/community versions --json --registry=https://registry.npmjs.org/
+```
+
+For an unpublished package, a registry 404 is expected. Authentication, permission
+or network errors are different problems. A previously published name/version
+cannot be reused, even after unpublishing. The current local version is `0.4.0`;
+choose the release version after the pending component updates are complete.
+
+If you change the version, use `npm version <chosen-version> --no-git-tag-version`,
+then update `edition.json` to match. Check both `package-lock.json` and
+`npm-shrinkwrap.json`; the verifier requires any present lockfile's root version
+to match. Component synchronization preserves the selected package version.
+
+Run verification with a supported Node.js LTS release and a current npm CLI:
+
+```sh
+npm ci
+npm run verify:package
+```
+
+This runs type checking, a clean build and the existing tests, packs the package,
+installs that archive into a separate temporary consumer, and verifies all public
+JS/CSS exports, both NodeNext and Bundler TypeScript resolution, the README
+examples, font checksums/licenses and browser bundling. It detects source changes
+while verification is running. Stop concurrent component edits for that run.
+
+On success, `release/` contains the archive and `verification.json`, including its
+SHA-256, npm integrity, size and checked source fingerprint. The archive is built
+locally and has not been uploaded. The `prepack` lifecycle also checks/builds/tests
+when running ordinary `npm pack` or publishing the source directory.
+
+The package includes editable Community sources and rebuild inputs. Internal
+native verification records and the upstream-only `sync-editions.mjs` script are
+excluded. Third-party notices and font licenses are included. Keep the explicit
+`files` list in `package.json` when adding new build or release inputs.
+
+Run browser interaction checks for changed components before release. The package
+verifier checks installability and bundling; it does not replace a full browser,
+accessibility or native OutSystems test suite. Rerun verification after any edits,
+including license or README edits. If verification fails, do not use an archive
+left by an earlier successful run.
+
+## Publish the exact verified archive
+
+In the same directory, log in and confirm the active account:
+
+```sh
+npm login --registry=https://registry.npmjs.org/
+npm whoami --registry=https://registry.npmjs.org/
+```
+
+For a verified `0.4.0` release, inspect and then publish this exact archive. Replace
+the filename/version in these commands if you chose a different version:
+
+```sh
+shasum -a 256 release/blukavantui-community-0.4.0.tgz
+npm publish ./release/blukavantui-community-0.4.0.tgz --dry-run --access public --registry=https://registry.npmjs.org/
+npm publish ./release/blukavantui-community-0.4.0.tgz --access public --registry=https://registry.npmjs.org/
+```
+
+Compare the printed SHA-256 with `release/verification.json`. Only the final command
+publishes. Publishing an archive uses its existing contents; it does not rebuild
+pending source changes. Do not publish today's archive after further component
+updates without generating and verifying a new one.
+
+To offer a preview while keeping it off the default installation path, choose an
+explicit prerelease version such as `0.4.1-beta.1` and add `--tag next` to publish.
+Users would install `@blukavantui/community@next`. The first stable publication can
+use the default `latest` tag. npm also supports staged publishing with a separate
+maintainer approval step; consult the current npm guide if choosing that workflow.
+
+## After publication
+
+- Confirm the version and integrity with `npm view`, then install the exact
+  registry version into a fresh application and run its build and browser checks.
+- Remove the pre-publication availability sentence from the README for the next
+  release. Keep the website archive option and official-source explanation.
+- Update the website's installation instructions and starter dependency from the
+  local archive to the released version, regenerate its lockfile, and verify it.
+- Synchronize the website's license text/summary with `LICENSE.txt` version 1.2
+  when releasing the updated downloads. Existing archives retain their original
+  terms; do not silently overwrite an already released archive under the same
+  version. Use a new version if replacing an existing website release's contents.
+- Keep website downloads, version metadata, release notes and npm contents aligned.
+  Forge remains a separate native release.
+
+For later automation, configure npm trusted publishing from your CI provider.
+A GitHub Actions workflow can publish using OIDC without a long-lived npm token.
+Do this after the repository and release workflow are settled. Public provenance
+has additional repository visibility requirements; do not assume it is available
+from a private repository.
+
+## Official npm references
+
+- [Publish a scoped public package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/)
+- [Configure two-factor authentication](https://docs.npmjs.com/configuring-two-factor-authentication/)
+- [Create an organization](https://docs.npmjs.com/creating-an-organization/)
+- [Package publication and version immutability](https://docs.npmjs.com/cli/v11/commands/npm-publish/)
+- [Trusted publishing](https://docs.npmjs.com/trusted-publishers/)
+- [npm service rights in your content](https://docs.npmjs.com/policies/open-source-terms/#your-content)