<kaf version="1">

  <!-- kit:button — the house button. Resolution is root-anchored, so a sibling file is named
       `kit:tokens` here exactly as an app would name it. -->

  <import src="kit:tokens"/>

  <private>
    <style name="base" radius="9" pad="10 16" size="14" weight="700" align="center">
      <pressed scale="0.97"/>
      <transition props="scale" duration="0.12" ease="out"/>
    </style>
  </private>

  <!-- Tap is the caller's: a gesture on an instance binds to the rendered root (§12.4), so the
       use site writes `<Button label="Save" on:tap="…"/>` and this file carries no action. -->

  <component name="Button">
    <param name="label"/>
    <param name="tone" default="brand"/>
    <param name="disabled" default="{false}"/>

    <derived name="bg" expr="{tone == 'danger' ? danger : tone == 'quiet' ? canvas : brand}"/>
    <derived name="fg" expr="{tone == 'quiet' ? ink : onBrand}"/>

    <button style="base" label="{label}" disabled="{disabled}"
            bg="{bg}" textColor="{fg}"/>
  </component>

</kaf>
