<kaf version="1">

  <!-- kit:segmented — one choice among a few, drawn as a row of segments: a language, a surface,
       a tab. Takes values only: `options` is a list of { value, label, mark }, `value` the chosen
       one. A tap raises `pick` with the option's value and writes nothing, so the use site decides
       where the choice lives — a cell, or a builtin like `locale`. A marked option wears a dot
       after its label, which is how a form says a language has gaps. -->

  <import src="kit:tokens"/>

  <private>
    <style name="strip" bg="{track}" radius="9" pad="3" gap="2" align="center"/>
    <style name="seg" radius="7" pad="5 10" size="13" weight="600" textColor="{dim}" bg="{track}">
      <selected bg="{paper}" textColor="{ink}"/>
      <pressed scale="0.97"/>
      <disabled opacity="0.5"/>
      <transition props="scale" duration="0.12" ease="out"/>
    </style>
  </private>

  <component name="Segmented">
    <param name="options" default="{[]}"/>
    <param name="value"/>
    <param name="disabled" default="{false}"/>
    <event name="pick" params="value"/>

    <row style="strip">
      <each in="{options}" as="o" key="{o.value}">
        <button style="seg" label="{o.mark ? str.concat(o.label, ' •') : o.label}"
                selected="{o.value == value}" disabled="{disabled}" on:tap="pick(o.value)"/>
      </each>
    </row>
  </component>

</kaf>
