<!-- for demo only -->
<tk-highlight id="exampleSelectOutput" class="l-block"></tk-highlight>

<tk-select
  id="exampleSelect"
  options="defaultOptions"
>
  <span slot="label" class="l-block t-heavy">Character</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  loadScript(document.currentScript);

  exampleSelect.addEventListener('valueChanged', ($event) => {
    exampleSelectOutput.innerHTML = `📣 valueChanged emitted: ${$event.detail}`;
  });
</script>

<tk-select options="defaultOptions">
  <span slot="label" class="l-block t-heavy">Medium Label</span>
</tk-select>
<hr/>
<tk-select options="defaultOptions">
  <span slot="label" class="l-block t-large t-heavy">Large Label</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  loadScript(document.currentScript);
</script>

<tk-select options="defaultOptions">
  <span slot="label" class="l-block t-heavy">Character</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  let options = [
    {
      "label": "House Gryffindor",
      "options": [
        { "label": "Hermione Granger", "value": "Value5" },
        { "label": "Ron Weasley", "value": "Value7" },
        { "label": "Harry Potter", "value": "Value6" }
      ]
    },
    {
      "label": "House Slytherin",
      "options": [
        { "label": "Draco Malfoy", "value": "Value8"}
      ]
    },
    {
      "options": [
        { "label": "Albus Dumbledore", "value": "Value1"},
        { "label": "Severus Snape", "value": "Value4" }
      ]
    },
  ];
  loadScript(document.currentScript, options);
</script>

<tk-select
  options="defaultOptions"
  type="secondary"
>
  <span slot="label" class="l-block t-heavy">Secondary type</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  loadScript(document.currentScript);
</script>
<hr>
<tk-select
  options="defaultOptions"
  type="outline"
>
  <span slot="label" class="l-block t-heavy">Outline type</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  loadScript(document.currentScript);
</script>

<tk-select value="Value6" options="defaultOptions">
  <span slot="label" class="l-block t-heavy">Character</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  loadScript(document.currentScript);
</script>

<tk-select
  options="defaultOptions"
  type="secondary"
  class="mb-2x"
>
  <span slot="label" class="l-block t-heavy">Size: determined by widest option</span>
</tk-select>
<hr>
<tk-select
  options="defaultOptions"
  type="secondary"
  class="mb-2x l-block"
>
  <span slot="label" class="l-block t-heavy">Size: util class</span>
</tk-select>
<hr>
<div class="l-grid l-col-3 l-sm-col-1 l-gap-2x">
<tk-select
  options="defaultOptions"
  type="secondary"
  class="l-block"
>
  <span slot="label" class="l-block t-heavy">Size: util class</span>
</tk-select>
<tk-select
  options="defaultOptions"
  type="secondary"
  class="l-block"
>
  <span slot="label" class="l-block t-heavy">Size: util class</span>
</tk-select>
<tk-select
  options="defaultOptions"
  type="secondary"
  class="l-block"
>
  <span slot="label" class="l-block t-heavy">Size: util class</span>
</tk-select>
</div>
<hr>
<tk-select
  options="defaultOptions"
  type="secondary"
  class="mb-2x l-block"
  size="large"
>
  <span slot="label" class="l-block t-heavy">Size: Large</span>
</tk-select>
<script>
  loadScript(document.currentScript);
</script>

<tk-select
  options="defaultOptions"
  error
>
  <span slot="label" class="l-block t-heavy">Error state</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  loadScript(document.currentScript);
</script>

<tk-select
  options="defaultOptions"
  disabled
>
  <span slot="label" class="l-block t-heavy">Disabled state for entire menu</span>
</tk-select>
<hr>
<tk-select options="defaultOptions">
  <span slot="label" class="l-block t-heavy">Disabled state for individual options</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  options = [
    {
      "options": [
        { "label": "Hermione Granger", "value": "Value5" },
        { "label": "Ron Weasley", "value": "Value7", "disabled": true },
        { "label": "Harry Potter", "value": "Value6" }
      ]
    },
  ];
  const components = document.currentScript.parentNode.querySelectorAll('tk-select');
  components[0].options = defaultOptions;
  components[1].options = options;
</script>

<tk-select
  options="defaultOptions"
  required
>
  <span slot="label" class="l-block t-heavy">Character (required)</span>
</tk-select>
<script>
  options = [
    {
      "options": [
        { "label": "Please select", "value": ""},
        ...defaultOptions[0].options
      ]
    },
  ];
  loadScript(document.currentScript, options);
</script>

<tk-select options="defaultOptions">
  <span slot="label" class="l-block t-heavy">Character</span>
  <span slot="hint" class="l-inline-flex l-v-center">
    <tk-icon name="heart" size="xs" class="mr-1x" variant="solid"></tk-icon>
    Select your favourite character
  </span>
</tk-select>
<hr>
<tk-select
  options="defaultOptions"
  error
>
  <span slot="label" class="l-block t-heavy">Character</span>
  <span slot="hint" class="l-inline-flex l-v-center">
    <tk-icon name="heart" size="xs" class="mr-1x" variant="solid"></tk-icon>
    Select your favourite character
  </span>
</tk-select>
<script>
  loadScript(document.currentScript);
</script>

<tk-select options="defaultOptions">
  <span slot="label" class="l-block t-heavy">Default text size</span>
</tk-select>
<hr>
<tk-select
  options="defaultOptions"
  size="medium"
>
  <span slot="label" class="l-block t-heavy">Medium text size</span>
</tk-select>
<!-- only required for use outside of a framework -->
<script>
  loadScript(document.currentScript);
</script>