Radio button

{
  name: "Demo: required",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <fieldset
        role="radiogroup"
        aria-required="true"
        aria-label="radio options demo"
        style="display: flex; flex-direction: column"
        aria-invalid="true"
        aria-description="Please select an option"
        class="oc-gap-100"
      >
        <oc-radio-button-v2>
          <input type="radio" name="demo-required" value="option1" aria-label="oc-auto" />
          <label slot="label">Option 1</label>
        </oc-radio-button-v2>
        <oc-radio-button-v2>
          <input type="radio" name="demo-required" value="option2" aria-label="oc-auto" />
          <label slot="label">Option 2</label>
        </oc-radio-button-v2>
        <oc-radio-button-v2>
          <input type="radio" name="demo-required" value="option3" aria-label="oc-auto" />
          <label slot="label">Option 3</label>
        </oc-radio-button-v2>
      </fieldset>
    `;
  }
}

{
  name: "Demo: filter",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <oc-form-group-v1 orientation="vertical">
        <oc-radio-button-v2>
          <input type="radio" name="zielgruppe" value="Damen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Damen<span class="oc-text-color-secondary">374637</span></label
          >
        </oc-radio-button-v2>
        <oc-radio-button-v2>
          <input type="radio" name="zielgruppe" value="Herren" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Herren<span class="oc-text-color-secondary">234324</span></label
          >
        </oc-radio-button-v2>
        <oc-radio-button-v2>
          <input type="radio" name="zielgruppe" value="Mädchen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Mädchen<span class="oc-text-color-secondary">2323</span></label
          >
        </oc-radio-button-v2>
        <oc-radio-button-v2>
          <input type="radio" name="zielgruppe" value="Jungen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Jungen<span class="oc-text-color-secondary">1224</span></label
          >
        </oc-radio-button-v2>
      </oc-form-group-v1>

      <oc-form-group-v1 class="oc-mt-200" orientation="vertical">
        <oc-radio-button-v2 label-placement="left">
          <input type="radio" name="zielgruppe" value="Damen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Damen<span class="oc-text-color-secondary">374637</span></label
          >
        </oc-radio-button-v2>
        <oc-radio-button-v2 label-placement="left">
          <input type="radio" name="zielgruppe" value="Herren" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Herren<span class="oc-text-color-secondary">234324</span></label
          >
        </oc-radio-button-v2>
        <oc-radio-button-v2 label-placement="left">
          <input type="radio" name="zielgruppe" value="Mädchen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Mädchen<span class="oc-text-color-secondary">2323</span></label
          >
        </oc-radio-button-v2>
        <oc-radio-button-v2 label-placement="left">
          <input type="radio" name="zielgruppe" value="Jungen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Jungen<span class="oc-text-color-secondary">1224</span></label
          >
        </oc-radio-button-v2>
      </oc-form-group-v1>

      <style>
        .my-label {
          display: flex;
          justify-content: space-between;
        }
      </style>
    `;
  }
}

{
  name: "Demo: delivery addresses",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div
        role="radiogroup"
        aria-required="true"
        aria-label="choose your delivery address"
        style="display: flex; flex-direction: column"
        class="oc-gap-100"
      >
        <oc-radio-button-v2>
          <input type="radio" name="address" value="home1" aria-label="oc-auto" />
          <label slot="label">Home 1</label>
        </oc-radio-button-v2>
        <oc-radio-button-v2>
          <input type="radio" name="address" value="home1" checked aria-label="oc-auto" />
          <label slot="label">Home 2</label>
          <oc-checkbox-v2 slot="label" class="oc-secondary-action">
            <input type="checkbox" aria-label="oc-auto" />
            <label slot="label"> set as default delivery address</label>
          </oc-checkbox-v2>
        </oc-radio-button-v2>
        <oc-radio-button-v2>
          <input type="radio" name="address" value="home1" aria-label="oc-auto" />
          <label slot="label">Home 3</label>
        </oc-radio-button-v2>
      </div>
    `;
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html`
      <oc-radio-button-v2>
        <input type="radio" aria-label="oc-auto" name="brand" value="Samsung" />
        <label slot="label">Samsung</label>
      </oc-radio-button-v2>
      <oc-radio-button-v2>
        <input type="radio" aria-label="oc-auto" name="brand" value="LG" />
        <label slot="label">LG</label>
      </oc-radio-button-v2>
      <oc-radio-button-v2>
        <input type="radio" aria-label="oc-auto" name="size" value="S" />
        <label slot="label">S</label>
      </oc-radio-button-v2>
      <oc-radio-button-v2>
        <input type="radio" aria-label="oc-auto" name="size" value="M" />
        <label slot="label">M</label>
      </oc-radio-button-v2>
    `;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-radio-button-v2"));
    const getInput = (element: Element) => element.querySelector("input") as HTMLInputElement;
    await expect(getInput(brand1).checked).toBeFalsy();
    await expect(getInput(brand2).checked).toBeFalsy();
    await expect(getInput(size1).checked).toBeFalsy();
    await expect(getInput(size2).checked).toBeFalsy();
    await click(getInput(brand1));
    await click(getInput(size1));
    await expect(getInput(brand1).checked).toBeTruthy();
    await expect(getInput(brand2).checked).toBeFalsy();
    await expect(getInput(size1).checked).toBeTruthy();
    await expect(getInput(size2).checked).toBeFalsy();
    await click(getInput(brand2));
    await click(getInput(size2));
    await expect(getInput(brand1).checked).toBeFalsy();
    await expect(getInput(brand2).checked).toBeTruthy();
    await expect(getInput(size1).checked).toBeFalsy();
    await expect(getInput(size2).checked).toBeTruthy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <form>
      <oc-radio-button-v2>
        <input type="radio" aria-label="oc-auto" name="brand" value="Samsung" />
        <label slot="label">Samsung</label>
      </oc-radio-button-v2>
      <oc-radio-button-v2>
        <input type="radio" aria-label="oc-auto" name="brand" value="LG" />
        <label slot="label">LG</label>
      </oc-radio-button-v2>
      <oc-radio-button-v2>
        <input type="radio" aria-label="oc-auto" name="size" value="S" />
        <label slot="label">S</label>
      </oc-radio-button-v2>
      <oc-radio-button-v2>
        <input type="radio" aria-label="oc-auto" name="size" value="M" />
        <label slot="label">M</label>
      </oc-radio-button-v2>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-radio-button-v2"));
    const getInput = (element: Element) => element.querySelector("input") as HTMLInputElement;
    await click(getInput(brand1));
    await click(getInput(size1));
    await click(getInput(brand2));
    await click(getInput(size2));
    const form = canvasElement.getElementsByTagName("form").item(0);

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const data = Array.from(new FormData(form).entries());
    await expect(data).toStrictEqual([["brand", "LG"], ["size", "M"]]);
  }
}

{
  render() {
    return html`
      <form>
        <oc-radio-button-v1 name="name">{Enter}</oc-radio-button-v1>
        <button type="submit"></button>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    canvasElement.getElementsByTagName("form").item(0)!.addEventListener("submit", ev => ev.preventDefault());
    const radioButton = canvasElement.getElementsByTagName("oc-radio-button-v1").item(0)!;
    let fired = 0;
    radioButton.addEventListener("keydown", () => fired += 1);
    radioButton.dispatchEvent(new KeyboardEvent("keydown", {
      key: "Enter"
    }));
    await expect(fired, "keydown should be fired one time").toBe(1);
  }
}

{
  render() {
    return html`
      <form id="form1">
        <oc-radio-button-v1 name="name">{Enter}</oc-radio-button-v1>
        <button type="submit" data-should-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form2">
        <oc-radio-button-v1 name="name">{Enter}</oc-radio-button-v1>
        <input type="submit" data-should-submit />
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form3">
        <oc-radio-button-v1 name="name">{Enter}</oc-radio-button-v1>
        Should submit the form
      </form>

      <form id="form4">Should submit the form</form>
      <oc-radio-button-v1 name="name" form="form4">{Enter}</oc-radio-button-v1>

      <form id="form5">
        <button type="submit" data-should-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>
      <oc-radio-button-v1 name="name" form="form5">{Enter}</oc-radio-button-v1>

      <form id="form6">
        <input type="submit" data-should-submit />
        <button type="submit" data-should-not-submit></button>
      </form>
      <oc-radio-button-v1 name="name" form="form6">{Enter}</oc-radio-button-v1>

      <form id="form7">
        <oc-radio-button-v1 name="name">{Enter}</oc-radio-button-v1>
        <button type="submit" disabled data-should-not-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form8">
        <oc-radio-button-v1 name="name">{Enter}</oc-radio-button-v1>
        <input type="submit" disabled data-should-not-submit />
        <input type="submit" data-should-not-submit />
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const submits: {
      form: string;
      submitter: HTMLElement | null;
    }[] = [];
    canvasElement.querySelectorAll("form").forEach(form => form.addEventListener("submit", ev => {
      ev.preventDefault();
      submits.push({
        form: form.id,
        submitter: ev.submitter
      });
    }));
    const radioButtons = Array.from(canvasElement.querySelectorAll(`oc-radio-button-v1[name="name"]`)) as (HTMLOcTextFieldV1Element & {
      internals: ElementInternals;
    })[];
    for (let i = 0; i < radioButtons.length; i += 1) {
      const radioButton = radioButtons[i];
      // eslint-disable-next-line no-await-in-loop
      await expect(radioButton.internals.form?.id, "radioButton should have correct associated form").toBe(`form${i + 1}`);
    }

    // eslint-disable-next-line no-restricted-syntax
    for (const radioButton of radioButtons) {
      const input = radioButton.shadowRoot!.querySelector("input")!;
      // eslint-disable-next-line no-await-in-loop
      input.dispatchEvent(new KeyboardEvent("keydown", {
        key: "Enter"
      }));
    }
    await expect(submits.length, "number of submits").toBe(6);
    await expect(submits[0].form).toBe("form1");
    await expect(submits[0].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[1].form).toBe("form2");
    await expect(submits[1].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[2].form).toBe("form3");
    await expect(submits[2].submitter).toBe(null);
    await expect(submits[3].form).toBe("form4");
    await expect(submits[3].submitter).toBe(null);
    await expect(submits[4].form).toBe("form5");
    await expect(submits[4].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[5].form).toBe("form6");
    await expect(submits[5].submitter?.dataset.shouldSubmit).toBeDefined();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html`
      <oc-radio-button-v1 name="brand" value="Samsung">Samsung</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="LG">LG</oc-radio-button-v1>
      <oc-radio-button-v1 name="size" value="S">S</oc-radio-button-v1>
      <oc-radio-button-v1 name="size" value="M">M</oc-radio-button-v1>
    `;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-radio-button-v1"));
    await expect(brand1.checked).toBeFalsy();
    await expect(brand2.checked).toBeFalsy();
    await expect(size1.checked).toBeFalsy();
    await expect(size2.checked).toBeFalsy();
    await click(deepQuerySelector(brand1, ".radio")!);
    await click(deepQuerySelector(size1, ".radio")!);
    await expect(brand1.checked).toBeTruthy();
    await expect(brand2.checked).toBeFalsy();
    await expect(size1.checked).toBeTruthy();
    await expect(size2.checked).toBeFalsy();
    await click(deepQuerySelector(brand2, ".radio")!);
    await click(deepQuerySelector(size2, ".radio")!);
    await expect(brand1.checked).toBeFalsy();
    await expect(brand2.checked).toBeTruthy();
    await expect(size1.checked).toBeFalsy();
    await expect(size2.checked).toBeTruthy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <form>
      <oc-radio-button-v1 name="brand" value="Samsung">Samsung</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="LG">LG</oc-radio-button-v1>
      <oc-radio-button-v1 name="size" value="S">S</oc-radio-button-v1>
      <oc-radio-button-v1 name="size" value="M">M</oc-radio-button-v1>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-radio-button-v1"));
    await click(deepQuerySelector(brand1, ".radio")!);
    await click(deepQuerySelector(size1, ".radio")!);
    await click(deepQuerySelector(brand2, ".radio")!);
    await click(deepQuerySelector(size2, ".radio")!);
    const form = canvasElement.getElementsByTagName("form").item(0);

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const data = Array.from(new FormData(form).entries());
    await expect(data).toStrictEqual([["brand", "LG"], ["size", "M"]]);
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <form id="form1" style="display: flex; gap: 8px;">
      <oc-radio-button-v1 name="brand" value="Samsung1">Samsung</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="LG1">LG</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="Apple1">Apple</oc-radio-button-v1>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, brand3] = Array.from(canvasElement.getElementsByTagName(`oc-radio-button-v1`));
    brand1.focus();
    await expect(brand1.checked).toBeFalsy();
    await expect(brand2.checked).toBeFalsy();
    await expect(brand3.checked).toBeFalsy();
    await click();
    await expect(brand1.checked).toBeTruthy();
    await expect(brand2.checked).toBeFalsy();
    await expect(brand3.checked).toBeFalsy();
    await keydown("ArrowRight");
    await keydown("ArrowRight");
    await keydown("ArrowRight");
    await keydown("ArrowRight");
    await expect(brand1.checked).toBeFalsy();
    await expect(brand2.checked).toBeTruthy();
    await expect(brand3.checked).toBeFalsy();
    await keydown("ArrowDown");
    await keydown("ArrowDown");
    await keydown("ArrowDown");
    await keydown("ArrowDown");
    await expect(brand1.checked).toBeFalsy();
    await expect(brand2.checked).toBeFalsy();
    await expect(brand3.checked).toBeTruthy();
    await keydown("ArrowLeft");
    await keydown("ArrowLeft");
    await keydown("ArrowLeft");
    await keydown("ArrowLeft");
    await expect(brand1.checked).toBeFalsy();
    await expect(brand2.checked).toBeTruthy();
    await expect(brand3.checked).toBeFalsy();
    await keydown("ArrowUp");
    await keydown("ArrowUp");
    await keydown("ArrowUp");
    await keydown("ArrowUp");
    await expect(brand1.checked).toBeTruthy();
    await expect(brand2.checked).toBeFalsy();
    await expect(brand3.checked).toBeFalsy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html`
      <oc-radio-button-v1 name="brand" value="Samsung">Samsung</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="LG">LG</oc-radio-button-v1>
      <oc-radio-button-v1 name="size" value="S">S</oc-radio-button-v1>
      <oc-radio-button-v1 name="size" value="M">M</oc-radio-button-v1>
    `;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-radio-button-v1"));
    brand1.focus();
    await expect(brand1).toHaveFocus();
    await click();
    await expect(brand1.checked).toBeTruthy();
    await keydown("ArrowRight");
    await expect(brand2, "focus").toHaveFocus();
    await expect(brand2.checked).toBeTruthy();
    await keydown("ArrowLeft");
    await expect(brand1).toHaveFocus();
    await expect(brand1.checked, "checked").toBeTruthy();
    size1.focus();
    await expect(size1).toHaveFocus();
    await click();
    await keydown("ArrowRight");
    await expect(size2).toHaveFocus();
    await expect(size2.checked).toBeTruthy();
    await tab(true);
    await expect(brand1).toHaveFocus();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <form id="form1" style="display: flex; gap: 8px;">
      <oc-radio-button-v1 name="brand" value="Samsung1">Samsung</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="LG1">LG</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="Apple1">Apple</oc-radio-button-v1>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, brand3] = Array.from(canvasElement.getElementsByTagName(`oc-radio-button-v1`));
    brand1.focus();
    await expect(deepQuerySelector(brand1, "input")!.tabIndex).toBe(0);
    await expect(deepQuerySelector(brand2, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand3, "input")!.tabIndex).toBe(-1);
    await click();
    await expect(deepQuerySelector(brand1, "input")!.tabIndex).toBe(0);
    await expect(deepQuerySelector(brand2, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand3, "input")!.tabIndex).toBe(-1);
    await keydown("ArrowRight");
    await expect(deepQuerySelector(brand1, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand2, "input")!.tabIndex).toBe(0);
    await expect(deepQuerySelector(brand3, "input")!.tabIndex).toBe(-1);
    await keydown("ArrowDown");
    await expect(deepQuerySelector(brand1, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand2, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand3, "input")!.tabIndex).toBe(0);
    await keydown("ArrowLeft");
    await expect(deepQuerySelector(brand1, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand2, "input")!.tabIndex).toBe(0);
    await expect(deepQuerySelector(brand3, "input")!.tabIndex).toBe(-1);
    await keydown("ArrowUp");
    await expect(deepQuerySelector(brand1, "input")!.tabIndex).toBe(0);
    await expect(deepQuerySelector(brand2, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand3, "input")!.tabIndex).toBe(-1);
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <form id="form1" style="display: flex; gap: 8px; margin-bottom: 24px">
        <oc-radio-button-v1 name="brand" value="Samsung1">Samsung</oc-radio-button-v1>
        <oc-radio-button-v1 name="brand" value="LG1">LG</oc-radio-button-v1>
        <oc-radio-button-v1 name="brand" value="Apple1">Apple</oc-radio-button-v1>
      </form>

      <form id="form2" style="display: flex; gap: 8px; margin-bottom: 24px">
        <oc-radio-button-v1 name="brand" value="Samsung2">Samsung</oc-radio-button-v1>
        <oc-radio-button-v1 name="brand" value="LG2">LG</oc-radio-button-v1>
        <oc-radio-button-v1 name="brand" value="Apple2">Apple</oc-radio-button-v1>
      </form>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1Form1, brand2Form1, brand3Form1, brand1Form2, brand2Form2, brand3Form2] = Array.from(canvasElement.getElementsByTagName(`oc-radio-button-v1`));
    await expect(deepQuerySelector(brand1Form1, "input")!.tabIndex).toBe(0);
    await expect(deepQuerySelector(brand2Form1, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand3Form1, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand1Form2, "input")!.tabIndex).toBe(0);
    await expect(deepQuerySelector(brand2Form2, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand3Form2, "input")!.tabIndex).toBe(-1);
    await expect(brand1Form1.checked).toBeFalsy();
    await expect(brand2Form1.checked).toBeFalsy();
    await expect(brand3Form1.checked).toBeFalsy();
    await expect(brand1Form2.checked).toBeFalsy();
    await expect(brand2Form2.checked).toBeFalsy();
    await expect(brand3Form2.checked).toBeFalsy();
    brand2Form1.focus();
    await click();
    brand3Form2.focus();
    await click();
    await expect(deepQuerySelector(brand1Form1, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand2Form1, "input")!.tabIndex).toBe(0);
    await expect(deepQuerySelector(brand3Form1, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand1Form2, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand2Form2, "input")!.tabIndex).toBe(-1);
    await expect(deepQuerySelector(brand3Form2, "input")!.tabIndex).toBe(0);
    await expect(brand1Form1.checked).toBeFalsy();
    await expect(brand2Form1.checked).toBeTruthy();
    await expect(brand3Form1.checked).toBeFalsy();
    await expect(brand1Form2.checked).toBeFalsy();
    await expect(brand2Form2.checked).toBeFalsy();
    await expect(brand3Form2.checked).toBeTruthy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <div id="non-form" style="display: flex; gap: 8px; margin-bottom: 24px">
      <oc-radio-button-v1 name="brand" value="Samsung1">Samsung</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="LG1">LG</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="Apple1">Apple</oc-radio-button-v1>
    </div>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1Form1, brand2Form1, brand3Form1] = Array.from(canvasElement.getElementsByTagName(`oc-radio-button-v1`));
    await expect(brand1Form1.checked).toBeFalsy();
    await expect(brand2Form1.checked).toBeFalsy();
    await expect(brand3Form1.checked).toBeFalsy();
    brand1Form1.focus();
    await click(deepQuerySelector(brand1Form1, "input")!);
    await expect(brand1Form1.checked).toBeTruthy();
    await expect(brand2Form1.checked).toBeFalsy();
    await expect(brand3Form1.checked).toBeFalsy();
    await keydown("ArrowRight");
    await expect(brand1Form1.checked).toBeFalsy();
    await expect(brand2Form1.checked).toBeTruthy();
    await expect(brand3Form1.checked).toBeFalsy();
    await keydown("ArrowRight");
    await expect(brand1Form1.checked).toBeFalsy();
    await expect(brand2Form1.checked).toBeFalsy();
    await expect(brand3Form1.checked).toBeTruthy();
    await keydown("ArrowRight");
    await expect(brand1Form1.checked).toBeTruthy();
    await expect(brand2Form1.checked).toBeFalsy();
    await expect(brand3Form1.checked).toBeFalsy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <form id="form1" style="display: flex; gap: 8px;">
      <oc-radio-button-v1 name="brand" value="Samsung" checked>Samsung</oc-radio-button-v1>
      <oc-radio-button-v1 name="brand" value="LG">LG</oc-radio-button-v1>

      <oc-radio-button-v1 name="size" value="S">S</oc-radio-button-v1>
      <oc-radio-button-v1 name="size" value="M">M</oc-radio-button-v1>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName(`oc-radio-button-v1`));
    await expect(brand1.checked).toBeTruthy();
    await expect(brand2.checked).toBeFalsy();
    await expect(size1.checked).toBeFalsy();
    await expect(size2.checked).toBeFalsy();
    await macrotasks(1);
    const form = canvasElement.querySelector("form")!;
    const brand3 = document.createElement("oc-radio-button-v1");
    brand3.checked = true;
    brand3.name = "brand";
    brand3.value = "Apple";
    brand3.textContent = "Apple";
    brand2.insertAdjacentElement("afterend", brand3);
    const size3 = document.createElement("oc-radio-button-v1");
    size3.checked = true;
    size3.name = "size";
    size3.value = "L";
    size3.textContent = "L";
    form.append(size3);
    await macrotasks(1);
    await expect(brand1.checked, "Samsung should be unchecked").toBeFalsy();
    await expect(brand2.checked, "LG should be unchecked").toBeFalsy();
    await expect(brand3.checked, "Apple should be checked").toBeTruthy();
    await expect(deepQuerySelector(brand1, "input")!.tabIndex, "Samsung should correct tabindex").toBe(-1);
    await expect(deepQuerySelector(brand2, "input")!.tabIndex, "LG should have correct tabindex").toBe(-1);
    await expect(deepQuerySelector(brand3, "input")!.tabIndex, "Apple should have correct tabindex").toBe(0);
    await expect(size1.checked, "S should be unchecked").toBeFalsy();
    await expect(size2.checked, "M should be unchecked").toBeFalsy();
    await expect(size3.checked, "L should be checked").toBeTruthy();
    await expect(deepQuerySelector(size1, "input")!.tabIndex, "S should correct tabindex").toBe(-1);
    await expect(deepQuerySelector(size2, "input")!.tabIndex, "M should have correct tabindex").toBe(-1);
    await expect(deepQuerySelector(size3, "input")!.tabIndex, "L should have correct tabindex").toBe(0);
  }
}

{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  render() {
    return html`
      <oc-radio-button-v1>no defaults set</oc-radio-button-v1>
      <oc-radio-button-v1 value="test" checked>Test Label</oc-radio-button-v1>
    `;
  },
  async play({
    canvasElement
  }) {
    const [sutWithoutAttributes, sutWithAttributes] = Array.from(canvasElement.getElementsByTagName("oc-radio-button-v1")) as (HTMLOcRadioButtonV1Element & {
      defaultChecked: boolean;
      defaultValue: string;
    })[];

    // TEST sutWithoutAttributes
    await expect(sutWithoutAttributes.checked).toBeFalsy();
    await expect(sutWithoutAttributes.defaultChecked).toBeFalsy();
    await expect(sutWithoutAttributes.hasAttribute("checked")).toBeFalsy();
    await expect(sutWithoutAttributes.value).toBe("on");
    await expect(sutWithoutAttributes.defaultValue).toBe("");
    await expect(sutWithoutAttributes.hasAttribute("value")).toBeFalsy();
    sutWithoutAttributes.checked = true;
    sutWithoutAttributes.value = "new on";
    await expect(sutWithoutAttributes.checked).toBeTruthy();
    await expect(sutWithoutAttributes.defaultChecked).toBeFalsy();
    await expect(sutWithoutAttributes.hasAttribute("checked")).toBeFalsy();
    await expect(sutWithoutAttributes.value).toBe("new on");
    // await expect(sutWithoutAttributes.defaultValue).toBe("new on");
    // await expect(sutWithoutAttributes.getAttribute("value")).toBe("new on");

    // TEST sutWithAttributes
    await expect(sutWithAttributes.checked).toBeTruthy();
    await expect(sutWithAttributes.defaultChecked).toBeTruthy();
    await expect(sutWithAttributes.hasAttribute("checked")).toBeTruthy();
    await expect(sutWithAttributes.value).toBe("test");
    await expect(sutWithAttributes.defaultValue).toBe("test");
    await expect(sutWithAttributes.getAttribute("value")).toBe("test");
    sutWithAttributes.checked = false;
    sutWithAttributes.value = "new test";
    await expect(sutWithAttributes.checked).toBeFalsy();
    await expect(sutWithAttributes.defaultChecked).toBeTruthy();
    await expect(sutWithAttributes.hasAttribute("checked")).toBeTruthy();
    await expect(sutWithAttributes.value).toBe("new test");
    // await expect(sutWithAttributes.defaultValue).toBe("new test");
    // await expect(sutWithAttributes.getAttribute("value")).toBe("new test");

    // TEST programmatic created
    const sutCreated = document.createElement("oc-radio-button-v1") as HTMLOcRadioButtonV1Element & {
      defaultChecked: boolean;
      defaultValue: string;
    };
    sutCreated.innerText = "created";
    sutCreated.checked = true;
    canvasElement.append(sutCreated);
    await expect(sutCreated.checked).toBeTruthy();
    await expect(sutCreated.defaultChecked).toBeFalsy();
    await expect(sutCreated.hasAttribute("checked")).toBeFalsy();
    await expect(sutCreated.value).toBe("on");
    await expect(sutCreated.defaultValue).toBe("");
    await expect(sutCreated.hasAttribute("value")).toBeFalsy();
    sutCreated.defaultChecked = true;
    sutCreated.defaultValue = "foo value";
    await expect(sutCreated.checked).toBeTruthy();
    await expect(sutCreated.defaultChecked).toBeTruthy();
    await expect(sutCreated.hasAttribute("checked")).toBeTruthy();
    await expect(sutCreated.value).toBe("foo value");
    await expect(sutCreated.defaultValue).toBe("foo value");
    await expect(sutCreated.getAttribute("value")).toBe("foo value");
  }
}

{
  name: "Demo: form",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <form novalidate lang="de">
        <fieldset class="oc-mb-150">
          <legend>Marke*</legend>
          <oc-form-group-v1 orientation="horizontal" flex-behavior="shrink">
            <oc-radio-button-v1 name="brand" value="Samsung">Samsung</oc-radio-button-v1>
            <oc-radio-button-v1 name="brand" value="LG">LG</oc-radio-button-v1>
            <oc-radio-button-v1 name="brand" value="Philips">Philips</oc-radio-button-v1>
            <oc-radio-button-v1 name="brand" value="Sony">Sony</oc-radio-button-v1>
            <oc-radio-button-v1 name="brand" value="Hisense">Hisense</oc-radio-button-v1>
          </oc-form-group-v1>
        </fieldset>
        <fieldset class="oc-mb-150">
          <legend>Größe*</legend>
          <oc-form-group-v1 orientation="horizontal" flex-behavior="shrink">
            <oc-radio-button-v1 name="size" value="S">S</oc-radio-button-v1>
            <oc-radio-button-v1 name="size" value="M">M</oc-radio-button-v1>
            <oc-radio-button-v1 name="size" value="L">L</oc-radio-button-v1>
            <oc-radio-button-v1 name="size" value="XL">XL</oc-radio-button-v1>
            <oc-radio-button-v1 name="size" value="XXL">XXL</oc-radio-button-v1>
          </oc-form-group-v1>
        </fieldset>
        <fieldset class="oc-mb-150">
          <legend>Lorem*</legend>
          <oc-form-group-v1 orientation="horizontal" flex-behavior="shrink">
            <oc-radio-button-v1 name="lorem" value="1"
              >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
              tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
              eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
              takimata sanctus est Lorem ipsum dolor sit amet.</oc-radio-button-v1
            >
            <oc-radio-button-v1 name="lorem" value="2"
              >At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
              no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
              consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
              dolore magna aliquyam erat, sed diam voluptua.</oc-radio-button-v1
            >
            <oc-radio-button-v1 name="lorem" value="3"
              >Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
              invidunt ut labore et dolore magna aliquyam erat, sed diam
              voluptua.</oc-radio-button-v1
            >
          </oc-form-group-v1>
        </fieldset>
        <div style="display: flex; gap: 16px">
          <oc-button-v1 variant="secondary" type="reset">Reset</oc-button-v1>
          <oc-button-v1 type="submit">Submit</oc-button-v1>
        </div>
      </form>

      <script>
        (() => {
          const [form] = document.getElementsByTagName("form");
          const [group1, group2, group3] = document.getElementsByTagName("oc-form-group-v1");

          form.addEventListener("change", async () => {
            // wait for the next microtask to get the updated checked state
            await new Promise((resolve) => setTimeout(resolve));

            let formData = new FormData(form);
            if (formData.has("brand")) group1.validationMessage = "";
            if (formData.has("size")) group2.validationMessage = "";
            if (formData.has("lorem")) group3.validationMessage = "";
          });

          form.addEventListener("submit", (ev) => {
            let formData = new FormData(form);

            group1.validationMessage = formData.has("brand") ? "" : "Please select a brand.";
            group2.validationMessage = formData.has("size") ? "" : "Please select a size.";
            group3.validationMessage = formData.has("lorem") ? "" : "Please select a lorem.";

            if (formData.has("brand") && formData.has("size") && formData.has("lorem")) {
              let data = "";
              formData.forEach((value, key) => (data += key + "=" + value + "\\n"));
              console.log(data);
              alert("sending:\\n" + data);
            }

            ev.preventDefault();
          });
        })();
      </script>
    `;
  }
}

{
  name: "Demo: filter",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <oc-form-group-v1 orientation="vertical">
        <oc-radio-button-v1
          name="zielgruppe"
          value="Damen"
          oc-aria-label="Damen 374637 Treffer"
          class="flex-label"
          >Damen<span class="number">374637</span>
        </oc-radio-button-v1>
        <oc-radio-button-v1
          name="zielgruppe"
          value="Herren"
          oc-aria-label="Herren 234324 Treffer"
          class="flex-label"
          >Herren<span class="number">234324</span>
        </oc-radio-button-v1>
        <oc-radio-button-v1
          name="zielgruppe"
          value="Mädchen"
          oc-aria-label="Mädchen 2323 Treffer"
          class="flex-label"
          >Mädchen<span class="number">2323</span>
        </oc-radio-button-v1>
        <oc-radio-button-v1
          name="zielgruppe"
          value="Jungen"
          oc-aria-label="Jungen 1224 Treffer"
          class="flex-label"
          >Jungen<span class="number">1224</span>
        </oc-radio-button-v1>
      </oc-form-group-v1>

      <oc-form-group-v1 class="oc-mt-200" orientation="vertical">
        <oc-radio-button-v1
          label-placement="left"
          name="zielgruppe"
          value="Damen"
          oc-aria-label="Damen 374637 Treffer"
          class="flex-label"
          >Damen<span class="number">374637</span>
        </oc-radio-button-v1>
        <oc-radio-button-v1
          label-placement="left"
          name="zielgruppe"
          value="Herren"
          oc-aria-label="Herren 234324 Treffer"
          class="flex-label"
          >Herren<span class="number">234324</span>
        </oc-radio-button-v1>
        <oc-radio-button-v1
          label-placement="left"
          name="zielgruppe"
          value="Mädchen"
          oc-aria-label="Mädchen 2323 Treffer"
          class="flex-label"
          >Mädchen<span class="number">2323</span>
        </oc-radio-button-v1>
        <oc-radio-button-v1
          label-placement="left"
          name="zielgruppe"
          value="Jungen"
          oc-aria-label="Jungen 1224 Treffer"
          class="flex-label"
          >Jungen<span class="number">1224</span>
        </oc-radio-button-v1>
      </oc-form-group-v1>

      <style>
        .flex-label::part(default) {
          display: flex;
          justify-content: space-between;
        }

        .number {
          color: var(--oc-base-color-gray-200);
        }
      </style>
    `;
  }
}