Programmatic API

<label for="tags">Tech stack</label>
<input id="tags" type="text" name="stack" />

<div class="controls">
  <button id="btn-add-ts">addTag("TypeScript")</button>
  <button id="btn-add-rust">addTag("Rust")</button>
  <button id="btn-remove-ts">removeTag("TypeScript")</button>
  <button id="btn-set">setTags(["Go","Python","Rust"])</button>
  <button id="btn-get">getTags() → log</button>
  <button id="btn-clear">clearTags()</button>
  <button id="btn-is-tagged">isTagged("Go") → log</button>
</div>

<ul id="event-log"></ul>

<script type="module">
  import { Taga11y } from '../dist/taga11y.mjs';

  const input = document.getElementById('tags');
  const taga = new Taga11y(input, {
    suggestions: ['CSS', 'Go', 'Java', 'JavaScript', 'Python', 'Rust', 'TypeScript'],
    maxTags: 5,
  });

  // Listen to all events
  taga.on('taga11y:add',    (e) => console.log('add    →', e.detail.tag.label));
  taga.on('taga11y:remove', (e) => console.log('remove →', e.detail.tag.label));
  taga.on('taga11y:clear',  (e) => console.log('clear  →', e.detail.tags.length, 'cleared'));
  taga.on('taga11y:change', (e) => console.log('change →', e.detail.tags.map(t => t.label)));

  // Programmatic API calls
  taga.addTag('TypeScript');
  taga.addTag('Rust');
  taga.removeTag('TypeScript');
  taga.setTags(['Go', 'Python', 'Rust']);
  console.log(taga.getTags());
  taga.clearTags();
  console.log(taga.isTagged('Go'));
</script>