Command Attributes

Many interactive components rely on a lightweight command polyfill that mirrors the proposed HTML command/commandfor attributes. When you render <Dialog.Trigger> or <DropdownMenuTrigger>, kinu adds these attributes so the browser can open the corresponding <dialog> element without extra wiring. The polyfill follows the HTML Command API draft on MDN, bridging support until browsers ship the attribute natively.

Why Commands?

  • Keeps markup declarative—no imperative refs or event handlers to toggle dialogs.
  • Plays nicely with nested components; commands bubble through the DOM so any child can trigger its parent dialog.
  • Works server-side because the attributes exist in the HTML.

Using Commands Manually

Commands install automatically the first time any dialog, dropdown, or sheet component renders. If you build custom triggers, just apply the attributes on your markup and the polyfill will handle the rest:

<button command="show-modal" commandfor="my-dialog">Open</button>
<dialog id="my-dialog">...</dialog>

Components such as Dialog, DropdownMenu, Drawer, Sheet, and Combobox also install the focus helpers used by dropdown-style overlays, so there is no separate setup step.

Available Commands

  • show-modal — calls showModal() on a dialog element.
  • show — calls show() on a dialog, used by dropdown style menus.
  • close — closes the target dialog.

Swipeable Overlays

Drawer and the mobile="drawer" variants of Popover, DropdownMenu and ContextMenu install a shared installSwipe helper alongside the command polyfill. On touch devices the <dialog> itself becomes a CSS scroll-snap container — a ::before pseudo acts as the transparent dismiss rail and background-attachment: local paints the panel surface, so there are no wrapper elements in the DOM. The helper only touches the scroller at the edges: it glides the panel up on open (beforetoggle) and closes the dialog once a dismiss gesture settles at scrollTop 0 (scrollend).

CSS opts a dialog in by setting --swipe: 1 inside a touch media query, so the same markup renders a transform-animated overlay on desktop and a gesture-driven one on touch with no branching in JavaScript.

Commands dispatch as CustomEvents so you can intercept them if you need custom behavior:

document.addEventListener('kinu-command', (event) => {
  // event.detail: {command: string, target: HTMLElement}
});