mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
fix(Stepper): handle RTL mode (#2844)
This commit is contained in:
Malik-Jouda
GitHub
@@ -7,7 +7,7 @@ exports[`Stepper > renders with as correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -18,7 +18,7 @@ exports[`Stepper > renders with as correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -49,7 +49,7 @@ exports[`Stepper > renders with class correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -60,7 +60,7 @@ exports[`Stepper > renders with class correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -91,7 +91,7 @@ exports[`Stepper > renders with content slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -102,7 +102,7 @@ exports[`Stepper > renders with content slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -133,7 +133,7 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -144,7 +144,7 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -175,7 +175,7 @@ exports[`Stepper > renders with default slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -186,7 +186,7 @@ exports[`Stepper > renders with default slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -217,7 +217,7 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -228,7 +228,7 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -259,7 +259,7 @@ exports[`Stepper > renders with description slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -270,7 +270,7 @@ exports[`Stepper > renders with description slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -301,7 +301,7 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">Indicator slot</div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -312,7 +312,7 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">Indicator slot</div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -343,7 +343,7 @@ exports[`Stepper > renders with items correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -354,7 +354,7 @@ exports[`Stepper > renders with items correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -385,7 +385,7 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -396,7 +396,7 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -427,7 +427,7 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-bg-inverted)] group-data-[state=active]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -438,7 +438,7 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-bg-inverted)] group-data-[state=active]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -469,7 +469,7 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+32px)] right-[calc(-50%+32px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-base">Address</h4>
|
||||
@@ -480,7 +480,7 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+32px)] right-[calc(-50%+32px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-base">Shipping</h4>
|
||||
@@ -507,29 +507,29 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size lg vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-base">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-base">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-base">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-base">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -553,7 +553,7 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -564,7 +564,7 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -591,29 +591,29 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size md vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-sm">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-sm">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -637,7 +637,7 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+20px)] right-[calc(-50%+20px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
|
||||
@@ -648,7 +648,7 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+20px)] right-[calc(-50%+20px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
|
||||
@@ -675,29 +675,29 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size sm vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-xs">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-xs">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -721,7 +721,7 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-7" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+36px)] right-[calc(-50%+36px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
|
||||
</div>
|
||||
<div class="mt-3.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-lg">Address</h4>
|
||||
@@ -732,7 +732,7 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-7" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+36px)] right-[calc(-50%+36px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
|
||||
</div>
|
||||
<div class="mt-3.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-lg">Shipping</h4>
|
||||
@@ -759,29 +759,29 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size xl vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-7" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
|
||||
</div>
|
||||
<div class="mt-3.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-lg">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-lg">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-7" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
|
||||
</div>
|
||||
<div class="mt-3.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-lg">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-lg">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -805,7 +805,7 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-3" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+16px)] right-[calc(-50%+16px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
|
||||
</div>
|
||||
<div class="mt-1.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
|
||||
@@ -816,7 +816,7 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-3" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+16px)] right-[calc(-50%+16px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
|
||||
</div>
|
||||
<div class="mt-1.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
|
||||
@@ -843,29 +843,29 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size xs vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-3" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
|
||||
</div>
|
||||
<div class="mt-1.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-xs">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-3" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
|
||||
</div>
|
||||
<div class="mt-1.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-xs">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -889,7 +889,7 @@ exports[`Stepper > renders with title slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Title slot</h4>
|
||||
@@ -900,7 +900,7 @@ exports[`Stepper > renders with title slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Title slot</h4>
|
||||
@@ -931,7 +931,7 @@ exports[`Stepper > renders with ui correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="text-[var(--ui-text)] text-sm font-bold">Address</h4>
|
||||
@@ -942,7 +942,7 @@ exports[`Stepper > renders with ui correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="text-[var(--ui-text)] text-sm font-bold">Shipping</h4>
|
||||
@@ -973,7 +973,7 @@ exports[`Stepper > renders without linear correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -984,7 +984,7 @@ exports[`Stepper > renders without linear correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
|
||||
@@ -7,7 +7,7 @@ exports[`Stepper > renders with as correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -18,7 +18,7 @@ exports[`Stepper > renders with as correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -49,7 +49,7 @@ exports[`Stepper > renders with class correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -60,7 +60,7 @@ exports[`Stepper > renders with class correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -91,7 +91,7 @@ exports[`Stepper > renders with content slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -102,7 +102,7 @@ exports[`Stepper > renders with content slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -133,7 +133,7 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -144,7 +144,7 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -175,7 +175,7 @@ exports[`Stepper > renders with default slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -186,7 +186,7 @@ exports[`Stepper > renders with default slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -217,7 +217,7 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -228,7 +228,7 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -259,7 +259,7 @@ exports[`Stepper > renders with description slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -270,7 +270,7 @@ exports[`Stepper > renders with description slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -301,7 +301,7 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">Indicator slot</div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -312,7 +312,7 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">Indicator slot</div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -343,7 +343,7 @@ exports[`Stepper > renders with items correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -354,7 +354,7 @@ exports[`Stepper > renders with items correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -385,7 +385,7 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -396,7 +396,7 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -427,7 +427,7 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-bg-inverted)] group-data-[state=active]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -438,7 +438,7 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-bg-inverted)] group-data-[state=active]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -469,7 +469,7 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-6" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+32px)] right-[calc(-50%+32px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-base">Address</h4>
|
||||
@@ -480,7 +480,7 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-6" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+32px)] right-[calc(-50%+32px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-base">Shipping</h4>
|
||||
@@ -507,29 +507,29 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size lg vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-6" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-base">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-base">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-6" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-base">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-base">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -553,7 +553,7 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -564,7 +564,7 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
@@ -591,29 +591,29 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size md vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-sm">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-sm">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -637,7 +637,7 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-4" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+20px)] right-[calc(-50%+20px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
|
||||
@@ -648,7 +648,7 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-4" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+20px)] right-[calc(-50%+20px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
|
||||
@@ -675,29 +675,29 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size sm vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-4" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-xs">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-4" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-xs">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -721,7 +721,7 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-7" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+36px)] right-[calc(-50%+36px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
|
||||
</div>
|
||||
<div class="mt-3.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-lg">Address</h4>
|
||||
@@ -732,7 +732,7 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-7" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+36px)] right-[calc(-50%+36px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
|
||||
</div>
|
||||
<div class="mt-3.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-lg">Shipping</h4>
|
||||
@@ -759,29 +759,29 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size xl vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-7" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
|
||||
</div>
|
||||
<div class="mt-3.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-lg">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-lg">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-7" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
|
||||
</div>
|
||||
<div class="mt-3.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-lg">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-lg">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -805,7 +805,7 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-3" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+16px)] right-[calc(-50%+16px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
|
||||
</div>
|
||||
<div class="mt-1.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
|
||||
@@ -816,7 +816,7 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-3" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+16px)] right-[calc(-50%+16px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
|
||||
</div>
|
||||
<div class="mt-1.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
|
||||
@@ -843,29 +843,29 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
|
||||
exports[`Stepper > renders with size xs vertical correctly 1`] = `
|
||||
"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
|
||||
<div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
|
||||
<div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-3" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
|
||||
</div>
|
||||
<div class="mt-1.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-xs">Add your address here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
|
||||
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-3" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
|
||||
<div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
|
||||
</div>
|
||||
<div class="mt-1.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
|
||||
<p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-xs">Set your preferred shipping method</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
|
||||
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
|
||||
<div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full">3</div>
|
||||
</button>
|
||||
@@ -889,7 +889,7 @@ exports[`Stepper > renders with title slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Title slot</h4>
|
||||
@@ -900,7 +900,7 @@ exports[`Stepper > renders with title slot correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Title slot</h4>
|
||||
@@ -931,7 +931,7 @@ exports[`Stepper > renders with ui correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="text-[var(--ui-text)] text-sm font-bold">Address</h4>
|
||||
@@ -942,7 +942,7 @@ exports[`Stepper > renders with ui correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="text-[var(--ui-text)] text-sm font-bold">Shipping</h4>
|
||||
@@ -973,7 +973,7 @@ exports[`Stepper > renders without linear correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
|
||||
@@ -984,7 +984,7 @@ exports[`Stepper > renders without linear correctly 1`] = `
|
||||
<div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
|
||||
<div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
|
||||
</button>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
|
||||
<div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
|
||||
</div>
|
||||
<div class="mt-2.5">
|
||||
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
|
||||
|
||||
Reference in New Issue
Block a user