@rimelight/ui 0.0.43 → 0.0.45

package/src/components/modal/RLAModal.astro

@@ -1,7 +1,7 @@
 ---
 import type { ModalProps } from "./modal"
 import { modalTheme } from "./modal.theme"
-import RLAIcon from "../icon/RLAIcon.astro"
+import RLAButton from "../button/RLAButton.astro"
 
 
 
@@ -49,15 +49,18 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
     data-unmount-on-hide={unmountOnHide ? "true" : "false"}
     {...rest}
   >
-    <button
+    <RLAButton
       class={classes.closeButton}
       data-slot="close-button"
       type="button"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      square
+      leadingIcon="i-rl-close"
       data-dialog-close={modalId}
       aria-label="Close modal"
-    >
-      <RLAIcon name="close" class="size-4" aria-hidden="true" />
-    </button>
+    />
 
     <div class={classes.header} data-slot="header">
       {title && <h3 class={classes.title} data-slot="title">{title}</h3>}

package/src/components/modal/RLSModal.tsx

@@ -10,7 +10,7 @@ import {
 } from "solid-js"
 import type { ModalProps } from "./modal"
 import { modalTheme } from "./modal.theme"
-import RLSIcon from "../icon/RLSIcon"
+import RLSButton from "../button/RLSButton"
 
 export interface RLSModalProps extends ModalProps {
   onClose?: () => void
@@ -41,6 +41,7 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
 
   const closeOnClickOutside = () => props.closeOnClickOutside !== false
   const closeOnEscape = () => props.closeOnEscape !== false
+  const unmountOnHide = () => props.unmountOnHide !== false
 
   const handleClose = () => {
     props.onClose?.()
@@ -54,8 +55,8 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
         e.preventDefault()
       } else {
         e.preventDefault()
-        handleClose()
       }
+      handleClose()
     }
     const handleClick = (e: MouseEvent) => {
       // Clicking the ::backdrop means e.target IS the dialog element
@@ -91,24 +92,28 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
   })
 
   return (
-    <Show when={props.open || !props.unmountOnHide}>
+    <Show when={props.open || !unmountOnHide()}>
       <dialog
         ref={(el) => (dialogRef = el)}
-        class={`w-full rounded-xl border border-default bg-default p-6 shadow-xl outline-none flex flex-col max-h-[90vh] overflow-y-auto text-foreground backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
-          resolvedClasses().content || ""
-        }  ${props.class || ""}`}
+        class={`w-[calc(100%-1.5rem)] sm:w-full rounded-xl border border-default bg-default p-5 sm:p-6 shadow-xl outline-none flex flex-col max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto text-highlighted backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
+          props.open ? "" : "hidden"
+        } ${resolvedClasses().content || ""}  ${props.class || ""}`}
+        data-state={props.open ? "open" : "closed"}
         data-slot="content"
         {...rest}
       >
-        <button
+        <RLSButton
           type="button"
-          class="absolute right-4 top-4 rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-neutral-100 dark:hover:bg-neutral-800 transition cursor-pointer border-none bg-transparent"
-          data-slot="close-button"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          square
+          leadingIcon="close"
           aria-label="Close modal"
+          data-slot="close-button"
+          class="absolute right-4 top-4 text-muted hover:text-highlighted"
           onClick={handleClose}
-        >
-          <RLSIcon name="close" size="sm" aria-hidden="true" />
-        </button>
+        />
 
         {props.title || props.description || props.titleSlot || props.descriptionSlot ? (
           <div class={resolvedClasses().header || "mb-4"} data-slot="header">

package/src/components/modal/modal.theme.ts

@@ -17,8 +17,9 @@ export const modalTheme = defineTheme("modal", {
     trigger: "",
     backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
     content: [
-      "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-default",
-      "bg-default p-6 shadow-xl transition-all duration-300 outline-none",
+      "fixed left-1/2 top-1/2 z-50 w-[calc(100%-1.5rem)] sm:w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-default",
+      "bg-default p-5 sm:p-6 shadow-xl transition-all duration-300 outline-none",
+      "max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto",
       "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
     ],
@@ -27,8 +28,8 @@ export const modalTheme = defineTheme("modal", {
     description: "text-sm text-muted leading-relaxed",
     footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
     closeButton: [
-      "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100",
-      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+      "absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100",
+      "focus:outline-none"
     ]
   },
   variants: {

package/src/components/navigation-menu/RLANavigationMenu.astro

@@ -3,17 +3,14 @@ import RLAIcon from "../icon/RLAIcon.astro"
 import type { NavigationMenuProps } from "./navigation-menu"
 import { navigationMenuTheme } from "./navigation-menu.theme"
 
-
-
 const {
   items = [],
   color = "primary",
   orientation = "horizontal",
+  theme,
   ...rest
 } = Astro.props as NavigationMenuProps
 
-
-
 const classes = navigationMenuTheme(Astro.props)
 
 const slotContents: Record<string, string> = {}
@@ -26,22 +23,22 @@ await Promise.all(
 )
 ---
 
-<rla-navigation-menu orientation={orientation} {...rest}>
+<rla-navigation-menu orientation={orientation} data-theme={theme} {...rest}>
   <nav class={classes.root} data-slot="root" data-nav-menu data-orientation={orientation}>
     <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 !== '/' 
+          normalizedPath !== '' && normalizedPath !== '/'
             ? currentPath.startsWith(normalizedPath)
             : currentPath === '/'
         )
-        
+
         return (
           <li class={classes.item} data-slot="item" data-nav-item data-index={i}>
             {hasChildren ? (
@@ -55,7 +52,7 @@ await Promise.all(
               >
                 {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
                 {item.label}
-                <RLAIcon name="chevronDown" class="ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" data-chevron />
+                <RLAIcon name="i-rl-chevronDown" class="ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" data-chevron />
               </button>
             ) : (
               <a
@@ -70,10 +67,10 @@ await Promise.all(
             )}
 
             {hasChildren && (
-              <div 
-                class={classes.content + " hidden"} 
-                data-slot="content" 
-                data-nav-content 
+              <div
+                class={classes.content + " hidden"}
+                data-slot="content"
+                data-nav-content
                 data-item-index={i}
                 role="region"
               >
@@ -85,7 +82,7 @@ await Promise.all(
                       <li>
                         <a
                           href={typeof child.href === "string" ? child.href : (typeof child.to === "string" ? 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"
+                          class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accented hover:text-highlighted transition-colors"
                         >
                           {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted"} />}
                           <div>
@@ -151,7 +148,7 @@ await Promise.all(
 
       const open = (item: HTMLElement, trigger: HTMLElement, content: HTMLElement) => {
         clearTimeout(hoverTimeout);
-        
+
         if (orientation === "horizontal" && activeItem && activeItem !== item) {
           close(activeItem);
         }
@@ -182,7 +179,7 @@ await Promise.all(
       const close = (item: HTMLElement) => {
         const trigger = item.querySelector("[data-nav-trigger]") as HTMLElement | null;
         const itemIndex = item.getAttribute("data-index");
-        
+
         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;
@@ -329,7 +326,7 @@ await Promise.all(
     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;
@@ -341,7 +338,7 @@ await Promise.all(
     --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 */
   }
@@ -356,8 +353,7 @@ await Promise.all(
     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;

package/src/components/navigation-menu/navigation-menu.theme.ts

@@ -6,20 +6,16 @@ export const navigationMenuTheme = defineTheme("navigation-menu", {
     root: "relative z-10 flex w-full",
     list: "group flex flex-1 list-none",
     item: "relative",
-    link: "text-highlighted inline-flex items-center px-4 py-2 text-sm font-medium transition-colors hover:text-accent-foreground focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+    link: "text-highlighted inline-flex items-center px-4 py-2 text-sm font-medium transition-colors hover:text-highlighted focus:text-highlighted focus:outline-none disabled:pointer-events-none disabled:opacity-50",
     trigger:
-      "group inline-flex h-10 items-center rounded-md bg-default px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 gap-1",
+      "group inline-flex h-10 items-center rounded-md bg-default px-4 py-2 text-sm font-medium transition-colors hover:bg-accented hover:text-highlighted focus:bg-accented focus:text-highlighted focus:outline-none disabled:pointer-events-none disabled:opacity-50 gap-1",
     content:
       "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-elevated p-1 text-highlighted shadow-md origin-top-left",
     viewportWrapper: "absolute left-0 top-full flex justify-center w-full",
     viewport:
-      "relative mt-1.5 h-auto w-full origin-top overflow-hidden rounded-md border bg-elevated text-highlighted shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
+      "relative mt-1.5 h-auto w-full origin-top overflow-hidden rounded-md bg-default text-highlighted shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
   },
   variants: {
-    theme: {
-      light: { link: "rl-light", trigger: "rl-light" },
-      dark: { link: "rl-dark", trigger: "rl-dark" }
-    },
     orientation: {
       horizontal: {
         root: "max-w-max flex-1 items-center justify-center",

package/src/components/pagination/RLAPagination.astro

@@ -44,7 +44,7 @@ const pages = getPageNumbers()
         aria-label="Go to previous page"
         aria-disabled={currentPage === 1}
       >
-        <RLAIcon name="chevronLeft" class="size-4" aria-hidden="true" />
+        <RLAIcon name="i-rl-chevronLeft" class="size-4" aria-hidden="true" />
       </a>
     </li>
 
@@ -84,7 +84,7 @@ const pages = getPageNumbers()
         aria-label="Go to next page"
         aria-disabled={currentPage === totalPages}
       >
-        <RLAIcon name="chevronRight" class="size-4" aria-hidden="true" />
+        <RLAIcon name="i-rl-chevronRight" class="size-4" aria-hidden="true" />
       </a>
     </li>
   </ul>

package/src/components/pagination/pagination.theme.ts

@@ -14,7 +14,7 @@ export const paginationTheme = defineTheme("pagination", {
   },
   variants: {
     active: {
-      true: { link: "border-primary bg-primary text-primary-foreground hover:bg-primary/95" },
+      true: { link: "border-primary bg-primary text-neutral-50 hover:bg-primary/95" },
       false: { link: "" }
     }
   },

package/src/components/popover/RLAPopover.astro

@@ -87,6 +87,10 @@ const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
     [popover][data-slot="content"] {
       position: absolute;
       position-anchor: --rla-popover-anchor;
+      /* The theme adds `top-full left-1/2 -translate-x-1/2` for non-popover
+         dropdowns; that transform shifts a top-layer popover off its anchor,
+         so neutralize it when we position via CSS anchor properties. */
+      transform: none;
     }
 
     /* bottom (default) */
@@ -234,6 +238,41 @@ const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
         });
         panel.addEventListener('mouseleave', hide);
       }
+
+      // Deterministic positioning: anchor positioning is a progressive
+      // enhancement, but we always place the popover next to its trigger
+      // via JS so it is reliably visible (no off-screen / scrollbar issues).
+      const positionPopover = () => {
+        if (!trigger) return;
+        const pw = panel.offsetWidth;
+        const ph = panel.offsetHeight;
+        if (pw === 0 || ph === 0) return; // closed or not yet rendered
+
+        const parts = (container.dataset.placement || 'bottom').split('-');
+        const vert = parts[0];            // top | bottom
+        const horiz = parts[1] || 'center'; // start | end | center
+        const gap = 8;
+        const r = trigger.getBoundingClientRect();
+
+        let top = vert === 'top' ? r.top - ph - gap : r.bottom + gap;
+        let left =
+          horiz === 'end' ? r.right - pw :
+          horiz === 'start' ? r.left :
+          r.left + r.width / 2 - pw / 2;
+
+        left = Math.max(8, Math.min(left, window.innerWidth - pw - 8));
+        top = Math.max(8, Math.min(top, window.innerHeight - ph - 8));
+
+        panel.style.position = 'fixed';
+        panel.style.transform = 'none';
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
+      };
+
+      panel.addEventListener('toggle', () => positionPopover());
+      const reposition = () => positionPopover();
+      window.addEventListener('scroll', reposition, true);
+      window.addEventListener('resize', reposition);
     });
   }
 

package/src/components/progress/RLAProgress.astro

@@ -6,6 +6,7 @@ import { progressTheme } from "./progress.theme"
 const {
   value = 0,
   max = 100,
+  theme,
   ...rest
 } = Astro.props as ProgressProps
 
@@ -21,6 +22,7 @@ const id = `progress-${Math.random().toString(36).substring(2, 9)}`
   aria-valuemin={0}
   aria-valuemax={max}
   aria-valuenow={value}
+  data-theme={theme}
   {...rest}
 >
   <div

package/src/components/progress/progress.theme.ts

@@ -12,10 +12,6 @@ export const progressTheme = defineTheme("progress", {
       sm: { root: "h-1.5" },
       md: { root: "h-3" },
       lg: { root: "h-5" }
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   defaultVariants: {

package/src/components/scroll-area/scroll-area.theme.ts

@@ -8,7 +8,7 @@ export const scrollAreaTheme = defineTheme("scroll-area", {
       "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
     scrollbar:
       "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
-    thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted/45"
+    thumb: "relative flex-1 rounded-full bg-neutral-200 transition-colors hover:bg-muted/45"
   },
   variants: {
     orientation: {

package/src/components/scroll-to-top/RLAScrollToTop.astro

@@ -10,6 +10,7 @@ const {
   duration = 0.1,
   threshold = 200,
   showProgress = false,
+  theme,
   ...rest
 } = Astro.props as ScrollToTopProps
 
@@ -17,7 +18,7 @@ const classes = scrollToTopTheme(Astro.props)
 
 ---
 
-<rla-scroll-to-top data-threshold={threshold} data-duration={duration} data-color={color} data-progress-width={progressWidth} {...rest}>
+<rla-scroll-to-top data-threshold={threshold} data-duration={duration} data-color={color} data-progress-width={progressWidth} data-theme={theme} {...rest}>
   <div
     class:list={["rla-scroll-to-top-inner", "fixed bottom-6 right-6 z-50", classes.root]}
   >
@@ -110,12 +111,12 @@ const classes = scrollToTopTheme(Astro.props)
       const gaugeProgressEl = innerElement.querySelector('[data-gauge-progress]') as HTMLElement | null;
       if (gaugeProgressEl) {
         gaugeProgressEl.style.setProperty('--gauge-stroke-width', `${gaugeBorderWidth}px`);
-        gaugeProgressEl.style.setProperty('--gauge-color', `var(--color-${color}-500)`);
+        gaugeProgressEl.style.setProperty('--gauge-color', `var(--rl-${color}-500)`);
       }
       const gaugeTrackEl = innerElement.querySelector('.gauge-track') as HTMLElement | null;
       if (gaugeTrackEl) {
         gaugeTrackEl.style.setProperty('border-width', `${gaugeBorderWidth}px`);
-        gaugeTrackEl.style.setProperty('border-color', `var(--color-${color}-900)`);
+        gaugeTrackEl.style.setProperty('border-color', `var(--rl-${color}-900)`);
         gaugeTrackEl.style.setProperty('background-color', '#000');
       }
 
@@ -195,8 +196,8 @@ const classes = scrollToTopTheme(Astro.props)
     border-radius: 50%;
     background: conic-gradient(
       from 0deg,
-      var(--gauge-color, var(--color-primary-500)) 0deg,
-      var(--gauge-color, var(--color-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+      var(--gauge-color, var(--rl-primary-500)) 0deg,
+      var(--gauge-color, var(--rl-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
       transparent calc(var(--gauge-progress, 0) * 3.6deg)
     );
     -webkit-mask: radial-gradient(

package/src/components/scroll-to-top/RLVScrollToTop.vue

@@ -30,10 +30,10 @@ function updateCssVars() {
   if (!styleEl) return
   styleEl.textContent = `
     [data-rla-instance="${instanceId}"] {
-      --gauge-track-border-color: var(--color-${color}-900);
-      --gauge-track-bg: var(--color-${color}-950);
+      --gauge-track-border-color: var(--rl-${color}-900);
+      --gauge-track-bg: var(--rl-${color}-950);
       --gauge-stroke-width: ${gaugeBorderWidth}px;
-      --gauge-color: var(--color-${color}-500);
+      --gauge-color: var(--rl-${color}-500);
       --gauge-progress: ${scrollPercentage.value};
     }
   `
@@ -116,8 +116,8 @@ onUnmounted(() => {
   border-radius: 50%;
   border-style: solid;
   border-width: var(--gauge-stroke-width, 3px);
-  border-color: var(--gauge-track-border-color, var(--color-primary-900));
-  background-color: var(--gauge-track-bg, var(--color-primary-950));
+  border-color: var(--gauge-track-border-color, var(--rl-primary-900));
+  background-color: var(--gauge-track-bg, var(--rl-primary-950));
 }
 
 .gauge-progress {
@@ -126,8 +126,8 @@ onUnmounted(() => {
   border-radius: 50%;
   background: conic-gradient(
     from 0deg,
-    var(--gauge-color, var(--color-primary-500)) 0deg,
-    var(--gauge-color, var(--color-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+    var(--gauge-color, var(--rl-primary-500)) 0deg,
+    var(--gauge-color, var(--rl-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
     transparent calc(var(--gauge-progress, 0) * 3.6deg)
   );
   -webkit-mask: radial-gradient(

package/src/components/scroll-to-top/scroll-to-top.theme.ts

@@ -11,23 +11,19 @@ export const scrollToTopTheme = defineTheme("scroll-to-top", {
     icon: "size-6 text-white"
   },
   variants: {
-    color: "auto",
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
-    }
+    color: "auto"
   },
   compoundVariants: [
     {
       color: "primary",
       classNames: {
-        icon: "text-primary-foreground"
+        icon: "text-neutral-50"
       }
     },
     {
       color: "secondary",
       classNames: {
-        icon: "text-secondary-foreground"
+        icon: "text-neutral-50"
       }
     }
   ],

package/src/components/search/RLASearch.astro

@@ -55,7 +55,7 @@ const emptyId = `search-empty-${uniqueId}`
       square
       aria-label="Open Search"
     >
-      <RLAIcon name="search" class="w-5 h-5" />
+      <RLAIcon name="i-rl-search" class="w-5 h-5" />
     </RLAButton>
   )}
 
@@ -77,11 +77,11 @@ const emptyId = `search-empty-${uniqueId}`
             trailing: "absolute right-0 flex items-center gap-2"
           }}
         >
-          <RLAIcon name="search" class={classes.headerIcon} slot="leading" />
+          <RLAIcon name="i-rl-search" class={classes.headerIcon} slot="leading" />
           <div slot="trailing" class="flex items-center gap-2">
             <RLAKbd size="sm">Esc</RLAKbd>
             <button id={`${modalId}-close`} class={classes.close} aria-label="Close search">
-              <RLAIcon name="close" class={classes.closeIcon} />
+              <RLAIcon name="i-rl-close" class={classes.closeIcon} />
             </button>
           </div>
         </RLAInput>