@formbox/htmx 0.4.3 → 0.5.0

package/dist/templates/AnswerList.html.hbs

@@ -4,7 +4,7 @@ Template: AnswerList
 Inputs:
 - children: rendered repeated answer rows.
 - hasCount/countName/count: hidden occurrence count state.
-- actionName/addAction/addLabel: add-answer submit action.
+- actionName/addAction/addId/addLabel: add-answer submit action.
 - linkId: current question link id for data attributes.
 - path: renderer node path, when present.
 --}}
@@ -13,5 +13,5 @@ Inputs:
 {{/if}}
 {{{children}}}
 {{#if addAction}}
-  <button type="submit"{{{attr "data-fb-link-id" linkId}}} data-fb-field="add-action"{{{attr "name" actionName}}}{{{attr "value" addAction}}}>{{addLabel}}</button>
+  <button type="submit"{{{attr "id" addId}}}{{{attr "data-fb-link-id" linkId}}} data-fb-field="add-action"{{{attr "name" actionName}}}{{{attr "value" addAction}}}>{{addLabel}}</button>
 {{/if}}

package/dist/templates/AnswerScaffold.html.hbs

@@ -5,7 +5,7 @@ Inputs:
 - control: rendered answer control.
 - errors: rendered answer errors.
 - children: rendered answer child items.
-- actionName/removeAction/removeLabel: remove-answer submit action.
+- actionName/removeAction/removeId/removeLabel: remove-answer submit action.
 - linkId: current question link id for data attributes.
 - path/canRemove: repeat answer state used to derive removeAction.
 --}}
@@ -14,6 +14,6 @@ Inputs:
   {{{errors}}}
   {{{children}}}
   {{#if removeAction}}
-    <button type="submit"{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{removeLabel}}</button>
+    <button type="submit"{{{attr "id" removeId}}}{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{removeLabel}}</button>
   {{/if}}
 </div>

package/dist/templates/CheckboxList.html.hbs

@@ -3,7 +3,7 @@ Template: CheckboxList
 
 Inputs:
 - id: fieldset id.
-- options: items with token, label, selected, disabled, and hiddenInput.
+- options: items with id, token, label, selected, disabled, and hiddenInput.
 - selectedOptions/selectedName: selected option state and hidden selected-token field name.
 - hiddenInputs/trailingHiddenInputs: hidden values that preserve disabled or off-list selections.
 - specifyOtherOption/customOptionForm: custom option entry controls.
@@ -20,7 +20,7 @@ Inputs:
     {{#if hiddenInput}}
       <input type="hidden"{{{attr "name" hiddenInput.name}}}{{{attr "value" hiddenInput.value}}}>
     {{/if}}
-    <label><input{{{fieldAttributes ..}}} type="checkbox"{{{attr "value" token}}}{{{attr "checked" selected}}}{{{attr "disabled" disabled}}}{{{attr "aria-describedby" ../ariaDescribedBy}}}>{{{label}}}</label>
+    <label><input{{{fieldAttributes ..}}}{{{attr "id" id}}} type="checkbox"{{{attr "value" token}}}{{{attr "checked" selected}}}{{{attr "disabled" disabled}}}{{{attr "aria-describedby" ../ariaDescribedBy}}}>{{{label}}}</label>
   {{/each}}
   {{#each trailingHiddenInputs}}
     <input type="hidden"{{{attr "name" name}}}{{{attr "value" value}}}>

package/dist/templates/CustomOptionForm.html.hbs

@@ -5,12 +5,14 @@ Inputs:
 - content: rendered custom option fields.
 - errors: rendered validation errors.
 - actionName: submit action field name.
-- submitLabel/cancelLabel: button labels.
+- id: fieldset id.
+- submitId/submitLabel: submit button id and label.
+- cancelId/cancelLabel: cancel button id and label.
 - canSubmit: source theme state, if supplied.
 --}}
-<fieldset>
+<fieldset{{{attr "id" id}}}>
   {{{content}}}
   {{{errors}}}
-  <button type="submit"{{{attr "name" actionName}}} value="submit-custom">{{submitLabel}}</button>
-  <button type="submit"{{{attr "name" actionName}}} value="cancel-custom">{{cancelLabel}}</button>
+  <button type="submit"{{{attr "id" submitId}}}{{{attr "name" actionName}}} value="submit-custom">{{submitLabel}}</button>
+  <button type="submit"{{{attr "id" cancelId}}}{{{attr "name" actionName}}} value="cancel-custom">{{cancelLabel}}</button>
 </fieldset>

package/dist/templates/FileInput.html.hbs

@@ -4,7 +4,7 @@ Template: FileInput
 Inputs:
 - id: control id.
 - value/hiddenValue: current attachment and hidden JSON mirror.
-- clearAction/clearLabel: clear-file submit control state.
+- clearAction/clearId/clearLabel: clear-file submit control state.
 - dataLinkId/hxInclude: clear button HTMX attributes.
 - disabled/accept: native file input state.
 - ariaLabelledBy/ariaDescribedBy: accessibility references.
@@ -16,5 +16,5 @@ Inputs:
 {{/if}}
 <input{{{fieldAttributes}}}{{{attr "id" id}}} type="file"{{{attr "disabled" disabled}}}{{{attr "accept" accept}}}{{{attr "aria-labelledby" ariaLabelledBy}}}{{{attr "aria-describedby" ariaDescribedBy}}}>
 {{#if clearAction}}
-  <button type="submit"{{{attr "data-fb-link-id" dataLinkId}}} data-fb-field="value"{{{attr "name" name}}} value=""{{{attr "hx-include" hxInclude}}}>{{clearLabel}}</button>
+  <button type="submit"{{{attr "id" clearId}}}{{{attr "data-fb-link-id" dataLinkId}}} data-fb-field="value"{{{attr "name" name}}} value=""{{{attr "hx-include" hxInclude}}}>{{clearLabel}}</button>
 {{/if}}

package/dist/templates/Flyover.html.hbs

@@ -4,9 +4,9 @@ Template: Flyover
 Inputs:
 - id: tooltip id.
 - children: rendered flyover content.
-- ariaLabel: button accessible label.
+- buttonId/ariaLabel: button id and accessible label.
 --}}
 <span>
-  <button type="button"{{{attr "aria-describedby" id}}}{{{attr "aria-label" ariaLabel}}}>i</button>
+  <button type="button"{{{attr "id" buttonId}}}{{{attr "aria-describedby" id}}}{{{attr "aria-label" ariaLabel}}}>i</button>
   <span{{{attr "id" id}}} role="tooltip">{{{children}}}</span>
 </span>

package/dist/templates/GroupList.html.hbs

@@ -5,7 +5,7 @@ Inputs:
 - linkId: repeated group link id.
 - header/errors/children: rendered group list sections.
 - hasCount/countName/count: hidden occurrence count state.
-- actionName/addAction/addLabel: add-group submit action.
+- actionName/addAction/addId/addLabel: add-group submit action.
 - path/canAdd: repeat group state used to derive addAction.
 - customExtensions: source extension values, if supplied.
 --}}
@@ -17,6 +17,6 @@ Inputs:
   {{{errors}}}
   {{{children}}}
   {{#if addAction}}
-    <button type="submit"{{{attr "data-fb-link-id" linkId}}} data-fb-field="add-action"{{{attr "name" actionName}}}{{{attr "value" addAction}}}>{{addLabel}}</button>
+    <button type="submit"{{{attr "id" addId}}}{{{attr "data-fb-link-id" linkId}}} data-fb-field="add-action"{{{attr "name" actionName}}}{{{attr "value" addAction}}}>{{addLabel}}</button>
   {{/if}}
 </section>

package/dist/templates/GroupScaffold.html.hbs

@@ -5,8 +5,8 @@ Inputs:
 - linkId: group link id.
 - header/children/expandedChildren/errors/signature: rendered group sections.
 - isExpandable/isExpanded/expandedName/expandedValue: collapsible group state.
-- summaryLabel/collapseLabel/expandLabel/toggleAction: collapsible submit control state.
-- actionName/removeAction/removeLabel: remove-group submit action.
+- summaryLabel/collapseLabel/expandLabel/toggleAction/toggleId: collapsible submit control state.
+- actionName/removeAction/removeId/removeLabel: remove-group submit action.
 - path/canRemove: repeat group state used to derive removeAction.
 - customExtensions: source extension values, if supplied.
 --}}
@@ -17,20 +17,20 @@ Inputs:
       <input type="hidden"{{{attr "name" expandedName}}}{{{attr "value" expandedValue}}}>
     {{/if}}
     <details{{{attr "data-fb-collapsible" linkId}}}{{{attr "open" isExpanded}}}>
-      <summary>{{#if toggleAction}}<button type="submit"{{{attr "name" actionName}}}{{{attr "value" toggleAction}}}>{{summaryLabel}}</button>{{else}}{{summaryLabel}}{{/if}}</summary>
+      <summary>{{#if toggleAction}}<button type="submit"{{{attr "id" toggleId}}}{{{attr "name" actionName}}}{{{attr "value" toggleAction}}}>{{summaryLabel}}</button>{{else}}{{summaryLabel}}{{/if}}</summary>
       {{{expandedChildren}}}
     </details>
     {{{errors}}}
     {{{signature}}}
     {{#if removeAction}}
-      <button type="submit"{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{removeLabel}}</button>
+      <button type="submit"{{{attr "id" removeId}}}{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{removeLabel}}</button>
     {{/if}}
   {{else}}
     {{{errors}}}
     {{{children}}}
     {{{signature}}}
     {{#if removeAction}}
-      <button type="submit"{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{removeLabel}}</button>
+      <button type="submit"{{{attr "id" removeId}}}{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{removeLabel}}</button>
     {{/if}}
   {{/if}}
 </fieldset>

package/dist/templates/Help.html.hbs

@@ -4,9 +4,9 @@ Template: Help
 Inputs:
 - id: tooltip id.
 - children: rendered help content.
-- ariaLabel: button accessible label.
+- buttonId/ariaLabel: button id and accessible label.
 --}}
 <span>
-  <button type="button"{{{attr "aria-describedby" id}}}{{{attr "aria-label" ariaLabel}}}>?</button>
+  <button type="button"{{{attr "id" buttonId}}}{{{attr "aria-describedby" id}}}{{{attr "aria-label" ariaLabel}}}>?</button>
   <span{{{attr "id" id}}} role="tooltip">{{{children}}}</span>
 </span>

package/dist/templates/Label.html.hbs

@@ -6,18 +6,18 @@ Inputs:
 - as/isLegend/isText: rendered label element kind.
 - content: rendered label text, prefix, required marker, and help/legal/flyover html.
 - children/prefix/required/shortText: source label text state.
-- supportHyperlinks: links with href and labelHtml.
+- supportHyperlinks: links with id, href, and labelHtml.
 - media: rendered attachment media html.
 - help/legal/flyover: rendered extension slots.
 - isExpanded: source expansion state, if supplied.
 - attachmentLabel: accessible text used while rendering media.
 --}}
 {{#if isLegend}}
-  <legend{{{attr "id" id}}}{{{attr "data-short-text" shortText}}}>{{{content}}}{{#if supportHyperlinks.length}}<div>{{#each supportHyperlinks}}<a{{{attr "href" href}}} target="_blank" rel="noreferrer">{{{labelHtml}}}</a>{{/each}}</div>{{/if}}{{{media}}}</legend>
+  <legend{{{attr "id" id}}}{{{attr "data-short-text" shortText}}}>{{{content}}}{{#if supportHyperlinks.length}}<div>{{#each supportHyperlinks}}<a{{{attr "id" id}}}{{{attr "href" href}}} target="_blank" rel="noreferrer">{{{labelHtml}}}</a>{{/each}}</div>{{/if}}{{{media}}}</legend>
 {{else}}
   {{#if isText}}
-    <span{{{attr "id" id}}}{{{attr "data-short-text" shortText}}}>{{{content}}}{{#if supportHyperlinks.length}}<div>{{#each supportHyperlinks}}<a{{{attr "href" href}}} target="_blank" rel="noreferrer">{{{labelHtml}}}</a>{{/each}}</div>{{/if}}{{{media}}}</span>
+    <span{{{attr "id" id}}}{{{attr "data-short-text" shortText}}}>{{{content}}}{{#if supportHyperlinks.length}}<div>{{#each supportHyperlinks}}<a{{{attr "id" id}}}{{{attr "href" href}}} target="_blank" rel="noreferrer">{{{labelHtml}}}</a>{{/each}}</div>{{/if}}{{{media}}}</span>
   {{else}}
-    <label{{{attr "id" id}}}{{{attr "for" htmlFor}}}{{{attr "data-short-text" shortText}}}>{{{content}}}{{#if supportHyperlinks.length}}<div>{{#each supportHyperlinks}}<a{{{attr "href" href}}} target="_blank" rel="noreferrer">{{{labelHtml}}}</a>{{/each}}</div>{{/if}}{{{media}}}</label>
+    <label{{{attr "id" id}}}{{{attr "for" htmlFor}}}{{{attr "data-short-text" shortText}}}>{{{content}}}{{#if supportHyperlinks.length}}<div>{{#each supportHyperlinks}}<a{{{attr "id" id}}}{{{attr "href" href}}} target="_blank" rel="noreferrer">{{{labelHtml}}}</a>{{/each}}</div>{{/if}}{{{media}}}</label>
   {{/if}}
 {{/if}}

package/dist/templates/LanguageSelector.html.hbs

@@ -2,11 +2,12 @@
 Template: LanguageSelector
 
 Inputs:
+- id: select id.
 - name: generated language field name.
 - value: current language code.
 - options: language options with value, label, and selected.
 --}}
-<select{{{attr "name" name}}}>
+<select{{{attr "id" id}}}{{{attr "name" name}}}>
   {{#each options}}
     <option{{{attr "value" value}}}{{{attr "selected" selected}}}>{{label}}</option>
   {{/each}}

package/dist/templates/Legal.html.hbs

@@ -4,9 +4,9 @@ Template: Legal
 Inputs:
 - id: dialog id.
 - children: rendered legal content.
-- ariaLabel: button accessible label.
+- buttonId/ariaLabel: button id and accessible label.
 --}}
 <span>
-  <button type="button"{{{attr "aria-describedby" id}}}{{{attr "aria-label" ariaLabel}}}>!</button>
+  <button type="button"{{{attr "id" buttonId}}}{{{attr "aria-describedby" id}}}{{{attr "aria-label" ariaLabel}}}>!</button>
   <span{{{attr "id" id}}} role="dialog">{{{children}}}</span>
 </span>

package/dist/templates/Link.html.hbs

@@ -2,8 +2,9 @@
 Template: Link
 
 Inputs:
+- id: link id.
 - href: link target.
 - target/rel: link browsing attributes.
 - children: rendered link content.
 --}}
-<a{{{attr "href" href}}}{{{attr "target" target}}}{{{attr "rel" rel}}}>{{{children}}}</a>
+<a{{{attr "id" id}}}{{{attr "href" href}}}{{{attr "target" target}}}{{{attr "rel" rel}}}>{{{children}}}</a>

package/dist/templates/MultiSelectInput.html.hbs

@@ -3,7 +3,7 @@ Template: MultiSelectInput
 
 Inputs:
 - id: fieldset id.
-- options: items with token, label, selected, disabled, and hiddenInput.
+- options: items with id, token, label, selected, disabled, and hiddenInput.
 - selectedOptions/selectedName: selected option state and hidden selected-token field name.
 - hiddenInputs/trailingHiddenInputs: hidden values that preserve disabled or off-list selections.
 - searchQuery/searchName/searchLabel: server-side option search state.
@@ -21,7 +21,7 @@ Inputs:
     {{#if hiddenInput}}
       <input type="hidden"{{{attr "name" hiddenInput.name}}}{{{attr "value" hiddenInput.value}}}>
     {{/if}}
-    <label><input{{{fieldAttributes ..}}} type="checkbox"{{{attr "value" token}}}{{{attr "checked" selected}}}{{{attr "disabled" disabled}}}{{{attr "aria-describedby" ../ariaDescribedBy}}}>{{{label}}}</label>
+    <label><input{{{fieldAttributes ..}}}{{{attr "id" id}}} type="checkbox"{{{attr "value" token}}}{{{attr "checked" selected}}}{{{attr "disabled" disabled}}}{{{attr "aria-describedby" ../ariaDescribedBy}}}>{{{label}}}</label>
   {{/each}}
   {{#each trailingHiddenInputs}}
     <input type="hidden"{{{attr "name" name}}}{{{attr "value" value}}}>

package/dist/templates/QuestionScaffold.html.hbs

@@ -5,7 +5,7 @@ Inputs:
 - linkId: question link id.
 - header/children/expandedChildren/errors/signature: rendered question sections.
 - isExpandable/isExpanded/expandedName/expandedValue: collapsible question state.
-- summaryLabel/collapseLabel/expandLabel/toggleAction: collapsible submit control state.
+- summaryLabel/collapseLabel/expandLabel/toggleAction/toggleId: collapsible submit control state.
 - actionName: submit action field name.
 - path: renderer node path, when present.
 - customExtensions: source extension values, if supplied.
@@ -17,7 +17,7 @@ Inputs:
       <input type="hidden"{{{attr "name" expandedName}}}{{{attr "value" expandedValue}}}>
     {{/if}}
     <details{{{attr "data-fb-collapsible" linkId}}}{{{attr "open" isExpanded}}}>
-      <summary>{{#if toggleAction}}<button type="submit"{{{attr "name" actionName}}}{{{attr "value" toggleAction}}}>{{summaryLabel}}</button>{{else}}{{summaryLabel}}{{/if}}</summary>
+      <summary>{{#if toggleAction}}<button type="submit"{{{attr "id" toggleId}}}{{{attr "name" actionName}}}{{{attr "value" toggleAction}}}>{{summaryLabel}}</button>{{else}}{{summaryLabel}}{{/if}}</summary>
       {{{expandedChildren}}}
     </details>
     {{{errors}}}

package/dist/templates/RadioButtonList.html.hbs

@@ -3,7 +3,7 @@ Template: RadioButtonList
 
 Inputs:
 - id: fieldset id.
-- options: items with token, label, checked, and disabled.
+- options: items with id, token, label, checked, and disabled.
 - selectedOption: current selected option state.
 - hiddenValue: hidden mirror value for disabled or preserved selections.
 - baselineName/baselineValue: hidden original value for protected selection state.
@@ -21,7 +21,7 @@ Inputs:
     <input type="hidden"{{{attr "name" baselineName}}}{{{attr "value" baselineValue}}}>
   {{/if}}
   {{#each options}}
-    <label><input{{{fieldAttributes ..}}} type="radio"{{{attr "value" token}}}{{{attr "checked" checked}}}{{{attr "disabled" disabled}}}{{{attr "aria-describedby" ../ariaDescribedBy}}}>{{{label}}}</label>
+    <label><input{{{fieldAttributes ..}}}{{{attr "id" id}}} type="radio"{{{attr "value" token}}}{{{attr "checked" checked}}}{{{attr "disabled" disabled}}}{{{attr "aria-describedby" ../ariaDescribedBy}}}>{{{label}}}</label>
   {{/each}}
   {{{customOptionForm}}}
 </fieldset>

package/dist/templates/Table.html.hbs

@@ -4,7 +4,7 @@ Template: Table
 Inputs:
 - hasRowHeader: true when rows need a header column.
 - columns: column items with token, content, errors, width, widthStyle, and isLoading.
-- rows: row items with token, content, errors, cells, remove action fields, and isLoading.
+- rows: row items with token, content, errors, cells, remove action fields, removeId, and isLoading.
 - rows[].cells: cell items with token and content.
 --}}
 <table>
@@ -26,7 +26,7 @@ Inputs:
             {{{content}}}
             {{{errors}}}
             {{#if removeAction}}
-              <button type="submit"{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{{removeLabelHtml}}}</button>
+              <button type="submit"{{{attr "id" removeId}}}{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{{removeLabelHtml}}}</button>
             {{/if}}
           </th>
         {{/if}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formbox/htmx",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Server-rendered HTMX HTML renderer for Formbox FHIR Questionnaires",
   "private": false,
   "type": "module",
@@ -26,24 +26,22 @@
     "fhirpath": "^4.6.0",
     "handlebars": "^4.7.9",
     "mobx": "^6.15.0",
-    "mobx-react-lite": "^4.1.1",
     "mobx-utils": "^6.1.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "@formbox/fhir": "0.4.0",
-    "@formbox/renderer": "0.4.0",
-    "@formbox/theme": "0.4.0",
-    "@formbox/strings": "0.4.0"
+    "preact": "^10.29.2",
+    "preact-render-to-string": "^6.7.0",
+    "@formbox/fhir": "0.4.1",
+    "@formbox/strings": "0.4.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",
     "@types/react": "^19.2.8",
-    "@types/react-dom": "^19.2.3",
     "htmx.org": "^2.0.10",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.17",
+    "@formbox/renderer": "0.4.1",
+    "@formbox/theme": "0.4.1"
   },
   "scripts": {
     "build": "tsc -b ./tsconfig.lib.json && vite build",