@formbox/htmx 0.4.3 → 0.4.4

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export declare function actionValue(kind: ActionKind, path: NodePath): string;
 export declare type AddActionProperties = {
     readonly actionName: string;
     readonly addAction?: string | undefined;
+    readonly addId?: string | undefined;
     readonly addLabel: string;
     readonly count?: number | undefined;
     readonly countName?: string | undefined;
@@ -98,6 +99,7 @@ export declare type CheckboxListTemplateProperties = Omit<FieldTemplatePropertie
 };
 
 export declare type CheckboxOptionTemplateItem = TemplateOptionItem & {
+    readonly id: string;
     readonly selected: boolean;
     readonly disabled?: boolean | undefined;
     readonly hiddenInput?: HiddenTemplateInput | undefined;
@@ -114,6 +116,7 @@ export declare type CollapsibleActionProperties = {
     readonly expandedName?: string | undefined;
     readonly expandLabel?: string | undefined;
     readonly toggleAction?: string | undefined;
+    readonly toggleId?: string | undefined;
 };
 
 export declare function compileTemplate<TProperties extends TemplateProperties>(source: TemplateSource<TProperties>): Template<TProperties>;
@@ -125,8 +128,10 @@ export declare function countName(path: NodePath): string;
 export declare type CustomOptionFormTemplateProperties = Omit<TemplateBase<CustomOptionFormProperties>, "content" | "errors"> & {
     readonly actionName: string;
     readonly cancelLabel: string;
+    readonly cancelId?: string | undefined;
     readonly content: string;
     readonly errors?: string | undefined;
+    readonly submitId?: string | undefined;
     readonly submitLabel: string;
 };
 
@@ -171,6 +176,7 @@ export declare function fieldAttributes(path: NodePath | undefined, field: Answe
 declare type FieldTemplateProperties<TProperties> = TemplateBase<TProperties> & TemplateFieldAttributes;
 
 export declare type FileInputTemplateProperties = FieldTemplateProperties<FileInputProperties> & {
+    readonly clearId?: string | undefined;
     readonly clearLabel: string;
     readonly hiddenValue?: string | undefined;
     readonly clearAction: boolean;
@@ -180,6 +186,7 @@ export declare type FileInputTemplateProperties = FieldTemplateProperties<FileIn
 
 export declare type FlyoverTemplateProperties = Omit<TemplateBase<FlyoverProperties>, "children"> & {
     readonly ariaLabel: string;
+    readonly buttonId?: string | undefined;
     readonly children: string;
 };
 
@@ -227,6 +234,7 @@ export declare type HeaderTemplateProperties = Omit<TemplateBase<HeaderPropertie
 
 export declare type HelpTemplateProperties = Omit<TemplateBase<HelpProperties>, "children"> & {
     readonly ariaLabel: string;
+    readonly buttonId?: string | undefined;
     readonly children: string;
 };
 
@@ -272,6 +280,7 @@ export declare type LabelTemplateProperties = Omit<TemplateBase<LabelProperties>
     readonly flyover?: string | undefined;
     readonly media: string;
     readonly supportHyperlinks?: ReadonlyArray<NonNullable<LabelProperties["supportHyperlinks"]>[number] & {
+        readonly id: string;
         readonly labelHtml: string;
     }>;
 };
@@ -279,6 +288,7 @@ export declare type LabelTemplateProperties = Omit<TemplateBase<LabelProperties>
 export declare const LANGUAGE_FIELD = "fb[language]";
 
 export declare type LanguageSelectorTemplateProperties = Omit<TemplateBase<LanguageSelectorProperties>, "options"> & {
+    readonly id?: string | undefined;
     readonly name: string;
     readonly options: ReadonlyArray<LanguageSelectorProperties["options"][number] & {
         readonly selected: boolean;
@@ -291,6 +301,7 @@ export declare type LaunchContext = Record<string, unknown>;
 
 export declare type LegalTemplateProperties = Omit<TemplateBase<LegalProperties>, "children"> & {
     readonly ariaLabel: string;
+    readonly buttonId?: string | undefined;
     readonly children: string;
 };
 
@@ -302,7 +313,7 @@ export declare function loadDefaultTemplates(): Promise<RequiredTemplates>;
 
 export declare function loadTemplates(directory: string | URL): Promise<Templates>;
 
-export declare function mediaHtml(attachment: Attachment | undefined, fallbackLabel: string): string;
+export declare function mediaHtml(attachment: Attachment | undefined, fallbackLabel: string, id?: string | undefined): string;
 
 export declare type MultiSelectInputTemplateProperties = Omit<FieldTemplateProperties<MultiSelectInputProperties>, "customOptionForm" | "options" | "selectedOptions" | "specifyOtherOption"> & {
     readonly baselineName?: string | undefined;
@@ -345,6 +356,8 @@ export declare function optionValueName(path: NodePath, token: string): string;
 
 export declare const PAGE_FIELD = "fb[page]";
 
+export declare function pathControlId(token: string, path: NodePath | undefined, ...parts: Array<string | number | undefined>): string | undefined;
+
 export declare type ProcessResult = {
     readonly submitted: false;
 } | {
@@ -405,6 +418,7 @@ export declare type RadioButtonTemplateProperties = Omit<FieldTemplateProperties
 };
 
 export declare type RadioOptionTemplateItem = TemplateOptionItem & {
+    readonly id: string;
     readonly checked: boolean;
     readonly disabled?: boolean | undefined;
 };
@@ -415,6 +429,7 @@ export declare type RemoveActionProperties = {
     readonly actionName: string;
     readonly linkId?: string | undefined;
     readonly removeAction?: string | undefined;
+    readonly removeId?: string | undefined;
     readonly removeLabel: string;
 };
 
@@ -468,6 +483,8 @@ export declare type SliderInputTemplateProperties = FieldTemplateProperties<Slid
 
 export declare type SpinnerInputTemplateProperties = FieldTemplateProperties<SpinnerInputProperties> & NumberInputViewProperties;
 
+export declare function stableId(base: string | undefined, ...parts: Array<string | number | undefined>): string | undefined;
+
 export declare type StackTemplateProperties = Omit<TemplateBase<StackProperties>, "children"> & {
     readonly children: string;
 };
@@ -485,7 +502,7 @@ export declare type TabContainerTemplateProperties = Omit<TemplateBase<TabContai
 
 export declare function tableColumn(column: TableColumn, renderHtml: RenderHtml): TemplateTableColumn;
 
-export declare function tableRow(row: TableRow, renderHtml: RenderHtml, strings: Strings): TemplateTableRow;
+export declare function tableRow(row: TableRow, renderHtml: RenderHtml, strings: Strings, token: string): TemplateTableRow;
 
 export declare type TableTemplateProperties = Omit<TemplateBase<TableProperties>, "columns" | "rows"> & {
     readonly hasRowHeader: boolean;
@@ -508,7 +525,9 @@ export declare interface TemplateFieldAttributes {
 }
 
 export declare type TemplateFormPagination = Omit<FormPagination, "onNext" | "onPrev"> & {
+    readonly nextId?: string | undefined;
     readonly nextLabel: string;
+    readonly previousId?: string | undefined;
     readonly previousLabel: string;
 };
 

package/dist/index.js

@@ -35921,6 +35921,7 @@ const Form$1 = observer(function Form2({
   const languageSelector = store.availableLanguages.length > 1 && store.language && onLanguageChange ? /* @__PURE__ */ jsx(
     ThemedLanguageSelector,
     {
+      id: buildId(store.token, "language"),
       value: store.language,
       onChange: (value) => onLanguageChange(value),
       options: store.availableLanguages.map((language) => ({
@@ -35944,6 +35945,7 @@ const Form$1 = observer(function Form2({
   return /* @__PURE__ */ jsx(
     ThemedForm,
     {
+      id: store.token,
       title: store.title,
       description: store.description,
       languageSelector,
@@ -36550,9 +36552,9 @@ function DateTimeDisplay({ value }) {
 function TimeDisplay({ value }) {
   return /* @__PURE__ */ jsx(Fragment, { children: value });
 }
-function UrlDisplay({ value }) {
+function UrlDisplay({ id: id2, value }) {
   const { Link: Link2 } = useTheme();
-  return /* @__PURE__ */ jsx(Link2, { href: value, target: "_blank", rel: "noreferrer", children: value });
+  return /* @__PURE__ */ jsx(Link2, { id: id2, href: value, target: "_blank", rel: "noreferrer", children: value });
 }
 function ReferenceDisplay({
   value
@@ -36597,6 +36599,7 @@ const VALUE_DISPLAY_BY_TYPE = {
   attachment: AttachmentDisplay
 };
 function ValueDisplay({
+  id: id2,
   type,
   value
 }) {
@@ -36605,7 +36608,7 @@ function ValueDisplay({
     return strings2.value.unanswered;
   } else {
     const Component = VALUE_DISPLAY_BY_TYPE[type];
-    return /* @__PURE__ */ jsx(Component, { value });
+    return /* @__PURE__ */ jsx(Component, { id: id2, value });
   }
 }
 const LEGACY_UNIT_TOKEN_PREFIX = "__legacy_unit__";
@@ -36647,12 +36650,20 @@ const QuantityUnitInput = observer(function QuantityUnitInput2({
       token: entry.token,
       disabled: entry.token.startsWith(LEGACY_UNIT_TOKEN_PREFIX),
       exclusive: false,
-      label: /* @__PURE__ */ jsx(OptionDisplay2, { children: /* @__PURE__ */ jsx(ValueDisplay, { type: "coding", value: entry.coding }) })
+      label: /* @__PURE__ */ jsx(OptionDisplay2, { children: /* @__PURE__ */ jsx(
+        ValueDisplay,
+        {
+          id: buildId(id2, "option", entry.token, "display"),
+          type: "coding",
+          value: entry.coding
+        }
+      ) })
     }));
-  }, [OptionDisplay2, unitSelection.entries]);
+  }, [OptionDisplay2, id2, unitSelection.entries]);
   const customForm = isCustomFormActive && /* @__PURE__ */ jsx(
     CustomForm,
     {
+      id: buildId(id2, "custom-form"),
       content: answer.question.unitOption.effectiveUnitOpen === "optionsOrType" ? /* @__PURE__ */ jsx(
         CodingInput,
         {
@@ -37129,6 +37140,7 @@ const SingleDropdownSelectControl = observer(
     const customOptionForm = isCustomActive && store.customOptionFormState ? /* @__PURE__ */ jsx(
       CustomOptionForm2,
       {
+        id: buildId(id2, "custom-form"),
         content: /* @__PURE__ */ jsx(
           Control,
           {
@@ -37148,11 +37160,18 @@ const SingleDropdownSelectControl = observer(
     const options = useMemo(() => {
       return store.filteredOptions.map((entry) => ({
         token: entry.token,
-        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: entry.prefix, media: entry.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: entry.answerType, value: entry.value }) }),
+        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: entry.prefix, media: entry.media, children: /* @__PURE__ */ jsx(
+          ValueDisplay,
+          {
+            id: buildId(id2, "option", entry.token, "display"),
+            type: entry.answerType,
+            value: entry.value
+          }
+        ) }),
         disabled: entry.disabled,
         exclusive: entry.exclusive === true
       }));
-    }, [OptionDisplay2, store.filteredOptions]);
+    }, [OptionDisplay2, id2, store.filteredOptions]);
     const specifyOtherOption = store.allowCustom ? {
       token: store.specifyOtherToken,
       label: node.openLabel ?? strings2.selection.specifyOther,
@@ -37170,7 +37189,14 @@ const SingleDropdownSelectControl = observer(
         token: selection.token,
         disabled: selection.disabled,
         exclusive: selection.exclusive === true,
-        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: selection.prefix, media: selection.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: selection.answerType, value: selection.value }) })
+        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: selection.prefix, media: selection.media, children: /* @__PURE__ */ jsx(
+          ValueDisplay,
+          {
+            id: buildId(id2, "selected", selection.token, "display"),
+            type: selection.answerType,
+            value: selection.value
+          }
+        ) })
       };
     })();
     return /* @__PURE__ */ jsx(
@@ -37204,7 +37230,19 @@ const MultiDropdownSelectControl = observer(
     const CustomControl = getValueControl(store.customType);
     const selectedOptions = store.selectedOptions.map((selection) => ({
       token: selection.token,
-      label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: selection.prefix, media: selection.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: selection.answerType, value: selection.value }) }),
+      label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: selection.prefix, media: selection.media, children: /* @__PURE__ */ jsx(
+        ValueDisplay,
+        {
+          id: buildId(
+            selection.answer.token,
+            "selected",
+            selection.token,
+            "display"
+          ),
+          type: selection.answerType,
+          value: selection.value
+        }
+      ) }),
       ariaDescribedBy: getIssueErrorId(selection.answer),
       errors: renderErrors(selection.answer),
       disabled: selection.disabled,
@@ -37214,6 +37252,7 @@ const MultiDropdownSelectControl = observer(
     const customOptionForm = formState ? /* @__PURE__ */ jsx(
       CustomOptionForm2,
       {
+        id: buildId(formState.answer.token, "custom-form"),
         content: /* @__PURE__ */ jsx(
           CustomControl,
           {
@@ -37235,9 +37274,22 @@ const MultiDropdownSelectControl = observer(
         token: entry.token,
         disabled: entry.disabled,
         exclusive: entry.exclusive === true,
-        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: entry.prefix, media: entry.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: entry.answerType, value: entry.value }) })
+        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: entry.prefix, media: entry.media, children: /* @__PURE__ */ jsx(
+          ValueDisplay,
+          {
+            id: buildId(
+              node.token,
+              "multi-select",
+              "option",
+              entry.token,
+              "display"
+            ),
+            type: entry.answerType,
+            value: entry.value
+          }
+        ) })
       }));
-    }, [OptionDisplay2, store.filteredOptions]);
+    }, [OptionDisplay2, node.token, store.filteredOptions]);
     const specifyOtherOption = store.allowCustom ? {
       token: store.specifyOtherToken,
       label: node.openLabel ?? strings2.selection.specifyOther,
@@ -37276,7 +37328,19 @@ const MultiListSelectControl = observer(function MultiListSelectControl2({ node
   const CustomControl = getValueControl(store.customType);
   const selectedOptions = store.selectedOptions.map((selection) => ({
     token: selection.token,
-    label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: selection.prefix, media: selection.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: selection.answerType, value: selection.value }) }),
+    label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: selection.prefix, media: selection.media, children: /* @__PURE__ */ jsx(
+      ValueDisplay,
+      {
+        id: buildId(
+          selection.answer.token,
+          "selected",
+          selection.token,
+          "display"
+        ),
+        type: selection.answerType,
+        value: selection.value
+      }
+    ) }),
     ariaDescribedBy: getIssueErrorId(selection.answer),
     errors: renderErrors(selection.answer),
     disabled: selection.disabled,
@@ -37289,6 +37353,7 @@ const MultiListSelectControl = observer(function MultiListSelectControl2({ node
   const customOptionForm = formState ? /* @__PURE__ */ jsx(
     CustomOptionForm2,
     {
+      id: buildId(formState.answer.token, "custom-form"),
       content: /* @__PURE__ */ jsx(
         CustomControl,
         {
@@ -37310,9 +37375,22 @@ const MultiListSelectControl = observer(function MultiListSelectControl2({ node
       token: entry.token,
       disabled: entry.disabled,
       exclusive: entry.exclusive === true,
-      label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: entry.prefix, media: entry.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: entry.answerType, value: entry.value }) })
+      label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: entry.prefix, media: entry.media, children: /* @__PURE__ */ jsx(
+        ValueDisplay,
+        {
+          id: buildId(
+            node.token,
+            "multi-select",
+            "option",
+            entry.token,
+            "display"
+          ),
+          type: entry.answerType,
+          value: entry.value
+        }
+      ) })
     }));
-  }, [OptionDisplay2, store.filteredOptions]);
+  }, [OptionDisplay2, node.token, store.filteredOptions]);
   const specifyOtherOption = store.allowCustom ? {
     token: store.specifyOtherToken,
     label: node.openLabel ?? strings2.selection.specifyOther,
@@ -37356,6 +37434,7 @@ const SingleListSelectControl = observer(
     const customOptionForm = isCustomActive && store.customOptionFormState ? /* @__PURE__ */ jsx(
       CustomOptionForm2,
       {
+        id: buildId(id2, "custom-form"),
         content: /* @__PURE__ */ jsx(
           Control,
           {
@@ -37375,11 +37454,18 @@ const SingleListSelectControl = observer(
     const options = useMemo(() => {
       return store.filteredOptions.map((entry) => ({
         token: entry.token,
-        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: entry.prefix, media: entry.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: entry.answerType, value: entry.value }) }),
+        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: entry.prefix, media: entry.media, children: /* @__PURE__ */ jsx(
+          ValueDisplay,
+          {
+            id: buildId(id2, "option", entry.token, "display"),
+            type: entry.answerType,
+            value: entry.value
+          }
+        ) }),
         disabled: entry.disabled,
         exclusive: entry.exclusive === true
       }));
-    }, [OptionDisplay2, store.filteredOptions]);
+    }, [OptionDisplay2, id2, store.filteredOptions]);
     const specifyOtherOption = store.allowCustom ? {
       token: store.specifyOtherToken,
       label: node.openLabel ?? strings2.selection.specifyOther,
@@ -37397,7 +37483,14 @@ const SingleListSelectControl = observer(
         token: selection.token,
         disabled: selection.disabled,
         exclusive: selection.exclusive === true,
-        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: selection.prefix, media: selection.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: selection.answerType, value: selection.value }) })
+        label: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: selection.prefix, media: selection.media, children: /* @__PURE__ */ jsx(
+          ValueDisplay,
+          {
+            id: buildId(id2, "selected", selection.token, "display"),
+            type: selection.answerType,
+            value: selection.value
+          }
+        ) })
       };
     })();
     return /* @__PURE__ */ jsx(
@@ -37875,7 +37968,14 @@ const SelectionTableControl = observer(function SelectionTableControl2({
       })),
       rows: node.table.optionAxis.map((option) => ({
         token: option.token,
-        content: /* @__PURE__ */ jsx(Label2, { id: buildId(node.token, option.token), isExpanded: true, children: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: option.prefix, media: option.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: option.answerType, value: option.value }) }) }),
+        content: /* @__PURE__ */ jsx(Label2, { id: buildId(node.token, option.token), isExpanded: true, children: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: option.prefix, media: option.media, children: /* @__PURE__ */ jsx(
+          ValueDisplay,
+          {
+            id: buildId(node.token, option.token, "display"),
+            type: option.answerType,
+            value: option.value
+          }
+        ) }) }),
         cells: node.table.questions.map((question) => ({
           token: buildId(question.token, option.token),
           content: /* @__PURE__ */ jsx(
@@ -37895,7 +37995,14 @@ const SelectionTableControl = observer(function SelectionTableControl2({
     {
       columns: node.table.optionAxis.map((option) => ({
         token: option.token,
-        content: /* @__PURE__ */ jsx(Label2, { id: buildId(node.token, option.token), isExpanded: true, children: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: option.prefix, media: option.media, children: /* @__PURE__ */ jsx(ValueDisplay, { type: option.answerType, value: option.value }) }) })
+        content: /* @__PURE__ */ jsx(Label2, { id: buildId(node.token, option.token), isExpanded: true, children: /* @__PURE__ */ jsx(OptionDisplay2, { prefix: option.prefix, media: option.media, children: /* @__PURE__ */ jsx(
+          ValueDisplay,
+          {
+            id: buildId(node.token, option.token, "display"),
+            type: option.answerType,
+            value: option.value
+          }
+        ) }) })
       })),
       rows: node.table.questions.map((question) => ({
         token: question.token,
@@ -59512,6 +59619,24 @@ function signatureName(path2) {
 function actionValue(kind, path2) {
   return `${kind}${pathParts(path2).map((part) => `[${part}]`).join("")}`;
 }
+function stableId(base, ...parts) {
+  if (base === void 0) {
+    return void 0;
+  }
+  return [base, ...parts].filter((part) => part !== void 0).map(String).join("__");
+}
+function pathControlId(token, path2, ...parts) {
+  if (path2 === void 0) {
+    return void 0;
+  }
+  return stableId(
+    token,
+    ...path2.flatMap(
+      (segment) => segment.index === void 0 ? [segment.linkId] : [segment.linkId, segment.index]
+    ),
+    ...parts
+  );
+}
 function lastLinkId(path2) {
   return path2.at(-1)?.linkId ?? "";
 }
@@ -59536,7 +59661,7 @@ function isDefined(value) {
 function isPreservedOptionToken$1(token) {
   return token.includes("__custom__") || token.includes("__legacy__");
 }
-function mediaHtml(attachment, fallbackLabel) {
+function mediaHtml(attachment, fallbackLabel, id2) {
   if (attachment === void 0) {
     return "";
   }
@@ -59550,12 +59675,12 @@ function mediaHtml(attachment, fallbackLabel) {
     return `<img${attribute("src", source)}${attribute("alt", label)}>`;
   }
   if (contentType?.startsWith("audio/")) {
-    return `<audio controls${attribute("src", source)}></audio>`;
+    return `<audio controls${attribute("id", id2)}${attribute("src", source)}></audio>`;
   }
   if (contentType?.startsWith("video/")) {
-    return `<video controls${attribute("src", source)}></video>`;
+    return `<video controls${attribute("id", id2)}${attribute("src", source)}></video>`;
   }
-  return `<a${attribute("href", source)} target="_blank" rel="noreferrer">${escapeHtml$1(label)}</a>`;
+  return `<a${attribute("id", id2)}${attribute("href", source)} target="_blank" rel="noreferrer">${escapeHtml$1(label)}</a>`;
 }
 function formFieldsTemplate(properties) {
   const shortTextStyle = properties.children.includes("data-fb-label-short") ? "<style>[data-fb-label-short]{display:none}@media (max-width:40rem){[data-fb-label-full]{display:none}[data-fb-label-short]{display:inline}}</style>" : void 0;
@@ -59571,7 +59696,7 @@ function formFieldsTemplate(properties) {
     properties.after ?? "",
     properties.signature ?? "",
     renderPagination(properties),
-    `<button type="submit" name="${ACTION_FIELD}" value="submit">${escapeHtml$1(properties.submitLabel)}</button>`
+    `<button type="submit"${attribute("id", stableId(properties.id, "submit"))} name="${ACTION_FIELD}" value="submit">${escapeHtml$1(properties.submitLabel)}</button>`
   ].join("");
 }
 function fieldAttributes$1(path2, field) {
@@ -59682,7 +59807,7 @@ function tableColumn(column, renderHtml) {
     widthStyle: column.width ? `width:${column.width}` : void 0
   };
 }
-function tableRow(row, renderHtml, strings2) {
+function tableRow(row, renderHtml, strings2, token) {
   const path2 = row.path;
   return {
     token: row.token,
@@ -59694,6 +59819,7 @@ function tableRow(row, renderHtml, strings2) {
     actionName: ACTION_FIELD,
     linkId: path2 ? lastLinkId(path2) : void 0,
     removeAction: row.onRemove !== void 0 && row.canRemove === true && path2 ? actionValue("remove-group", path2) : void 0,
+    removeId: pathControlId(token, path2, "remove-group"),
     removeLabel: strings2.group.removeSection,
     removeLabelHtml: escapeHtml$1(strings2.group.removeSection)
   };
@@ -59717,9 +59843,9 @@ function renderPagination(properties) {
   }
   return [
     "<nav>",
-    pagination.disabledPrev ? "" : `<button type="submit" name="${ACTION_FIELD}" value="page-prev">${escapeHtml$1(pagination.previousLabel)}</button>`,
+    pagination.disabledPrev ? "" : `<button type="submit"${attribute("id", pagination.previousId)} name="${ACTION_FIELD}" value="page-prev">${escapeHtml$1(pagination.previousLabel)}</button>`,
     `<span>${String(pagination.current)} / ${String(pagination.total)}</span>`,
-    pagination.disabledNext ? "" : `<button type="submit" name="${ACTION_FIELD}" value="page-next">${escapeHtml$1(pagination.nextLabel)}</button>`,
+    pagination.disabledNext ? "" : `<button type="submit"${attribute("id", pagination.nextId)} name="${ACTION_FIELD}" value="page-next">${escapeHtml$1(pagination.nextLabel)}</button>`,
     "</nav>"
   ].join("");
 }
@@ -61163,7 +61289,7 @@ function stripHtmlTag(ssr) {
   return ssr.replaceAll(/<x-html\b[^>]*>/gu, "").replaceAll("</x-html>", "");
 }
 function AnswerList(properties) {
-  const { templates } = useHtmxTheme();
+  const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
   const strings2 = useStrings();
   const children = Children.toArray(properties.children);
@@ -61173,6 +61299,7 @@ function AnswerList(properties) {
     children: renderHtml(properties.children),
     actionName: ACTION_FIELD,
     addAction: properties.onAdd !== void 0 && properties.canAdd && path2 ? actionValue("add-answer", path2) : void 0,
+    addId: pathControlId(token, path2, "add-answer"),
     addLabel: strings2.selection.addAnother,
     count: path2 ? children.length : void 0,
     countName: path2 ? countName(path2) : void 0,
@@ -61181,7 +61308,7 @@ function AnswerList(properties) {
   });
 }
 function AnswerScaffold(properties) {
-  const { templates } = useHtmxTheme();
+  const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
   const strings2 = useStrings();
   const path2 = properties.path;
@@ -61193,6 +61320,7 @@ function AnswerScaffold(properties) {
     actionName: ACTION_FIELD,
     linkId: path2 ? lastLinkId(path2) : void 0,
     removeAction: properties.onRemove !== void 0 && properties.canRemove && path2 ? actionValue("remove-answer", path2) : void 0,
+    removeId: pathControlId(token, path2, "remove-answer"),
     removeLabel: strings2.group.removeSection
   });
 }
@@ -61262,6 +61390,7 @@ function CheckboxList(properties) {
     orientation: properties.orientation,
     options: options.map((option) => ({
       ...option,
+      id: stableId(properties.id, "option", option.token) ?? option.token,
       selected: selectedTokens.has(option.token),
       disabled: Boolean(properties.disabled) || option.disabled,
       hiddenInput: name && preservedByToken.has(option.token) ? { name, value: option.token } : void 0
@@ -61281,15 +61410,19 @@ function CheckboxList(properties) {
   });
 }
 function CustomOptionForm(properties) {
-  const { templates } = useHtmxTheme();
+  const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
   const strings2 = useStrings();
+  const id2 = properties.id ?? stableId(token, "custom-option-form");
   return renderTemplate(templates.CustomOptionForm, {
+    id: id2,
     canSubmit: properties.canSubmit,
     actionName: ACTION_FIELD,
     cancelLabel: strings2.dialog.cancel,
+    cancelId: stableId(id2, "cancel"),
     content: renderHtml(properties.content),
     errors: renderHtml(properties.errors),
+    submitId: stableId(id2, "submit"),
     submitLabel: strings2.dialog.submit
   });
 }
@@ -61370,6 +61503,7 @@ function FileInput(properties) {
     disabled: properties.disabled,
     accept: properties.accept,
     clearLabel: strings2.file.clearAction,
+    clearId: stableId(properties.id, "clear"),
     hiddenValue: properties.value && attributes.name ? JSON.stringify(properties.value) : void 0,
     clearAction: properties.value !== void 0 && attributes.name !== void 0 && !properties.disabled,
     dataLinkId: attributes["data-fb-link-id"],
@@ -61383,6 +61517,7 @@ function Flyover(properties) {
   const strings2 = useStrings();
   return renderTemplate(templates.Flyover, {
     id: properties.id,
+    buttonId: stableId(properties.id, "button"),
     ariaLabel: strings2.aria.flyover,
     children: renderHtml(properties.children)
   });
@@ -61396,18 +61531,22 @@ function Footer(properties) {
   });
 }
 function Form(properties) {
-  const { action: action2, hiddenFields, templates } = useHtmxTheme();
+  const { action: action2, hiddenFields, templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
   const strings2 = useStrings();
+  const id2 = properties.id ?? token;
   const pagination = properties.pagination ? {
     current: properties.pagination.current,
     total: properties.pagination.total,
     disabledPrev: properties.pagination.disabledPrev,
     disabledNext: properties.pagination.disabledNext,
+    nextId: stableId(id2, "pagination", "next"),
     nextLabel: strings2.pagination.next,
+    previousId: stableId(id2, "pagination", "previous"),
     previousLabel: strings2.pagination.previous
   } : void 0;
   const formProperties = {
+    id: id2,
     title: properties.title,
     description: properties.description,
     customExtensions: properties.customExtensions,
@@ -61423,12 +61562,12 @@ function Form(properties) {
   const fields = [hiddenFields, formFieldsTemplate(formProperties)].join("");
   return renderTemplate(templates.Form, {
     ...formProperties,
-    attributes: defaultAttributes(action2),
+    attributes: { id: id2, ...defaultAttributes(action2) },
     fields
   });
 }
 function GroupList(properties) {
-  const { templates } = useHtmxTheme();
+  const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
   const strings2 = useStrings();
   const groups2 = Children.toArray(properties.children);
@@ -61443,6 +61582,7 @@ function GroupList(properties) {
     children: renderHtml(properties.children),
     actionName: ACTION_FIELD,
     addAction: properties.onAdd !== void 0 && properties.canAdd && path2 ? actionValue("add-group", path2) : void 0,
+    addId: pathControlId(token, path2, "add-group"),
     addLabel: strings2.group.addSection,
     count: path2 ? count : void 0,
     countName: path2 ? countName(path2) : void 0,
@@ -61450,7 +61590,7 @@ function GroupList(properties) {
   });
 }
 function GroupScaffold(properties) {
-  const { templates } = useHtmxTheme();
+  const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
   const strings2 = useStrings();
   const path2 = properties.path;
@@ -61473,8 +61613,10 @@ function GroupScaffold(properties) {
     expandedValue: expandedName$1 ? String(Boolean(properties.isExpanded)) : void 0,
     expandLabel: strings2.collapsible.expand,
     removeAction: properties.onRemove !== void 0 && properties.canRemove && path2 ? actionValue("remove-group", path2) : void 0,
+    removeId: pathControlId(token, path2, "remove-group"),
     removeLabel: strings2.group.removeSection,
     toggleAction,
+    toggleId: pathControlId(token, path2, "toggle-expanded"),
     summaryLabel: properties.isExpanded ? strings2.collapsible.collapse : strings2.collapsible.expand,
     expandedChildren: properties.isExpanded ? renderHtml(properties.children) : ""
   });
@@ -61493,6 +61635,7 @@ function Help(properties) {
   const strings2 = useStrings();
   return renderTemplate(templates.Help, {
     id: properties.id,
+    buttonId: stableId(properties.id, "button"),
     ariaLabel: strings2.aria.help,
     children: renderHtml(properties.children)
   });
@@ -61545,18 +61688,26 @@ function Label(properties) {
     help: renderHtml(properties.help),
     legal: renderHtml(properties.legal),
     flyover: renderHtml(properties.flyover),
-    media: mediaHtml(properties.media, strings2.inputs.attachmentLabel),
+    media: mediaHtml(
+      properties.media,
+      strings2.inputs.attachmentLabel,
+      stableId(properties.id, "media")
+    ),
     ...properties.supportHyperlinks ? {
-      supportHyperlinks: properties.supportHyperlinks.map((link) => ({
-        ...link,
-        labelHtml: escapeHtml$1(link.label || link.href)
-      }))
+      supportHyperlinks: properties.supportHyperlinks.map(
+        (link, index) => ({
+          ...link,
+          id: stableId(properties.id, "support", index) ?? String(index),
+          labelHtml: escapeHtml$1(link.label || link.href)
+        })
+      )
     } : {}
   });
 }
 function LanguageSelector(properties) {
-  const { templates } = useHtmxTheme();
+  const { templates, token } = useHtmxTheme();
   return renderTemplate(templates.LanguageSelector, {
+    id: properties.id ?? stableId(token, "language"),
     value: properties.value,
     name: LANGUAGE_FIELD,
     options: properties.options.map((option) => ({
@@ -61571,6 +61722,7 @@ function Legal(properties) {
   const strings2 = useStrings();
   return renderTemplate(templates.Legal, {
     id: properties.id,
+    buttonId: stableId(properties.id, "button"),
     ariaLabel: strings2.aria.legal,
     children: renderHtml(properties.children)
   });
@@ -61579,6 +61731,7 @@ function Link(properties) {
   const { templates } = useHtmxTheme();
   const renderHtml = useHtml();
   return renderTemplate(templates.Link, {
+    id: properties.id,
     href: properties.href,
     target: properties.target,
     rel: properties.rel,
@@ -61637,6 +61790,7 @@ function MultiSelectInput(properties) {
     baselineName,
     options: options.map((option) => ({
       ...option,
+      id: stableId(properties.id, "option", option.token) ?? option.token,
       selected: selectedTokens.has(option.token),
       disabled: Boolean(properties.disabled) || option.disabled,
       hiddenInput: name && preservedByToken.has(option.token) ? { name, value: option.token } : void 0
@@ -61682,7 +61836,7 @@ function OptionsLoading(properties) {
   });
 }
 function QuestionScaffold(properties) {
-  const { templates } = useHtmxTheme();
+  const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
   const strings2 = useStrings();
   const path2 = properties.path;
@@ -61704,6 +61858,7 @@ function QuestionScaffold(properties) {
     expandedValue: expandedName$1 ? String(Boolean(properties.isExpanded)) : void 0,
     expandLabel: strings2.collapsible.expand,
     toggleAction,
+    toggleId: pathControlId(token, path2, "toggle-expanded"),
     summaryLabel: properties.isExpanded ? strings2.collapsible.collapse : strings2.collapsible.expand,
     expandedChildren: properties.isExpanded ? renderHtml(properties.children) : ""
   });
@@ -61757,6 +61912,7 @@ function RadioButtonList(properties) {
     hiddenValue: (preserveValue || mirrorValue) && selectedToken && attributes.name ? selectedToken : void 0,
     options: options.map((option) => ({
       ...option,
+      id: stableId(properties.id, "option", option.token) ?? option.token,
       checked: option.token === selectedToken,
       disabled: Boolean(properties.disabled) || Boolean(option.disabled)
     })),
@@ -61878,10 +62034,12 @@ function TabContainer(properties) {
   });
 }
 function Table(properties) {
-  const { templates } = useHtmxTheme();
+  const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
   const strings2 = useStrings();
-  const rows = properties.rows.map((row) => tableRow(row, renderHtml, strings2));
+  const rows = properties.rows.map(
+    (row) => tableRow(row, renderHtml, strings2, token)
+  );
   return renderTemplate(templates.Table, {
     columns: properties.columns.map(
       (column) => tableColumn(column, renderHtml)
@@ -61993,6 +62151,7 @@ function renderStoreFields(store, templates, action2) {
   const theme2 = createTheme();
   const htmxTheme = {
     templates,
+    token: store.token,
     hiddenFields: renderHiddenFieldsForStore(store),
     activeTabValue: activeTab,
     action: action2

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.4.4",
   "description": "Server-rendered HTMX HTML renderer for Formbox FHIR Questionnaires",
   "private": false,
   "type": "module",
@@ -30,10 +30,10 @@
     "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"
+    "@formbox/renderer": "0.4.1",
+    "@formbox/strings": "0.4.1",
+    "@formbox/theme": "0.4.1",
+    "@formbox/fhir": "0.4.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",