Assorted fixes

Type fixes, support a couple more classes as functions for the examples, and switch TabPanels to registering ids instead of refs

src/lib/components/popover/PopoverPanel.svelte

@@ -18,7 +18,7 @@
     FocusResult,
     focusIn,
   } from "$lib/utils/focus-management";
-  import { getContext, setContext, onMount } from "svelte";
+  import { getContext, setContext } from "svelte";
   import type { Writable } from "svelte/store";
   import {
     PopoverStates,

src/lib/components/switch/Switch.svelte

@@ -44,25 +44,35 @@
     "aria-labelledby": $labelContext?.labelIds,
     "aria-describedby": $descriptionContext?.descriptionIds,
   };
+
+  $: classStyle = $$props.class
+    ? typeof $$props.class === "function"
+      ? $$props.class({
+          checked,
+        })
+      : $$props.class
+    : "";
 </script>
 
 {#if switchStore}
   <button
     {...{ ...$$restProps, ...propsWeControl }}
     bind:this={$switchStore}
+    class={classStyle}
     on:click={handleClick}
     on:keyup={handleKeyUp}
     on:keypress={handleKeyPress}
   >
-    <slot />
+    <slot {checked} />
   </button>
 {:else}
   <button
     {...{ ...$$restProps, ...propsWeControl }}
+    class={classStyle}
     on:click={handleClick}
     on:keyup={handleKeyUp}
     on:keypress={handleKeyPress}
   >
-    <slot />
+    <slot {checked} />
   </button>
 {/if}

src/lib/components/switch/index.ts

@@ -1,4 +1,4 @@
 export { default as Switch } from "./Switch.svelte";
 export { default as SwitchGroup } from "./SwitchGroup.svelte";
-export { default as SwitchGroupLabel } from "../label/Label.svelte";
+export { default as SwitchLabel } from "../label/Label.svelte";
-export { default as SwitchGroupDescription } from "../description/Description.svelte";
+export { default as SwitchDescription } from "../description/Description.svelte";

src/lib/components/tabs/Tab.svelte

@@ -11,7 +11,7 @@
 
   let api = useTabsContext("Tab");
   let id = `headlessui-tabs-tab-${useId()}`;
-  let tabRef = null;
+  let tabRef: HTMLElement | null = null;
 
   onMount(() => {
     $api.registerTab(tabRef);
@@ -80,19 +80,28 @@
   $: propsWeControl = {
     id,
     role: "tab",
-    "aria-controls": $api.panels[myIndex]?.id,
+    "aria-controls": $api.panels[myIndex],
     "aria-selected": selected,
     tabIndex: selected ? 0 : -1,
     disabled: disabled ? true : undefined,
   };
+
+  $: classStyle = $$props.class
+    ? typeof $$props.class === "function"
+      ? $$props.class({
+          selected,
+        })
+      : $$props.class
+    : "";
 </script>
 
 <button
   {...{ ...$$restProps, ...propsWeControl }}
   bind:this={tabRef}
+  class={classStyle}
   on:keydown={handleKeyDown}
   on:click={handleSelection}
   on:focus={$api.activation === "manual" ? handleFocus : handleSelection}
 >
-  <slot />
+  <slot {selected} />
 </button>

src/lib/components/tabs/TabGroup.svelte

@@ -15,14 +15,14 @@
     activation: "auto" | "manual";
 
     tabs: (HTMLElement | null)[];
-    panels: (HTMLElement | null)[];
+    panels: string[];
 
     // State mutators
     setSelectedIndex(index: number): void;
     registerTab(tab: HTMLElement | null): void;
     unregisterTab(tab: HTMLElement | null): void;
-    registerPanel(panel: HTMLElement | null): void;
+    registerPanel(panel: string): void;
-    unregisterPanel(panel: HTMLElement | null): void;
+    unregisterPanel(panel: string): void;
   };
 
   const TABS_CONTEXT_NAME = "TabsContext";

src/lib/components/tabs/TabPanel.svelte

@@ -5,14 +5,13 @@
 
   let api = useTabsContext("TabPanel");
   let id = `headlessui-tabs-panel-${useId()}`;
-  let panelRef = null;
 
   onMount(() => {
-    $api.registerPanel(panelRef);
+    $api.registerPanel(id);
-    return () => $api.unregisterPanel(panelRef);
+    return () => $api.unregisterPanel(id);
   });
 
-  $: myIndex = $api.panels.indexOf(panelRef);
+  $: myIndex = $api.panels.indexOf(id);
   $: selected = myIndex === $api.selectedIndex;
 
   $: propsWeControl = {
@@ -23,8 +22,8 @@
   };
 </script>
 
-<div {...{ ...$$restProps, ...propsWeControl }} bind:this={panelRef}>
 {#if selected}
+  <div {...{ ...$$restProps, ...propsWeControl }}>
     <slot />
-  {/if}
   </div>
+{/if}