@rimelight/ui 0.0.33 → 0.0.34

package/src/components/astro/RLAMain.astro

@@ -25,10 +25,15 @@ const Tag = as;
 ---
 
 <Tag
-        class:list={[classes.root]}
+        class:list={[classes.root, "rla-main-container"]}
         data-slot="main"
-        style="padding-top: var(--rl-total-header-height, 4rem)"
         {...rest}
     >
     <slot />
-</Tag>
+</Tag>
+
+<style>
+  .rla-main-container {
+    padding-top: var(--rl-total-header-height, 4rem);
+  }
+</style>

package/src/components/astro/RLAMarquee.astro

@@ -25,12 +25,19 @@ const classes = resolveClasses(marquee, {
 }, useUi("marquee", uiProp), className)
 
 const duration = `${speed}s`
+const id = `marquee-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div class={classes.root} data-slot="marquee-root" {...rest}>
-  <div class={classes.track} data-slot="track" style={{ animationDuration: duration }}>
+  <div class:list={[classes.track, id]} data-slot="track">
     <slot />
   </div>
-  <div class={classes.track} data-slot="track" aria-hidden="true" style={{ animationDuration: duration }}>
+  <div class:list={[classes.track, id]} data-slot="track" aria-hidden="true">
     <slot />
   </div>
 </div>
+
+<style is:inline set:html={`
+  .${id} {
+    animation-duration: ${duration} !important;
+  }
+`} />

package/src/components/astro/RLANavigationMenu.astro

@@ -11,24 +11,36 @@ const {
   items = [],
   color = "primary",
   theme,
+  orientation = "horizontal",
   ui: uiProp,
   class: className,
   ...rest
 } = Astro.props as NavigationMenuProps
 
-const classes = resolveClasses(navigationMenu, { theme }, useUi("navigationMenu", uiProp), className)
+const classes = resolveClasses(navigationMenu, { theme, orientation }, useUi("navigationMenu", uiProp), className)
 ---
 
-<nav class={classes.root} data-slot="root" data-nav-menu {...rest}>
+<nav class={classes.root} data-slot="root" data-nav-menu data-orientation={orientation} {...rest}>
   <ul class={classes.list} data-slot="list" role="list">
     {items.map((item, i) => {
       const hasChildren = item.children && item.children.length > 0
+      
+      const itemPath = (item.href ?? item.to ?? "#") as string
+      const normalizedPath = itemPath.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
+      const currentPath = Astro.url.pathname.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
+      
+      const isActive = item.active ?? (
+        normalizedPath !== '' && normalizedPath !== '/' 
+          ? currentPath.startsWith(normalizedPath)
+          : currentPath === '/'
+      )
+      
       return (
-        <li class={classes.item} data-slot="item" data-nav-item>
+        <li class={classes.item} data-slot="item" data-nav-item data-index={i}>
           {hasChildren ? (
             <button
               type="button"
-              class={classes.trigger}
+              class={classes.link}
               data-slot="trigger"
               data-nav-trigger
               aria-expanded="false"
@@ -43,6 +55,7 @@ const classes = resolveClasses(navigationMenu, { theme }, useUi("navigationMenu"
               href={item.href ?? item.to ?? "#"}
               class={classes.link}
               data-slot="link"
+              aria-current={isActive ? "page" : undefined}
             >
               {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
               {item.label}
@@ -50,25 +63,35 @@ const classes = resolveClasses(navigationMenu, { theme }, useUi("navigationMenu"
           )}
 
           {hasChildren && (
-            <div class={classes.content + " hidden"} data-slot="content" data-nav-content role="region">
-              <ul role="list" class="py-1">
-                {item.children!.map(child => (
-                  <li>
-                    <a
-                      href={child.href ?? child.to ?? "#"}
-                      class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
-                    >
-                      {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted-foreground"} />}
-                      <div>
-                        <div class="font-medium leading-none">{child.label}</div>
-                        {child.description && (
-                          <p class="mt-1 text-xs text-muted-foreground line-clamp-2">{child.description}</p>
-                        )}
-                      </div>
-                    </a>
-                  </li>
-                ))}
-              </ul>
+            <div 
+              class={classes.content + " hidden"} 
+              data-slot="content" 
+              data-nav-content 
+              data-item-index={i}
+              role="region"
+            >
+              {item.slot && Astro.slots.has(`${item.slot}-content`) ? (
+                <slot name={`${item.slot}-content`} />
+              ) : (
+                <ul role="list" class="py-1">
+                  {item.children!.map(child => (
+                    <li>
+                      <a
+                        href={child.href ?? child.to ?? "#"}
+                        class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                      >
+                        {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted-foreground"} />}
+                        <div>
+                          <div class="font-medium leading-none">{child.label}</div>
+                          {child.description && (
+                            <p class="mt-1 text-xs text-muted-foreground line-clamp-2">{child.description}</p>
+                          )}
+                        </div>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              )}
             </div>
           )}
         </li>
@@ -78,60 +101,226 @@ const classes = resolveClasses(navigationMenu, { theme }, useUi("navigationMenu"
 
   <slot />
 
-  <div class={classes.viewport} data-slot="viewport" />
+  <div class={classes.viewportWrapper + " hidden"} data-slot="viewport-wrapper" data-nav-viewport-wrapper>
+    <div class={classes.viewport} data-slot="viewport" data-nav-viewport />
+  </div>
 </nav>
 
 <script>
   document.querySelectorAll("[data-nav-menu]").forEach(menu => {
+    const orientation = menu.getAttribute("data-orientation") || "horizontal";
     const items = menu.querySelectorAll("[data-nav-item]");
+    const viewportWrapper = orientation === "horizontal" ? menu.querySelector("[data-nav-viewport-wrapper]") : null as HTMLElement | null;
+    const viewport = orientation === "horizontal" ? menu.querySelector("[data-nav-viewport]") : null;
 
-    items.forEach(item => {
-      const trigger = item.querySelector("[data-nav-trigger]");
-      const content = item.querySelector("[data-nav-content]");
+    // Teleport viewport wrapper to body to escape parent transforms (e.g. translate-x on header)
+    if (viewportWrapper && viewportWrapper.parentNode !== document.body) {
+      document.body.appendChild(viewportWrapper);
+    }
 
-      if (!trigger || !content) return;
+    let activeItem = null as HTMLElement | null;
+    let hoverTimeout = null as any;
+
+    const updatePosition = () => {
+      if (viewportWrapper && activeItem) {
+        const header = menu.closest("header") || document.querySelector("header");
+        if (header) {
+          const headerRect = header.getBoundingClientRect();
+          viewportWrapper.style.top = `${headerRect.bottom}px`;
+        }
+      }
+    };
 
-      const open = () => {
+    window.addEventListener("scroll", updatePosition, { passive: true });
+    window.addEventListener("resize", updatePosition, { passive: true });
+
+    const open = (item: HTMLElement, trigger: HTMLElement, content: HTMLElement) => {
+      clearTimeout(hoverTimeout);
+      
+      // If there's another active item, close it first (horizontal viewport mode only)
+      if (orientation === "horizontal" && activeItem && activeItem !== item) {
+        close(activeItem);
+      }
+
+      if (orientation === "horizontal") {
+        activeItem = item;
+        updatePosition();
+      }
+
+      if (viewport) {
+        viewport.innerHTML = "";
+        viewport.appendChild(content);
         content.classList.remove("hidden");
-        trigger.setAttribute("aria-expanded", "true");
-        const icon = trigger.querySelector(".i-lucide-chevron-down");
-        if (icon) (icon as HTMLElement).style.transform = "rotate(180deg)";
-      };
+        if (viewportWrapper) {
+          viewportWrapper.classList.remove("hidden");
+          viewportWrapper.setAttribute("data-state", "open");
+        }
+      } else {
+        content.classList.remove("hidden");
+      }
+
+      trigger.setAttribute("aria-expanded", "true");
+      trigger.setAttribute("data-state", "open");
+      const icon = trigger.querySelector(".i-lucide-chevron-down");
+      if (icon) (icon as HTMLElement).style.transform = "rotate(180deg)";
+    };
+
+    const close = (item: HTMLElement) => {
+      const trigger = item.querySelector("[data-nav-trigger]") as HTMLElement | null;
+      const itemIndex = item.getAttribute("data-index");
+      
+      // Find content - either inside viewport or inside the item
+      let content = item.querySelector("[data-nav-content]") as HTMLElement | null;
+      if (!content && viewport) {
+        content = viewport.querySelector(`[data-nav-content][data-item-index="${itemIndex}"]`) as HTMLElement | null;
+      }
 
-      const close = () => {
+      if (content) {
         content.classList.add("hidden");
+        // Move back to item
+        if (viewport && viewport.contains(content)) {
+          item.appendChild(content);
+        }
+      }
+
+      if (trigger) {
         trigger.setAttribute("aria-expanded", "false");
+        trigger.setAttribute("data-state", "closed");
         const icon = trigger.querySelector(".i-lucide-chevron-down");
         if (icon) (icon as HTMLElement).style.transform = "";
-      };
+      }
+
+      if (orientation === "horizontal" && activeItem === item) {
+        activeItem = null;
+      }
+
+      // If no item is active, hide viewport (horizontal viewport mode only)
+      if (orientation === "horizontal" && !activeItem && viewportWrapper) {
+        viewportWrapper.classList.add("hidden");
+        viewportWrapper.setAttribute("data-state", "closed");
+        if (viewport) viewport.innerHTML = "";
+      }
+    };
+
+    const closeAll = () => {
+      items.forEach(item => {
+        close(item as HTMLElement);
+      });
+    };
 
+    items.forEach(itemNode => {
+      const item = itemNode as HTMLElement;
+      const trigger = item.querySelector("[data-nav-trigger]") as HTMLElement | null;
+      const content = item.querySelector("[data-nav-content]") as HTMLElement | null;
+
+      if (!trigger || !content) return;
+
+      // Click behavior (works everywhere, including mobile)
       trigger.addEventListener("click", (e) => {
         e.stopPropagation();
-        const isOpen = !content.classList.contains("hidden");
-        // Close all others
-        items.forEach(other => {
-          const otherContent = other.querySelector("[data-nav-content]");
-          const otherTrigger = other.querySelector("[data-nav-trigger]");
-          if (otherContent && !otherContent.classList.contains("hidden")) {
-            otherContent.classList.add("hidden");
-            otherTrigger?.setAttribute("aria-expanded", "false");
-            const icon = otherTrigger?.querySelector(".i-lucide-chevron-down");
-            if (icon) (icon as HTMLElement).style.transform = "";
-          }
-        });
-        if (!isOpen) open();
+        const isOpen = trigger.getAttribute("aria-expanded") === "true";
+        if (isOpen) {
+          close(item);
+        } else {
+          open(item, trigger, content);
+        }
       });
+
+      // Hover behavior (horizontal desktop only)
+      if (orientation === "horizontal") {
+        item.addEventListener("mouseenter", () => {
+          clearTimeout(hoverTimeout);
+          open(item, trigger, content);
+        });
+
+        item.addEventListener("mouseleave", () => {
+          hoverTimeout = setTimeout(() => {
+            if (activeItem === item) {
+              close(item);
+            }
+          }, 150);
+        });
+      }
     });
 
-    document.addEventListener("click", () => {
-      items.forEach(item => {
-        const content = item.querySelector("[data-nav-content]");
-        const trigger = item.querySelector("[data-nav-trigger]");
-        if (content) content.classList.add("hidden");
-        if (trigger) trigger.setAttribute("aria-expanded", "false");
-        const icon = trigger?.querySelector(".i-lucide-chevron-down");
-        if (icon) (icon as HTMLElement).style.transform = "";
+    // Handle viewport wrapper hover so menu stays open when hovering the mega menu itself
+    if (viewportWrapper) {
+      viewportWrapper.addEventListener("mouseenter", () => {
+        clearTimeout(hoverTimeout);
+      });
+
+      viewportWrapper.addEventListener("mouseleave", () => {
+        hoverTimeout = setTimeout(() => {
+          if (activeItem) {
+            close(activeItem);
+          }
+        }, 150);
       });
+    }
+
+    // Close on clicking outside
+    document.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      if (!menu.contains(target) && (!viewportWrapper || !viewportWrapper.contains(target))) {
+        closeAll();
+      }
     });
   });
 </script>
+
+<style is:global>
+  /* Reset margins, borders, rounding, and rings on the main viewport container */
+  [data-nav-viewport] {
+    margin-top: 0 !important;
+    border: none !important;
+    border-width: 0px !important;
+    border-style: none !important;
+    border-color: transparent !important;
+    border-radius: 0 !important;
+    outline: none !important;
+    outline-width: 0px !important;
+    outline-color: transparent !important;
+    
+    /* Wiping out any UnoCSS/Tailwind rings on the viewport container */
+    --un-ring-width: 0px !important;
+    --tw-ring-width: 0px !important;
+    --un-ring-offset-width: 0px !important;
+    --tw-ring-offset-width: 0px !important;
+    --un-ring-color: transparent !important;
+    --tw-ring-color: transparent !important;
+    --un-ring-shadow: none !important;
+    --tw-ring-shadow: none !important;
+    --un-ring-offset-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+    
+    /* Premium card shadow */
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.35), 0 8px 10px -6px rgb(0 0 0 / 0.35) !important; /* Premium shadow-xl */
+  }
+
+  /* Reset layout and strip standard dropdown styling (borders/shadows/padding) from teleported content nodes */
+  [data-nav-viewport] [data-nav-content] {
+    position: static !important;
+    width: 100% !important;
+    margin: 0 !important;
+    transform: none !important;
+    border: none !important;
+    border-width: 0px !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    background: transparent !important;
+    
+    /* Wiping out any UnoCSS/Tailwind rings on content */
+    --un-ring-width: 0px !important;
+    --tw-ring-width: 0px !important;
+    --un-ring-offset-width: 0px !important;
+    --tw-ring-offset-width: 0px !important;
+    --un-ring-color: transparent !important;
+    --tw-ring-color: transparent !important;
+    --un-ring-shadow: none !important;
+    --tw-ring-shadow: none !important;
+    --un-ring-offset-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+    --un-shadow: none !important;
+    --tw-shadow: none !important;
+  }
+</style>

package/src/components/astro/RLAPagination.astro

@@ -47,10 +47,9 @@ const pages = getPageNumbers()
     <li class={classes.item}>
       <a
         href={currentPage > 1 ? `${baseUrl}${currentPage - 1}` : undefined}
-        class={classes.link}
+        class:list={[classes.link, currentPage === 1 && "pointer-events-none opacity-50"]}
         aria-label="Go to previous page"
         aria-disabled={currentPage === 1}
-        style={currentPage === 1 ? "pointer-events: none; opacity: 0.5;" : ""}
       >
         <span class="i-lucide-chevron-left size-4" aria-hidden="true" />
       </a>
@@ -86,10 +85,9 @@ const pages = getPageNumbers()
     <li class={classes.item}>
       <a
         href={currentPage < totalPages ? `${baseUrl}${currentPage + 1}` : undefined}
-        class={classes.link}
+        class:list={[classes.link, currentPage === totalPages && "pointer-events-none opacity-50"]}
         aria-label="Go to next page"
         aria-disabled={currentPage === totalPages}
-        style={currentPage === totalPages ? "pointer-events: none; opacity: 0.5;" : ""}
       >
         <span class="i-lucide-chevron-right size-4" aria-hidden="true" />
       </a>

package/src/components/astro/RLAProgress.astro

@@ -27,6 +27,7 @@ const classes = resolveClasses(progress, {
 }, useUi("progress", uiProp), className)
 
 const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+const id = `progress-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div
   class={classes.root}
@@ -38,8 +39,13 @@ const percentage = Math.min(100, Math.max(0, (value / max) * 100))
   {...rest}
 >
   <div
-    class={classes.indicator}
+    class:list={[classes.indicator, id]}
     data-slot="indicator"
-    style={{ transform: `translateX(-${100 - percentage}%)` }}
   />
 </div>
+
+<style is:inline set:html={`
+  .${id} {
+    transform: translateX(-${100 - percentage}%) !important;
+  }
+`} />

package/src/components/astro/RLASelect.astro

@@ -72,38 +72,52 @@ const initialLabel = selectedItem ? selectedItem.label : ""
 </div>
 
 <script>
-  document.querySelectorAll("[data-select-wrapper]").forEach(wrapper => {
-    const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
-    const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
-    const items = wrapper.querySelectorAll("[data-select-item]");
-    const valueSpan = wrapper.querySelector("[data-select-value]");
-    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-select-hidden-input]") as HTMLInputElement;
+  const initializeSelects = () => {
+    document.querySelectorAll("[data-select-wrapper]").forEach(wrapper => {
+      if (wrapper.hasAttribute("data-initialized")) return;
+      wrapper.setAttribute("data-initialized", "true");
 
-    if (!trigger || !dropdown) return;
+      const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
+      const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
+      const items = wrapper.querySelectorAll("[data-select-item]");
+      const valueSpan = wrapper.querySelector("[data-select-value]");
+      const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-select-hidden-input]") as HTMLInputElement;
 
-    trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      dropdown.classList.toggle("hidden");
-    });
+      if (!trigger || !dropdown) return;
 
-    items.forEach(item => {
-      item.addEventListener("click", (e) => {
+      trigger.addEventListener("click", (e) => {
         e.stopPropagation();
-        const val = (item as HTMLElement).dataset.value || "";
-        const label = (item as HTMLElement).dataset.label || "";
-        
-        if (hiddenInput) hiddenInput.value = val;
-        if (valueSpan) valueSpan.textContent = label;
-        
-        items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
-        item.querySelector("[data-check-icon]")?.classList.remove("hidden");
-        
-        dropdown.classList.add("hidden");
+        dropdown.classList.toggle("hidden");
+      });
+
+      items.forEach(item => {
+        item.addEventListener("click", (e) => {
+          e.stopPropagation();
+          const val = (item as HTMLElement).dataset.value || "";
+          const label = (item as HTMLElement).dataset.label || "";
+          
+          if (hiddenInput) {
+            hiddenInput.value = val;
+            hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          if (valueSpan) valueSpan.textContent = label;
+          
+          items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
+          item.querySelector("[data-check-icon]")?.classList.remove("hidden");
+          
+          dropdown.classList.add("hidden");
+        });
       });
     });
+  };
 
-    document.addEventListener("click", () => {
+  // Close all dropdowns when clicking outside
+  document.addEventListener("click", () => {
+    document.querySelectorAll("[data-select-dropdown]").forEach(dropdown => {
       dropdown.classList.add("hidden");
     });
   });
+
+  document.addEventListener("DOMContentLoaded", initializeSelects);
+  document.addEventListener("astro:page-load", initializeSelects);
 </script>

package/src/components/astro/RLASlideover.astro

@@ -11,7 +11,7 @@ const slideoverTheme = uiConfig.colors ? createSlideoverTheme() : slideoverTheme
 const slideover = scv(slideoverTheme)
 
 const {
-  side = "right",
+  side = "left",
   title,
   description,
   triggerLabel,
@@ -74,3 +74,68 @@ const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
     </div>
   </dialog>
 </div>
+
+<style is:global>
+  /* Transition/Animation support for native <dialog> slideovers */
+  dialog[data-slot="content"] {
+    transition: transform 0.3s ease, opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete !important;
+    opacity: 0;
+  }
+  
+  /* Left side slideover */
+  dialog[data-slot="content"].left-0 {
+    transform: translateX(-100%);
+  }
+  
+  /* Right side slideover */
+  dialog[data-slot="content"].right-0 {
+    transform: translateX(100%);
+  }
+  
+  /* Open states */
+  dialog[data-slot="content"][open] {
+    opacity: 1 !important;
+    transform: translateX(0) !important;
+  }
+  
+  /* Starting styles for enter transitions */
+  @starting-style {
+    dialog[data-slot="content"][open].left-0 {
+      opacity: 0 !important;
+      transform: translateX(-100%) !important;
+    }
+    dialog[data-slot="content"][open].right-0 {
+      opacity: 0 !important;
+      transform: translateX(100%) !important;
+    }
+    dialog[data-slot="content"][open]::backdrop {
+      background-color: rgba(0, 0, 0, 0) !important;
+      backdrop-filter: blur(0px) !important;
+    }
+  }
+
+  /* Backdrop transition */
+  dialog[data-slot="content"]::backdrop {
+    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete !important;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    backdrop-filter: blur(4px) !important;
+  }
+</style>
+
+<script is:inline>
+  document.addEventListener('click', (e) => {
+    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
+      const rect = e.target.getBoundingClientRect();
+      const isInModal = (
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width
+      );
+      if (!isInModal) {
+        e.target.close();
+      }
+    }
+  });
+</script>
+

package/src/components/astro/RLASlider.astro

@@ -29,17 +29,11 @@ const classes = resolveClasses(slider, {
 
 const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
 ---
-<style define:vars={{ sliderPct: `${percentage}%` }}>
-  [data-slot="range"] { left: 0%; right: calc(100% - var(--slider-pct)); }
-  [data-slot="thumb"] { left: calc(var(--slider-pct) - 9px); }
-</style>
-
 <div class={classes.root} data-slot="slider-root" {...rest}>
   <div class={classes.track} data-slot="track">
-    <div
-      class={classes.range}
-      data-slot="range"
-    />
+    <svg class="h-full w-full overflow-visible pointer-events-none">
+      <rect class:list={[classes.range, "h-full"]} width={`${percentage}%`} fill="currentColor" rx="2" />
+    </svg>
   </div>
   <input
     type="range"
@@ -48,11 +42,17 @@ const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100
     step={step}
     value={value}
     name={name}
-    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
     data-slot="input"
   />
-  <div
-    class={classes.thumb}
-    data-slot="thumb"
-  />
+  <svg class="absolute inset-0 h-full w-full overflow-visible pointer-events-none">
+    <circle
+      cx={`${percentage}%`}
+      cy="50%"
+      r="8"
+      class:list={[classes.thumb, "pointer-events-auto border-none"]}
+      data-slot="thumb"
+      fill="currentColor"
+    />
+  </svg>
 </div>