<baht-workflow>

The L2 engine: multi-step wizard with declarative rules (show/hide/skip/compute). Owns Next/Back/Submit.

Two-step wizard

Toggle "company" off → billing step is skipped. Author rules like this in the Builder.

<baht-workflow show-steps="true"></baht-workflow>

<script>
  const el = document.querySelector('baht-workflow');
  el.workflow = {
    "workflow_id": "signup",
    "forms": [
      {
        "form_id": "account",
        "form_name": "account",
        "order": 1,
        "fields": [
          {
            "order": 1,
            "type": "text",
            "key": "email",
            "label": "Email",
            "required": true,
            "value": ""
          },
          {
            "order": 2,
            "type": "toggle",
            "key": "company",
            "label": "Signing up as a company",
            "value": false
          }
        ]
      },
      {
        "form_id": "billing",
        "form_name": "billing",
        "order": 2,
        "fields": [
          {
            "order": 1,
            "type": "text",
            "key": "taxId",
            "label": "Tax ID",
            "value": ""
          }
        ]
      }
    ],
    "rules": [
      {
        "id": "skip-billing",
        "when": {
          "field": "account.company",
          "op": "eq",
          "value": false
        },
        "then": [
          {
            "action": "skipForm",
            "target": {
              "form": "billing"
            }
          }
        ]
      }
    ]
  };
</script>

Props

Name	Type	Default	Description
`workflow`JS	`WorkflowDefinition`	`—`	{ workflow_id, forms[], rules[] }
`value`JS	`NestedData`	`{}`	Nested per-form data
`registry`JS	`Registry`	`{}`	Formatters / validators / rules
`validate-gate`	`boolean`	`true`	Block Next while invalid
`next-label`	`string \| undefined`	`'Next'`	Next button text
`submit-label`	`string \| undefined`	`'Submit'`	Submit button text
`back-label`	`string \| undefined`	`'Back'`	Back button text
`show-back`	`boolean`	`true`	Show Back button (show-back="false" hides it)
`flags`JS	`FeatureFlags`	`{}`	Feature-flag values (spec 01 §12): flag-off steps, fields and rules vanish
`show-steps`	`boolean`	`false`	Render a <baht-steps> progress indicator above the current form
`steps-variant`	`'default' \| 'sidebar'`	`'default'`	'default' horizontal markers, or 'sidebar' vertical nav list
`currentFormName`JS	`string \| null`	`—`

Methods

getData()
setValue()
next()
approve()
reject()
back()
gotoStart()

Method	Notes
`getData()`	nested data, `{ [form_name]: { [key]: value } }`, skipped steps cleared
`setValue(form_name, patch)`	merge values into one step (prefill from the server, a host-computed field)
`next()` / `back()`	same as the buttons — `next()` validates first (blocked while `validate-gate` and invalid), then emits `baht-next` or, at the end, `baht-submit`; on an approval step it approves
`gotoStart()`	jump back to the first visible step
`approve()` / `reject()`	resolve an approval step (spec 06) — the runtime advances or stops accordingly
`currentFormName`	getter: `form_name` of the visible step, or `null` before the first render

Events

Event	detail	Description
`baht-data-change`	`{ data }`	Any data changed
`baht-next`	`{ form_name, order, valid, errors[], data }`	Next pressed
`baht-step-change`	`{ form_name, order, direction }`	Step navigation
`baht-nav-blocked`	CustomEvent	Next resolved to no visible step.
`baht-submit`	`{ valid, errors[], data }`	Submit pressed
`baht-complete`	`{ data }`	Workflow finished
`baht-approve`	CustomEvent	An approval step was approved.
`baht-reject`	CustomEvent	An approval step was rejected.
`name`	CustomEvent