@cloudvoyant/helical-svelte 0.20.1 → 0.21.1

package/dist/Kbd.svelte

@@ -0,0 +1,86 @@
+<!-- libs/helical-svelte/src/Kbd.svelte -->
+<!-- Closely based on: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    cn,
+    formatKeyChord,
+    formatKeySequence,
+    kbdGroupBase,
+    kbdVariants,
+    type KbdProps as CoreKbdProps,
+  } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = Omit<CoreKbdProps, 'className' | 'children'> & {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  let {
+    variant = 'outline',
+    size = 'md',
+    hotkey,
+    platform,
+    useSymbols = true,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const isMultiStep = $derived(
+    Boolean(
+      hotkey &&
+        !children &&
+        (Array.isArray(hotkey) || (typeof hotkey === 'string' && /\s+/.test(hotkey.trim()))),
+    ),
+  );
+  const steps = $derived(isMultiStep && hotkey ? formatKeySequence(hotkey, { platform, useSymbols }) : []);
+  const formattedChord = $derived(
+    hotkey && !children && !isMultiStep && typeof hotkey === 'string'
+      ? formatKeyChord(hotkey, { platform, useSymbols })
+      : null,
+  );
+  const itemClasses = $derived(cn(kbdVariants({ variant, size })));
+  const singleClasses = $derived(cn(kbdVariants({ variant, size }), className));
+</script>
+
+{#if isMultiStep}
+  <span data-slot="kbd-sequence" class={cn(kbdGroupBase, className)}>
+    {#each steps as step, idx (`${step}-${idx}`)}
+      <Ark
+        as="kbd"
+        data-slot="kbd"
+        data-variant={variant}
+        data-size={size}
+        class={itemClasses}
+        {...rest}
+      >
+        {step}
+      </Ark>
+    {/each}
+  </span>
+{:else if formattedChord !== null}
+  <Ark
+    as="kbd"
+    data-slot="kbd"
+    data-variant={variant}
+    data-size={size}
+    class={singleClasses}
+    {...rest}
+  >
+    {formattedChord}
+  </Ark>
+{:else}
+  <Ark
+    as="kbd"
+    data-slot="kbd"
+    data-variant={variant}
+    data-size={size}
+    class={singleClasses}
+    {...rest}
+  >
+    {@render children?.()}
+  </Ark>
+{/if}

package/dist/Kbd.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type KbdProps as CoreKbdProps } from '@cloudvoyant/helical-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<CoreKbdProps, 'className' | 'children'> & {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/Page.svelte

@@ -2,11 +2,12 @@
 <!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
 <script lang="ts">
   import { Ark } from '@ark-ui/svelte/factory';
-  import { pageVariants, cn } from '@cloudvoyant/helical-ui';
+  import { pageVariants, cn, type PagePaneRegistrationProps } from '@cloudvoyant/helical-ui';
+  import { useOptionalPaneRegistration } from './which-key/context.svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
-  type Props = {
+  type Props = PagePaneRegistrationProps & {
     class?: string;
     variant?: 'default' | 'landing';
     children?: Snippet;
@@ -15,13 +16,37 @@
   let {
     class: className = '',
     variant = 'default',
+    paneId,
+    paneTitle,
+    paneDisabled,
+    paneOrder,
     children,
     ...rest
   }: Props = $props();
 
+  let pageRef: Element | null = $state(null);
+
+  const pane = useOptionalPaneRegistration(
+    () => (pageRef instanceof HTMLElement ? pageRef : null),
+    () => ({
+      paneId,
+      paneTitle,
+      paneDisabled: paneDisabled ?? !paneId,
+      paneOrder,
+      defaultTitle: 'Page',
+    }),
+  );
+
   const rootClasses = $derived(cn(pageVariants({ variant }), className));
 </script>
 
-<Ark as="div" data-slot="page" class={rootClasses} {...rest}>
+<Ark
+  as="div"
+  bind:ref={pageRef}
+  data-slot="page"
+  {...pane.dataAttributes}
+  class={rootClasses}
+  {...rest}
+>
   {@render children?.()}
 </Ark>

package/dist/Page.svelte.d.ts

@@ -1,6 +1,7 @@
+import { type PagePaneRegistrationProps } from '@cloudvoyant/helical-ui';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type Props = {
+type Props = PagePaneRegistrationProps & {
     class?: string;
     variant?: 'default' | 'landing';
     children?: Snippet;

package/dist/PageContent.svelte

@@ -2,20 +2,49 @@
 <!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
 <script lang="ts">
   import { Ark } from '@ark-ui/svelte/factory';
-  import { pageContentBase, cn } from '@cloudvoyant/helical-ui';
+  import { pageContentBase, cn, type PagePaneRegistrationProps } from '@cloudvoyant/helical-ui';
+  import { useOptionalPaneRegistration } from './which-key/context.svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
-  type Props = {
+  type Props = PagePaneRegistrationProps & {
     class?: string;
     children?: Snippet;
   } & HTMLAttributes<HTMLElement>;
 
-  let { class: className = '', children, ...rest }: Props = $props();
+  let {
+    class: className = '',
+    paneId,
+    paneTitle,
+    paneDisabled,
+    paneOrder,
+    children,
+    ...rest
+  }: Props = $props();
+
+  let mainRef: Element | null = $state(null);
+
+  const pane = useOptionalPaneRegistration(
+    () => (mainRef instanceof HTMLElement ? mainRef : null),
+    () => ({
+      paneId,
+      paneTitle,
+      paneDisabled,
+      paneOrder,
+      defaultTitle: 'Main Content',
+    }),
+  );
 
   const classes = $derived(cn(pageContentBase, className));
 </script>
 
-<Ark as="main" data-slot="page-content" class={classes} {...rest}>
+<Ark
+  as="main"
+  bind:ref={mainRef}
+  data-slot="page-content"
+  {...pane.dataAttributes}
+  class={classes}
+  {...rest}
+>
   {@render children?.()}
 </Ark>

package/dist/PageContent.svelte.d.ts

@@ -1,6 +1,7 @@
+import { type PagePaneRegistrationProps } from '@cloudvoyant/helical-ui';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type Props = {
+type Props = PagePaneRegistrationProps & {
     class?: string;
     children?: Snippet;
 } & HTMLAttributes<HTMLElement>;

package/dist/PageGutter.svelte

@@ -2,11 +2,18 @@
 <!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
 <script lang="ts">
   import { Ark } from '@ark-ui/svelte/factory';
-  import { pageGutterAreaBase, pageGutterVariants, pageGutterContentVariants, cn } from '@cloudvoyant/helical-ui';
+  import {
+    pageGutterAreaBase,
+    pageGutterVariants,
+    pageGutterContentVariants,
+    cn,
+    type PagePaneRegistrationProps,
+  } from '@cloudvoyant/helical-ui';
+  import { useOptionalPaneRegistration } from './which-key/context.svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
-  type Props = {
+  type Props = PagePaneRegistrationProps & {
     class?: string;
     contentClass?: string;
     side?: 'left' | 'right';
@@ -19,17 +26,41 @@
     contentClass = '',
     side = 'left',
     align = 'start',
+    paneId,
+    paneTitle,
+    paneDisabled,
+    paneOrder,
     children,
     ...rest
   }: Props = $props();
 
+  let gutterRef: Element | null = $state(null);
+
+  const pane = useOptionalPaneRegistration(
+    () => (gutterRef instanceof HTMLElement ? gutterRef : null),
+    () => ({
+      paneId,
+      paneTitle,
+      paneDisabled,
+      paneOrder,
+      defaultTitle: side === 'right' ? 'Right Gutter' : 'Left Gutter',
+    }),
+  );
+
   const areaClasses = $derived(cn(pageGutterAreaBase, side === 'right' && '[grid-area:right]'));
   const gutterClasses = $derived(cn(pageGutterVariants({ side }), className));
   const contentClasses = $derived(cn(pageGutterContentVariants({ align }), contentClass));
 </script>
 
 <div data-slot="page-gutter-area" class={areaClasses}>
-  <Ark as="div" data-slot="page-gutter" class={gutterClasses} {...rest}>
+  <Ark
+    as="div"
+    bind:ref={gutterRef}
+    data-slot="page-gutter"
+    {...pane.dataAttributes}
+    class={gutterClasses}
+    {...rest}
+  >
     <div data-slot="page-gutter-content" class={contentClasses}>
       {@render children?.()}
     </div>

package/dist/PageGutter.svelte.d.ts

@@ -1,6 +1,7 @@
+import { type PagePaneRegistrationProps } from '@cloudvoyant/helical-ui';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type Props = {
+type Props = PagePaneRegistrationProps & {
     class?: string;
     contentClass?: string;
     side?: 'left' | 'right';

package/dist/PageSection.svelte

@@ -2,20 +2,49 @@
 <!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
 <script lang="ts">
   import { Ark } from '@ark-ui/svelte/factory';
-  import { pageSectionBase, cn } from '@cloudvoyant/helical-ui';
+  import { pageSectionBase, cn, type PagePaneRegistrationProps } from '@cloudvoyant/helical-ui';
+  import { useOptionalPaneRegistration } from './which-key/context.svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
-  type Props = {
+  type Props = PagePaneRegistrationProps & {
     class?: string;
     children?: Snippet;
   } & HTMLAttributes<HTMLElement>;
 
-  let { class: className = '', children, ...rest }: Props = $props();
+  let {
+    class: className = '',
+    paneId,
+    paneTitle,
+    paneDisabled,
+    paneOrder,
+    children,
+    ...rest
+  }: Props = $props();
+
+  let sectionRef: Element | null = $state(null);
+
+  const pane = useOptionalPaneRegistration(
+    () => (sectionRef instanceof HTMLElement ? sectionRef : null),
+    () => ({
+      paneId,
+      paneTitle,
+      paneDisabled: paneDisabled ?? !paneId,
+      paneOrder,
+      defaultTitle: 'Section',
+    }),
+  );
 
   const classes = $derived(cn(pageSectionBase, className));
 </script>
 
-<Ark as="section" data-slot="page-section" class={classes} {...rest}>
+<Ark
+  as="section"
+  bind:ref={sectionRef}
+  data-slot="page-section"
+  {...pane.dataAttributes}
+  class={classes}
+  {...rest}
+>
   {@render children?.()}
 </Ark>

package/dist/PageSection.svelte.d.ts

@@ -1,6 +1,7 @@
+import { type PagePaneRegistrationProps } from '@cloudvoyant/helical-ui';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type Props = {
+type Props = PagePaneRegistrationProps & {
     class?: string;
     children?: Snippet;
 } & HTMLAttributes<HTMLElement>;

package/dist/SplitterPanel.svelte

@@ -2,11 +2,37 @@
 <!-- Closely based on: @ark-ui/svelte/splitter (Ark UI), Chakra UI Splitter, mirrored from @cloudvoyant/helical-react -->
 <script lang="ts">
   import { SplitterPanel, type SplitterPanelProps } from '@ark-ui/svelte/splitter';
-  import { splitterPanelBase, cn } from '@cloudvoyant/helical-ui';
+  import {
+    splitterPanelBase,
+    cn,
+    type SplitterPanelPaneRegistrationProps,
+  } from '@cloudvoyant/helical-ui';
+  import { useOptionalPaneRegistration } from './which-key/context.svelte';
 
-  let { class: className = '', ...rest }: SplitterPanelProps = $props();
+  type Props = SplitterPanelProps & SplitterPanelPaneRegistrationProps;
+
+  let {
+    class: className = '',
+    id,
+    paneId,
+    paneTitle,
+    paneDisabled,
+    ...rest
+  }: Props = $props();
+
+  let panelRef: Element | null = $state(null);
+
+  const pane = useOptionalPaneRegistration(
+    () => (panelRef instanceof HTMLElement ? panelRef : null),
+    () => ({
+      paneId: paneId ?? (typeof id === 'string' ? `splitter-${id}` : undefined),
+      paneTitle: paneTitle ?? (typeof id === 'string' ? `Panel ${id}` : 'Splitter Panel'),
+      paneDisabled,
+      defaultTitle: 'Splitter Panel',
+    }),
+  );
 
   const classes = $derived(cn(splitterPanelBase, className));
 </script>
 
-<SplitterPanel class={classes} {...rest} />
+<SplitterPanel bind:ref={panelRef} {id} {...pane.dataAttributes} class={classes} {...rest} />

package/dist/SplitterPanel.svelte.d.ts

@@ -1,4 +1,6 @@
 import { SplitterPanel, type SplitterPanelProps } from '@ark-ui/svelte/splitter';
-declare const SplitterPanel: import("svelte").Component<SplitterPanelProps, {}, "">;
+import { type SplitterPanelPaneRegistrationProps } from '@cloudvoyant/helical-ui';
+type Props = SplitterPanelProps & SplitterPanelPaneRegistrationProps;
+declare const SplitterPanel: import("svelte").Component<Props, {}, "">;
 type SplitterPanel = ReturnType<typeof SplitterPanel>;
 export default SplitterPanel;

package/dist/index.d.ts

@@ -59,3 +59,5 @@ export * from './prose';
 export * from './toggle-group';
 export * from './listbox';
 export * from './editor';
+export { default as Kbd } from './Kbd.svelte';
+export * from './which-key';

package/dist/index.js

@@ -60,3 +60,5 @@ export * from './prose';
 export * from './toggle-group';
 export * from './listbox';
 export * from './editor';
+export { default as Kbd } from './Kbd.svelte';
+export * from './which-key';

package/dist/listbox/ListboxItemGroup.svelte

@@ -0,0 +1,17 @@
+<!-- libs/helical-svelte/src/listbox/ListboxItemGroup.svelte -->
+<script lang="ts">
+  import { ListboxItemGroup, type ListboxItemGroupProps } from '@ark-ui/svelte/listbox';
+  import { listboxItemGroupBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = ListboxItemGroupProps & {
+    class?: string;
+    children?: Snippet;
+  };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<ListboxItemGroup class={cn(listboxItemGroupBase, className)} {...rest}>
+  {@render children?.()}
+</ListboxItemGroup>

package/dist/listbox/ListboxItemGroup.svelte.d.ts

@@ -0,0 +1,9 @@
+import { ListboxItemGroup, type ListboxItemGroupProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxItemGroupProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxItemGroup: import("svelte").Component<Props, {}, "">;
+type ListboxItemGroup = ReturnType<typeof ListboxItemGroup>;
+export default ListboxItemGroup;

package/dist/listbox/ListboxItemGroupLabel.svelte

@@ -0,0 +1,17 @@
+<!-- libs/helical-svelte/src/listbox/ListboxItemGroupLabel.svelte -->
+<script lang="ts">
+  import { ListboxItemGroupLabel, type ListboxItemGroupLabelProps } from '@ark-ui/svelte/listbox';
+  import { listboxItemGroupLabelBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = ListboxItemGroupLabelProps & {
+    class?: string;
+    children?: Snippet;
+  };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<ListboxItemGroupLabel class={cn(listboxItemGroupLabelBase, className)} {...rest}>
+  {@render children?.()}
+</ListboxItemGroupLabel>

package/dist/listbox/ListboxItemGroupLabel.svelte.d.ts

@@ -0,0 +1,9 @@
+import { ListboxItemGroupLabel, type ListboxItemGroupLabelProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxItemGroupLabelProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxItemGroupLabel: import("svelte").Component<Props, {}, "">;
+type ListboxItemGroupLabel = ReturnType<typeof ListboxItemGroupLabel>;
+export default ListboxItemGroupLabel;

package/dist/listbox/index.d.ts

@@ -1,6 +1,8 @@
 export { default as Listbox } from './Listbox.svelte';
 export { default as ListboxContent } from './ListboxContent.svelte';
 export { default as ListboxItem } from './ListboxItem.svelte';
+export { default as ListboxItemGroup } from './ListboxItemGroup.svelte';
+export { default as ListboxItemGroupLabel } from './ListboxItemGroupLabel.svelte';
 export { default as ListboxItemText } from './ListboxItemText.svelte';
 export { default as ListboxItemIndicator } from './ListboxItemIndicator.svelte';
 export { default as ListboxInput } from './ListboxInput.svelte';

package/dist/listbox/index.js

@@ -2,6 +2,8 @@
 export { default as Listbox } from './Listbox.svelte';
 export { default as ListboxContent } from './ListboxContent.svelte';
 export { default as ListboxItem } from './ListboxItem.svelte';
+export { default as ListboxItemGroup } from './ListboxItemGroup.svelte';
+export { default as ListboxItemGroupLabel } from './ListboxItemGroupLabel.svelte';
 export { default as ListboxItemText } from './ListboxItemText.svelte';
 export { default as ListboxItemIndicator } from './ListboxItemIndicator.svelte';
 export { default as ListboxInput } from './ListboxInput.svelte';

package/dist/sidebar/Root.svelte

@@ -1,4 +1,4 @@
-<!-- libs/helical-svelte/src/Sidebar.svelte -->
+<!-- libs/helical-svelte/src/sidebar/Root.svelte -->
 <!-- Source: @ark-ui/svelte/drawer (Ark UI), mirrored from @cloudvoyant/helical-react -->
 <script lang="ts">
   import {
@@ -18,13 +18,15 @@
     SIDEBAR_WIDGET_DEFAULT_SNAP_POINT,
     sidebarStyles,
     cn,
+    type SidebarPaneRegistrationProps,
   } from '@cloudvoyant/helical-ui';
   import Col from '../Col.svelte';
+  import { useOptionalPaneRegistration } from '../which-key/context.svelte';
   import { getSidebarContext } from './context.svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
-  type Props = {
+  type Props = SidebarPaneRegistrationProps & {
     side?: 'left' | 'right';
     variant?: 'sidebar' | 'floating' | 'inset';
     collapsible?: 'offcanvas' | 'icon' | 'none';
@@ -36,13 +38,16 @@
     side = 'left',
     variant = 'sidebar',
     collapsible = 'offcanvas',
+    paneId,
+    paneTitle,
+    paneDisabled,
     class: className = '',
     children,
     ...rest
   }: Props = $props();
 
   const sidebar = getSidebarContext();
-  const state = $derived(sidebar.state);
+  const sidebarState = $derived(sidebar.state);
   const isMobile = $derived(sidebar.isMobile);
   const open = $derived(sidebar.open);
   const setOpen = sidebar.setOpen;
@@ -57,6 +62,18 @@
   const defaultSnapPoint = $derived(isBottomWidgetSheet ? SIDEBAR_WIDGET_DEFAULT_SNAP_POINT : undefined);
   const snapToSequentialPoints = $derived(isBottomWidgetSheet);
 
+  let containerRef: HTMLDivElement | null = $state(null);
+
+  const pane = useOptionalPaneRegistration(
+    () => containerRef,
+    () => ({
+      paneId,
+      paneTitle,
+      paneDisabled: paneDisabled || sidebarState === 'collapsed',
+      defaultTitle: 'Sidebar',
+    }),
+  );
+
   const containerClasses = $derived(
     cn(
       sidebarStyles.containerClass,
@@ -82,14 +99,16 @@
 </script>
 
 {#if collapsible === 'none'}
-  <Col
+  <div
+    bind:this={containerRef}
     data-slot="sidebar"
     data-sidebar="sidebar"
-    class={cn('h-full w-(--sidebar-width) bg-sidebar text-sidebar-foreground', className)}
+    {...pane.dataAttributes}
+    class={cn('flex flex-col h-full w-(--sidebar-width) bg-sidebar text-sidebar-foreground', className)}
     {...rest}
   >
     {@render children?.()}
-  </Col>
+  </div>
 {:else if isMobile}
   <DrawerRoot
     open={mobileSheetOpen}
@@ -130,14 +149,20 @@
 {:else}
   <div
     class="group peer hidden text-sidebar-foreground md:block"
-    data-state={state}
-    data-collapsible={state === 'collapsed' ? collapsible : ''}
+    data-state={sidebarState}
+    data-collapsible={sidebarState === 'collapsed' ? collapsible : ''}
     data-variant={variant}
     data-side={side}
     data-slot="sidebar"
   >
     <div data-slot="sidebar-gap" class={gapClasses}></div>
-    <div data-slot="sidebar-container" class={containerClasses} {...rest}>
+    <div
+      bind:this={containerRef}
+      data-slot="sidebar-container"
+      {...pane.dataAttributes}
+      class={containerClasses}
+      {...rest}
+    >
       <Col data-sidebar="sidebar" data-slot="sidebar-inner" data-variant={variant} class={cn(sidebarStyles.innerClass)}>
         {@render children?.()}
       </Col>

package/dist/sidebar/Root.svelte.d.ts

@@ -1,6 +1,7 @@
+import { type SidebarPaneRegistrationProps } from '@cloudvoyant/helical-ui';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type Props = {
+type Props = SidebarPaneRegistrationProps & {
     side?: 'left' | 'right';
     variant?: 'sidebar' | 'floating' | 'inset';
     collapsible?: 'offcanvas' | 'icon' | 'none';

package/dist/which-key/Pane.svelte

@@ -0,0 +1,49 @@
+<!-- libs/helical-svelte/src/which-key/Pane.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { cn, paneVariants, type PaneProps as CorePaneProps } from '@cloudvoyant/helical-ui';
+  import { useOptionalPaneRegistration } from './context.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = Omit<CorePaneProps, 'className' | 'children'> & {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    paneId,
+    paneTitle = 'Pane',
+    paneDisabled = false,
+    paneOrder,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let elementRef: Element | null = $state(null);
+
+  const pane = useOptionalPaneRegistration(
+    () => (elementRef instanceof HTMLElement ? elementRef : null),
+    () => ({
+      paneId,
+      paneTitle,
+      paneDisabled,
+      paneOrder,
+      defaultTitle: paneTitle,
+    }),
+  );
+
+  const classes = $derived(cn(paneVariants({ active: pane.isActive }), className));
+</script>
+
+<Ark
+  as="div"
+  bind:ref={elementRef}
+  data-slot="pane"
+  {...pane.dataAttributes}
+  class={classes}
+  {...rest}
+>
+  {@render children?.()}
+</Ark>