mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
8c88912a8f
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
113 lines
19 KiB
Plaintext
113 lines
19 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`Slider > renders with as correctly 1`] = `
|
|
"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!---->
|
|
</section>"
|
|
`;
|
|
|
|
exports[`Slider > renders with class correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with color neutral correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-bg-inverted)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with defaultValue correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with disabled correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item=""></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with inverted correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with min max step correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with min steps between thumbs correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="30"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with modelValue correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with multiple thumbs correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="10"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with name correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with orientation vertical correctly 1`] = `
|
|
"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] w-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with size lg correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with size md correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with size sm correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with size xl correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with size xs correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|
|
|
|
exports[`Slider > renders with ui correctly 1`] = `
|
|
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow h-[8px] bg-[var(--ui-bg-elevated)]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
|
|
<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
|
|
<!----></span>"
|
|
`;
|