Move RadioGroup to <Render>

src/lib/components/radio-group/RadioGroup.svelte

@@ -46,6 +46,18 @@
 
 <script lang="ts">
   import { treeWalker } from "$lib/hooks/use-tree-walker";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "change",
+  ]);
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
+
   export let disabled = false;
   export let value: StateDefinition["value"];
   let radioGroupRef: HTMLElement | null = null;
@@ -108,7 +120,8 @@
     },
   });
 
-  function handleKeyDown(event: KeyboardEvent) {
+  function handleKeyDown(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     if (!radioGroupRef) return;
     if (!radioGroupRef.contains(event.target as HTMLElement)) return;
 
@@ -171,16 +184,19 @@
   };
 </script>
 
-<DescriptionProvider name="RadioGroup.Description" let:describedby>
+<DescriptionProvider name="RadioGroupDescription" let:describedby>
-  <LabelProvider name="RadioGroup.Label" let:labelledby>
+  <LabelProvider name="RadioGroupLabel" let:labelledby>
-    <div
+    <Render
       {...{ ...$$restProps, ...propsWeControl }}
-      bind:this={radioGroupRef}
+      {as}
+      use={[...use, forwardEvents]}
+      name={"RadioGroup"}
+      bind:el={radioGroupRef}
       aria-labelledby={labelledby}
       aria-describedby={describedby}
       on:keydown={handleKeyDown}
     >
       <slot />
-    </div>
+    </Render>
   </LabelProvider>
 </DescriptionProvider>

src/lib/components/radio-group/RadioGroupOption.svelte

@@ -2,9 +2,17 @@
   import { onDestroy } from "svelte";
   import DescriptionProvider from "$lib/components/description/DescriptionProvider.svelte";
   import LabelProvider from "$lib/components/label/LabelProvider.svelte";
-
   import { useRadioGroupContext, Option } from "./RadioGroup.svelte";
   import { useId } from "$lib/hooks/use-id";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
 
   enum OptionState {
     Empty = 1 << 0,
@@ -50,42 +58,37 @@
     state &= ~OptionState.Active;
   }
 
-  $: classStyle = $$props.class
-    ? typeof $$props.class === "function"
-      ? $$props.class({
-          active: state & OptionState.Active,
-          checked,
-          disabled: isDisabled,
-        })
-      : $$props.class
-    : "";
-
   $: propsWeControl = {
     id,
-    class: classStyle,
     role: "radio",
     "aria-checked": checked ? ("true" as const) : ("false" as const),
     "aria-disabled": isDisabled ? true : undefined,
     tabIndex: tabIndex,
   };
+
+  $: slotProps = {
+    checked,
+    disabled: isDisabled,
+    active: state & OptionState.Active,
+  };
 </script>
 
-<DescriptionProvider name="RadioGroup.Description" let:describedby>
+<DescriptionProvider name="RadioGroupDescription" let:describedby>
-  <LabelProvider name="RadioGroup.Label" let:labelledby>
+  <LabelProvider name="RadioGroupLabel" let:labelledby>
-    <div
+    <Render
       {...{ ...$$restProps, ...propsWeControl }}
-      bind:this={optionRef}
+      {as}
+      {slotProps}
+      use={[...use, forwardEvents]}
+      name={"RadioGroupOption"}
+      bind:el={optionRef}
       aria-labelledby={labelledby}
       aria-describedby={describedby}
-      on:click={isDisabled ? undefined : handleClick}
+      on:click={isDisabled ? () => {} : handleClick}
-      on:focus={isDisabled ? undefined : handleFocus}
+      on:focus={isDisabled ? () => {} : handleFocus}
-      on:blur={isDisabled ? undefined : handleBlur}
+      on:blur={isDisabled ? () => {} : handleBlur}
     >
-      <slot
+      <slot {...slotProps} />
-        {checked}
+    </Render>
-        disabled={isDisabled}
-        active={state & OptionState.Active}
-      />
-    </div>
   </LabelProvider>
 </DescriptionProvider>