Follow the click

UiButton.view builds the component's base attributes, including the click Message, and calls toView with them. Button.toView applies the style to those attributes and hands the result to draw, which puts it on the actual element with h.button. Clicking emits Saved to the parent update. The name Saved is just the example's Message name—it does not mean this adapter wrote anything to storage.

toView performs no I/O and holds nothing: it is a pure function from the component's bundles to your markup, run on every render.

Start by adding a class. Then add a non-conflicting attribute if needed. Do not install another OnClick to intercept the component: the resolver rejects competing event owners. Put every resolved bundle on its element, adding your own attributes beside it where you need them:

import * as UiInput from '@foldkit/ui/input'
import { Input, InputSlots } from 'foldkit-mixins-ui'

const ZipStyle = Style.forSlots(InputSlots)({ input: Style.class('zip') })

const zipInput = (h: HtmlBuilder<Message>) =>
  UiInput.view(
    {
      id: 'zip',
      toView: Input.toView([ZipStyle.mixin], { h }, ({ input }) =>
        h.input([...input, h.Autocomplete('off')]),
      ),
    },
    h,
  )