@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/stepper/step/README.md

@@ -1,97 +1,97 @@
-# Step
-
-The Step component represents an individual step within a Stepper workflow. It manages its own state (active, completed, disabled, optional) and provides a composable structure for building step indicators, headers, and content.
-
-## Usage
-
-Steps are typically used within a `Stepper.Root` component to create multi-step workflows. Each step can display an indicator, title, description, and content.
-
-```svelte
-<script>
-  import { Stepper, Step } from '@svelte-atoms/core';
-</script>
-
-<Stepper.Root>
-  <Step.Root index={0} header="Account Setup" body="Create your account">
-    {#snippet children({ step })}
-      <Step.Header>
-        <Step.Indicator />
-        <Step.Separator />
-        
-        <div>
-          <Step.Title>Account Setup</Step.Title>
-          <Step.Description>Create your account</Step.Description>
-        </div>
-      </Step.Header>
-      
-      <Step.Body>
-        <!-- Step content goes here -->
-      </Step.Body>
-    {/snippet}
-  </Step.Root>
-</Stepper.Root>
-```
-
-## Components
-
-### Step.Root
-
-The root container for a step. Manages step state and provides context to child components.
-
-**Props:**
-- `index` - Step index in the stepper sequence
-- `header` - Step header text
-- `body` - Step body/description text
-- `optional` - Whether the step is optional
-- `disabled` - Whether the step is disabled
-
-### Step.Header
-
-Container for the step's header section, typically containing the indicator, title, and description.
-
-### Step.Indicator
-
-Visual indicator showing the step's state (number, icon, checkmark for completed steps).
-
-### Step.Separator
-
-Visual separator line between step indicators, typically used in horizontal steppers.
-
-### Step.Title
-
-The main title/label for the step.
-
-### Step.Description
-
-Secondary description or subtitle for the step.
-
-### Step.Body
-
-Container for the step's main content area. This content is rendered when the step is active.
-
-## Step States
-
-Each step can be in one of several states:
-
-- **Active** - Currently visible/selected step
-- **Completed** - Step that has been completed
-- **Disabled** - Step that cannot be accessed
-- **Optional** - Step that can be skipped
-- **Pending** - Step that hasn't been reached yet
-
-## Integration
-
-Steps work seamlessly with the Stepper component's navigation system. The step's state is automatically managed based on the active step index and user interactions.
-
-```svelte
-<Step.Root index={0}>
-  {#snippet children({ step })}
-    {@const isActive = step?.state?.isActive}
-    {@const isCompleted = step?.state?.isCompleted}
-    
-    <Step.Title class={isActive ? 'font-bold' : ''}>
-      Step 1
-    </Step.Title>
-  {/snippet}
-</Step.Root>
-```
+# Step
+
+The Step component represents an individual step within a Stepper workflow. It manages its own state (active, completed, disabled, optional) and provides a composable structure for building step indicators, headers, and content.
+
+## Usage
+
+Steps are typically used within a `Stepper.Root` component to create multi-step workflows. Each step can display an indicator, title, description, and content.
+
+```svelte
+<script>
+  import { Stepper, Step } from '@svelte-atoms/core';
+</script>
+
+<Stepper.Root>
+  <Step.Root index={0} header="Account Setup" body="Create your account">
+    {#snippet children({ step })}
+      <Step.Header>
+        <Step.Indicator />
+        <Step.Separator />
+        
+        <div>
+          <Step.Title>Account Setup</Step.Title>
+          <Step.Description>Create your account</Step.Description>
+        </div>
+      </Step.Header>
+      
+      <Step.Body>
+        <!-- Step content goes here -->
+      </Step.Body>
+    {/snippet}
+  </Step.Root>
+</Stepper.Root>
+```
+
+## Components
+
+### Step.Root
+
+The root container for a step. Manages step state and provides context to child components.
+
+**Props:**
+- `index` - Step index in the stepper sequence
+- `header` - Step header text
+- `body` - Step body/description text
+- `optional` - Whether the step is optional
+- `disabled` - Whether the step is disabled
+
+### Step.Header
+
+Container for the step's header section, typically containing the indicator, title, and description.
+
+### Step.Indicator
+
+Visual indicator showing the step's state (number, icon, checkmark for completed steps).
+
+### Step.Separator
+
+Visual separator line between step indicators, typically used in horizontal steppers.
+
+### Step.Title
+
+The main title/label for the step.
+
+### Step.Description
+
+Secondary description or subtitle for the step.
+
+### Step.Body
+
+Container for the step's main content area. This content is rendered when the step is active.
+
+## Step States
+
+Each step can be in one of several states:
+
+- **Active** - Currently visible/selected step
+- **Completed** - Step that has been completed
+- **Disabled** - Step that cannot be accessed
+- **Optional** - Step that can be skipped
+- **Pending** - Step that hasn't been reached yet
+
+## Integration
+
+Steps work seamlessly with the Stepper component's navigation system. The step's state is automatically managed based on the active step index and user interactions.
+
+```svelte
+<Step.Root index={0}>
+  {#snippet children({ step })}
+    {@const isActive = step?.state?.isActive}
+    {@const isCompleted = step?.state?.isCompleted}
+    
+    <Step.Title class={isActive ? 'font-bold' : ''}>
+      Step 1
+    </Step.Title>
+  {/snippet}
+</Step.Root>
+```

package/dist/components/stepper/step/bond.svelte.d.ts

@@ -1,5 +1,5 @@
-import { StepperState } from '../bond.svelte.js';
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte.js';
+import { StepperState } from '../bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
 export type StepBondProps = BondStateProps & {
     index: number;
     disabled: boolean;
@@ -15,74 +15,84 @@ export type StepBondElements = {
     body?: HTMLElement;
     separator?: HTMLElement;
 };
-export declare class StepBond extends Bond<StepBondProps, StepBondState, StepBondElements> {
-    static CONTEXT_KEY: string;
-    constructor(state: StepBondState);
-    share(): this;
-    root(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-stepper': string;
-        readonly 'data-atom': string;
-        readonly 'data-kind': "step";
-        readonly 'data-index': number;
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
-        readonly 'aria-disabled': boolean | undefined;
-        readonly 'aria-describedby': `step-description-${string}`;
-        readonly 'aria-labelledby': `step-title-${string}`;
-        readonly id: `step-${string}`;
-        readonly role: "group";
+declare class StepRootAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'data-stepper': string;
+        'data-index': number;
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
+        'aria-disabled': boolean | undefined;
+        'aria-describedby': string;
+        'aria-labelledby': string;
+        role: "group";
     };
-    indicator(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-indicator";
-        readonly 'aria-current': "step" | undefined;
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
-        readonly role: "presentation";
+}
+declare class StepIndicatorAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'aria-current': "step" | undefined;
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
+        role: "presentation";
     };
-    header(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-header";
-        readonly id: `step-header-${string}`;
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
+}
+declare class StepHeaderAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
     };
-    title(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-title";
-        readonly id: `step-title-${string}`;
+}
+declare class StepTitleAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        [x: string]: unknown;
     };
-    description(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-description";
-        readonly id: `step-description-${string}`;
+}
+declare class StepDescriptionAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        [x: string]: unknown;
     };
-    body(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-body";
-        readonly id: `step-body-${string}`;
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
+}
+declare class StepBodyAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
     };
-    separator(): {
-        readonly [x: symbol]: (node: HTMLElement) => void;
-        readonly 'data-kind': "step-separator";
-        readonly 'aria-hidden': "true";
-        readonly role: "presentation";
-        readonly 'data-active': boolean;
-        readonly 'data-completed': boolean;
-        readonly 'data-disabled': boolean | undefined;
-        readonly 'data-error': boolean;
+}
+declare class StepSeparatorAtom extends BondAtom<StepBond, HTMLElement> {
+    constructor(bond: StepBond);
+    get attrs(): {
+        'aria-hidden': string;
+        role: "presentation";
+        'data-active': boolean;
+        'data-completed': boolean;
+        'data-disabled': boolean | undefined;
+        'data-error': boolean;
     };
+}
+export declare class StepBond extends Bond<StepBondProps, StepBondState, StepBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(state: StepBondState);
+    share(): this;
+    root(): StepRootAtom;
+    indicator(): StepIndicatorAtom;
+    header(): StepHeaderAtom;
+    title(): StepTitleAtom;
+    description(): StepDescriptionAtom;
+    body(): StepBodyAtom;
+    separator(): StepSeparatorAtom;
     static get(): StepBond | undefined;
     static set(bond: StepBond): StepBond;
 }
@@ -97,3 +107,4 @@ export declare class StepBondState extends BondState<StepBondProps> {
     unmount: () => void;
     activate(): void;
 }
+export {};

package/dist/components/stepper/step/bond.svelte.js

@@ -1,112 +1,148 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { StepperBond, StepperState } from '../bond.svelte.js';
-import { Bond, BondState } from '../../../shared/bond.svelte.js';
-export class StepBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/stepper/step';
-    constructor(state) {
-        super(state);
-    }
-    share() {
-        return StepBond.set(this);
-    }
-    root() {
-        const state = this.state;
+import { getContext, setContext, untrack } from 'svelte';
+import { StepperBond, StepperState } from '../bond.svelte';
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+class StepRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const state = bond.state;
+        const props = untrack(() => bond.state.props);
         return {
+            ...super.attrs,
             'data-stepper': state?.stepper?.id ?? '',
-            'data-atom': this.id ?? '',
-            'data-kind': 'step',
-            'data-index': state?.props.index ?? 0,
+            'data-index': props.index ?? 0,
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
+            'data-error': props.error,
             'aria-disabled': state?.isDisabled,
-            'aria-describedby': `step-description-${this.id}`,
-            'aria-labelledby': `step-title-${this.id}`,
-            id: `step-${this.id}`,
-            role: 'group',
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
+            'aria-describedby': `step-description-${bond.id}`,
+            'aria-labelledby': `step-title-${bond.id}`,
+            role: 'group'
         };
     }
-    indicator() {
-        const state = this.state;
+}
+class StepIndicatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'indicator');
+    }
+    get attrs() {
+        const state = untrack(() => this.bond.state);
+        const props = untrack(() => this.bond.state.props);
         return {
-            'data-kind': 'step-indicator',
+            ...super.attrs,
             'aria-current': state?.isActive ? 'step' : undefined,
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
-            role: 'presentation',
-            [createAttachmentKey()]: (node) => {
-                this.elements.indicator = node;
-            }
+            'data-error': props.error,
+            role: 'presentation'
         };
     }
-    header() {
-        const state = this.state;
+}
+class StepHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const state = untrack(() => bond.state);
+        const props = untrack(() => bond.state.props);
         return {
-            'data-kind': 'step-header',
-            id: `step-header-${this.id}`,
+            ...super.attrs,
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
-            }
+            'data-error': props.error
         };
     }
-    title() {
+}
+class StepTitleAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'title');
+    }
+    get attrs() {
         return {
-            'data-kind': 'step-title',
-            id: `step-title-${this.id}`,
-            [createAttachmentKey()]: (node) => {
-                this.elements.title = node;
-            }
+            ...super.attrs
         };
     }
-    description() {
+}
+class StepDescriptionAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'description');
+    }
+    get attrs() {
         return {
-            'data-kind': 'step-description',
-            id: `step-description-${this.id}`,
-            [createAttachmentKey()]: (node) => {
-                this.elements.description = node;
-            }
+            ...super.attrs
         };
     }
-    body() {
-        const state = this.state;
+}
+class StepBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const state = untrack(() => bond.state);
+        const props = untrack(() => bond.state.props);
         return {
-            'data-kind': 'step-body',
-            id: `step-body-${this.id}`,
+            ...super.attrs,
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
+            'data-error': props.error
         };
     }
-    separator() {
-        const state = this.state;
+}
+class StepSeparatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'separator');
+    }
+    get attrs() {
+        const state = untrack(() => this.bond.state);
+        const props = untrack(() => this.bond.state.props);
         return {
-            'data-kind': 'step-separator',
+            ...super.attrs,
             'aria-hidden': 'true',
             role: 'presentation',
             'data-active': state?.isActive,
             'data-completed': state?.isCompleted,
             'data-disabled': state?.isDisabled,
-            'data-error': state?.props.error,
-            [createAttachmentKey()]: (node) => {
-                this.elements.separator = node;
-            }
+            'data-error': props.error
         };
     }
+}
+export class StepBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/stepper/step';
+    constructor(state) {
+        super(state, 'step');
+    }
+    share() {
+        return StepBond.set(this);
+    }
+    root() {
+        return this.atom('root', () => new StepRootAtom(this));
+    }
+    indicator() {
+        return this.atom('indicator', () => new StepIndicatorAtom(this));
+    }
+    header() {
+        return this.atom('header', () => new StepHeaderAtom(this));
+    }
+    title() {
+        return this.atom('title', () => new StepTitleAtom(this));
+    }
+    description() {
+        return this.atom('description', () => new StepDescriptionAtom(this));
+    }
+    body() {
+        return this.atom('body', () => new StepBodyAtom(this));
+    }
+    separator() {
+        return this.atom('separator', () => new StepSeparatorAtom(this));
+    }
     static get() {
         return getContext(StepBond.CONTEXT_KEY);
     }
@@ -129,7 +165,7 @@ export class StepBondState extends BondState {
     }
     get isCompleted() {
         const stepperStep = this.#stepper?.props.step;
-        return this.props.completed || (typeof stepperStep === 'number' && stepperStep > this.props.index);
+        return (this.props.completed || (typeof stepperStep === 'number' && stepperStep > this.props.index));
     }
     get isDisabled() {
         return (this.props.disabled ||

package/dist/components/stepper/step/step-body.svelte

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { type Base } from '../../atom';
-	import { StepBond } from './bond.svelte';
-	import { StepperBond } from '../bond.svelte';
-	import type { StepContentProps } from './types';
-	import { Stack } from '../../stack';
-
-	const stepBond = StepBond.get();
-	const stepperBond = StepperBond.get();
-
-	let {
-		class: klass = '',
-		base=Stack.Item,
-		children = undefined,
-		preset = 'stepper.step.content' as const,
-		...restProps
-	}: StepContentProps<E, B> = $props();
-
-	const contentProps = $derived({
-		class: klass,
-		preset,
-		base,
-		...restProps
-	});
-
-	// Register content snippet with props and children with stepper on mount
-	$effect(() => {
-		if (stepBond && stepperBond && children) {
-			const index = stepBond.state.props.index;
-			stepperBond.state.registerStepContent(index, contentProps, children);
-
-			return () => {
-				stepperBond.state.unregisterStepContent(index);
-			};
-		}
-	});
-</script>
-
-<!-- Content is teleported to Stepper.Content, so we don't render anything here -->
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { type Base } from '../../atom';
+	import { StepBond } from './bond.svelte';
+	import { StepperBond } from '../bond.svelte';
+	import type { StepContentProps } from './types';
+	import { Stack } from '../../stack';
+
+	const stepBond = StepBond.get();
+	const stepperBond = StepperBond.get();
+
+	let {
+		class: klass = '',
+		base=Stack.Item,
+		children = undefined,
+		preset = 'stepper.step.content' as const,
+		...restProps
+	}: StepContentProps<E, B> = $props();
+
+	const contentProps = $derived({
+		class: klass,
+		preset,
+		base,
+		...restProps
+	});
+
+	// Register content snippet with props and children with stepper on mount
+	$effect(() => {
+		if (stepBond && stepperBond && children) {
+			const index = stepBond.state.props.index;
+			stepperBond.state.registerStepContent(index, contentProps, children);
+
+			return () => {
+				stepperBond.state.unregisterStepContent(index);
+			};
+		}
+	});
+</script>
+
+<!-- Content is teleported to Stepper.Content, so we don't render anything here -->