@formbox/htmx 0.4.3 → 0.5.0

package/dist/index.js

@@ -1,18 +1,43 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useCallback, useState, createElement, Children } from "react";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { createContext, useContext, useMemo, useCallback, useState, createElement, Children } from "preact/compat";
 import bundledStrings from "@formbox/strings";
 import { computed, action, makeObservable, observable, runInAction, override, reaction, comparer, when } from "mobx";
-import { CustomItemExtensionsProvider, useStrings, CustomQuestionnaireExtensionsProvider, StringsContext } from "@formbox/theme";
-import { observer } from "mobx-react-lite";
 import { fromPromise } from "mobx-utils";
 import { R4AttachmentAdapter, R4QuestionnaireItemAdapter, R4QuestionnaireResponseAdapter, R5AttachmentAdapter, R5QuestionnaireItemAdapter, R5QuestionnaireResponseAdapter } from "@formbox/fhir";
 import { readdir, readFile } from "node:fs/promises";
 import path from "node:path";
 import Handlebars from "handlebars";
-import { renderToStaticMarkup } from "react-dom/server.node";
+import { renderToStaticMarkup } from "preact-render-to-string";
+const StringsContext = createContext(
+  void 0
+);
+function useStrings() {
+  const strings2 = useContext(StringsContext);
+  if (strings2 == void 0) {
+    throw new Error("StringsContext.Provider is required");
+  }
+  return strings2;
+}
+const CustomQuestionnaireExtensionsContext = createContext(void 0);
+const CustomItemExtensionsContext = createContext(void 0);
+function CustomQuestionnaireExtensionsProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CustomQuestionnaireExtensionsContext.Provider, { value, children });
+}
+function CustomItemExtensionsProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CustomItemExtensionsContext.Provider, { value, children });
+}
+function observer(component) {
+  return component;
+}
 const ITEM_CONTROLS = [
   // display
   "inline",
@@ -35921,6 +35946,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 +35970,7 @@ const Form$1 = observer(function Form2({
   return /* @__PURE__ */ jsx(
     ThemedForm,
     {
+      id: store.token,
       title: store.title,
       description: store.description,
       languageSelector,
@@ -36550,9 +36577,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 +36624,7 @@ const VALUE_DISPLAY_BY_TYPE = {
   attachment: AttachmentDisplay
 };
 function ValueDisplay({
+  id: id2,
   type,
   value
 }) {
@@ -36605,7 +36633,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 +36675,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 +37165,7 @@ const SingleDropdownSelectControl = observer(
     const customOptionForm = isCustomActive && store.customOptionFormState ? /* @__PURE__ */ jsx(
       CustomOptionForm2,
       {
+        id: buildId(id2, "custom-form"),
         content: /* @__PURE__ */ jsx(
           Control,
           {
@@ -37148,11 +37185,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 +37214,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 +37255,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 +37277,7 @@ const MultiDropdownSelectControl = observer(
     const customOptionForm = formState ? /* @__PURE__ */ jsx(
       CustomOptionForm2,
       {
+        id: buildId(formState.answer.token, "custom-form"),
         content: /* @__PURE__ */ jsx(
           CustomControl,
           {
@@ -37235,9 +37299,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 +37353,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 +37378,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 +37400,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 +37459,7 @@ const SingleListSelectControl = observer(
     const customOptionForm = isCustomActive && store.customOptionFormState ? /* @__PURE__ */ jsx(
       CustomOptionForm2,
       {
+        id: buildId(id2, "custom-form"),
         content: /* @__PURE__ */ jsx(
           Control,
           {
@@ -37375,11 +37479,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 +37508,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 +37993,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 +38020,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 +59644,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 +59686,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 +59700,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 +59721,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 +59832,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 +59844,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 +59868,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 +61314,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 +61324,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 +61333,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 +61345,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 +61415,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 +61435,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 +61528,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 +61542,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 +61556,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 +61587,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 +61607,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 +61615,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 +61638,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 +61660,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 +61713,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 +61747,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 +61756,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 +61815,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 +61861,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 +61883,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 +61937,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 +62059,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 +62176,7 @@ function renderStoreFields(store, templates, action2) {
   const theme2 = createTheme();
   const htmxTheme = {
     templates,
+    token: store.token,
     hiddenFields: renderHiddenFieldsForStore(store),
     activeTabValue: activeTab,
     action: action2