@rimelight/ui 0.0.42 → 0.0.43

package/src/components/marquee/RLAMarquee.astro

@@ -1,43 +1,62 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { MarqueeProps } from "./marquee"
-import { resolveTheme } from "../../utils/resolveTheme"
-import marqueeThemeDefault, { createMarqueeTheme } from "./marquee.theme"
-const marqueeTheme = resolveTheme(marqueeThemeDefault, createMarqueeTheme)
-
-
-const marquee = scv(marqueeTheme)
-
-const {
-  direction = "left",
-  speed = 40,
-  pauseOnHover = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as MarqueeProps
-
-const classes = resolveClasses(marquee, {
-  direction,
-  pauseOnHover
-}, 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:list={[classes.track, id]} data-slot="track">
-    <slot />
-  </div>
-  <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;
-  }
-`} />
+---
+import type { MarqueeProps } from "./marquee"
+import { marqueeTheme } from "./marquee.theme"
+
+
+const {
+  speed = 40,
+  ...rest
+} = Astro.props as MarqueeProps
+
+const classes = marqueeTheme(Astro.props)
+
+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:list={[classes.track, id]} data-slot="track">
+    <slot />
+  </div>
+  <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;
+  }
+`} />
+
+<style>
+  .animate-marquee,
+  .animate-marquee-left {
+    animation: marquee-left 30s linear infinite;
+  }
+  .animate-marquee-right {
+    animation: marquee-right 30s linear infinite;
+  }
+  .animate-marquee-up {
+    animation: marquee-up 30s linear infinite;
+  }
+  .animate-marquee-down {
+    animation: marquee-down 30s linear infinite;
+  }
+
+  @keyframes marquee-left {
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
+  }
+  @keyframes marquee-right {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+  @keyframes marquee-up {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+  }
+  @keyframes marquee-down {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+</style>

package/src/components/marquee/marquee.theme.ts

@@ -1,29 +1,25 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createMarqueeTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "track"],
-    base: {
-      root: "relative w-full overflow-hidden flex gap-4 mask-gradient-to-r",
-      track: "flex shrink-0 gap-4 min-w-full justify-around animate-marquee"
+export const marqueeTheme = defineTheme("marquee", {
+  slots: ["root", "track"],
+  base: {
+    root: "relative w-full overflow-hidden flex gap-4 mask-gradient-to-r",
+    track: "flex shrink-0 gap-4 min-w-full justify-around animate-marquee"
+  },
+  variants: {
+    direction: {
+      left: { track: "flex-row animate-marquee-left" },
+      right: { track: "flex-row animate-marquee-right" },
+      up: { root: "flex-col h-80", track: "flex-col animate-marquee-up" },
+      down: { root: "flex-col h-80", track: "flex-col animate-marquee-down" }
     },
-    variants: {
-      direction: {
-        left: { track: "flex-row animate-marquee-left" },
-        right: { track: "flex-row animate-marquee-right" },
-        up: { root: "flex-col h-80", track: "flex-col animate-marquee-up" },
-        down: { root: "flex-col h-80", track: "flex-col animate-marquee-down" }
-      },
-      pauseOnHover: {
-        true: { track: "hover:[animation-play-state:paused]" },
-        false: { track: "" }
-      }
-    },
-    defaultVariants: {
-      direction: "left",
-      pauseOnHover: true
+    pauseOnHover: {
+      true: { track: "hover:[animation-play-state:paused]" },
+      false: { track: "" }
     }
-  })
-
-export default createMarqueeTheme()
+  },
+  defaultVariants: {
+    direction: "left",
+    pauseOnHover: true
+  }
+})

package/src/components/meter/RLAMeter.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { MeterProps } from "./meter"
-import meterTheme from "./meter.theme"
-
-
-const meter = scv(meterTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as MeterProps
-
-const classes = resolveClasses(meter, {}, useUi("meter", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { meterTheme } from "./meter.theme"
+
+
+
+const classes = meterTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/meter/meter.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createMeterTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createMeterTheme()
+export const meterTheme = defineTheme("meter", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/modal/RLAModal.astro

@@ -1,18 +1,11 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ModalProps } from "./modal"
-import { resolveTheme } from "../../utils/resolveTheme"
-import modalThemeDefault, { createModalTheme } from "./modal.theme"
-const modalTheme = resolveTheme(modalThemeDefault, createModalTheme)
+import { modalTheme } from "./modal.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const modal = scv(modalTheme)
 
 const {
-  open = false,
   triggerLabel,
   closeOnClickOutside = true,
   closeOnEscape = true,
@@ -20,15 +13,13 @@ const {
   title,
   description,
   size = "md",
-  ui: uiProp,
-  class: className,
   unmountOnHide = true,
   ...rest
-} = Astro.props as ModalProps & { size?: "sm" | "md" | "lg" | "xl" }
+} = Astro.props as ModalProps
 
-const classes = resolveClasses(modal, {
-  size
-}, useUi("modal", uiProp), className)
+
+
+const classes = modalTheme(Astro.props)
 
 const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
 ---
@@ -85,93 +76,100 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
 </div>
 
 <script>
+  /**
+   * <dialog> handles natively:
+   *  - Focus trap (Tab cycles only inside the dialog)
+   *  - Escape key dismissal (fires 'cancel' event)
+   *  - Top-layer stacking (no z-index wrestling)
+   *  - aria-modal semantics
+   *
+   * This script only adds:
+   *  - Show trigger wiring
+   *  - Close button wiring
+   *  - Click-outside detection (via backdrop click: e.target === dialog)
+   *  - Optional scroll lock on <body>
+   *  - Optional Escape suppression (data-close-on-escape="false")
+   *  - Optional unmountOnHide (innerHTML save/restore)
+   */
+  const openDialog = (dialog: HTMLDialogElement) => {
+    // Restore content if it was unmounted
+    if (dialog.getAttribute('data-unmount-on-hide') === 'true' && (dialog as any).rlaSavedHtml) {
+      dialog.innerHTML = (dialog as any).rlaSavedHtml;
+      delete (dialog as any).rlaSavedHtml;
+    }
+    dialog.showModal();
+    if (dialog.getAttribute('data-lock-scroll') === 'true') {
+      document.body.style.overflow = 'hidden';
+    }
+  };
+
+  const closeDialog = (dialog: HTMLDialogElement) => {
+    dialog.close();
+    if (dialog.getAttribute('data-lock-scroll') === 'true') {
+      document.body.style.overflow = '';
+    }
+    if (dialog.getAttribute('data-unmount-on-hide') === 'true') {
+      (dialog as any).rlaSavedHtml = dialog.innerHTML;
+      dialog.innerHTML = '';
+    }
+  };
+
   if (!(window as any).rlaDialogListenerActive) {
     (window as any).rlaDialogListenerActive = true;
+
+    // Show triggers
     document.addEventListener('click', (e) => {
       const target = e.target as HTMLElement | null;
       if (!target) return;
 
+      // Open
       const showTrigger = target.closest('[data-dialog-show]');
       if (showTrigger) {
         const dialogId = showTrigger.getAttribute('data-dialog-show');
         if (dialogId) {
           const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
-          if (dialog) {
-            // Restore content if it was unmounted/cleared
-            if (dialog.getAttribute('data-unmount-on-hide') === 'true' && (dialog as any).rlaSavedHtml) {
-              dialog.innerHTML = (dialog as any).rlaSavedHtml;
-            }
-            if (typeof dialog.showModal === 'function') {
-              dialog.showModal();
-            } else if (typeof (dialog as any).showmodal === 'function') {
-              (dialog as any).showmodal();
-            }
-          }
+          if (dialog) openDialog(dialog);
         }
+        return;
       }
 
+      // Close button
       const closeTrigger = target.closest('[data-dialog-close]');
       if (closeTrigger) {
         const dialogId = closeTrigger.getAttribute('data-dialog-close');
         if (dialogId) {
           const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
-          if (dialog) {
-            dialog.close();
-            // Clear content if unmountOnHide is true
-            if (dialog.getAttribute('data-unmount-on-hide') === 'true') {
-              if (!(dialog as any).rlaSavedHtml) {
-                (dialog as any).rlaSavedHtml = dialog.innerHTML;
-              }
-              // Keep only the close button to ensure it can be reopened/closed properly
-              const closeBtn = dialog.querySelector('[data-slot="close-button"]');
-              dialog.innerHTML = '';
-              if (closeBtn) {
-                dialog.appendChild(closeBtn);
-              }
-            }
-          }
+          if (dialog) closeDialog(dialog);
         }
+        return;
       }
 
+      // Click-outside: for <dialog>, e.target IS the dialog element itself when clicking
+      // on the backdrop (the dialog's padding area outside its content box).
       if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
-        const rect = 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) {
-          const dialog = target as HTMLDialogElement;
-          dialog.close();
-          if (dialog.getAttribute('data-unmount-on-hide') === 'true') {
-            if (!(dialog as any).rlaSavedHtml) {
-              (dialog as any).rlaSavedHtml = dialog.innerHTML;
-            }
-            const closeBtn = dialog.querySelector('[data-slot="close-button"]');
-            dialog.innerHTML = '';
-            if (closeBtn) {
-              dialog.appendChild(closeBtn);
-            }
-          }
-        }
+        closeDialog(target as HTMLDialogElement);
       }
     });
 
-    // Handle dialog escape key
+    // Escape key — suppress if data-close-on-escape="false", otherwise browser
+    // fires 'cancel' naturally which closes the dialog.
     document.addEventListener('cancel', (e) => {
       const dialog = e.target as HTMLDialogElement | null;
-      if (dialog && dialog.tagName === 'DIALOG') {
-        if (dialog.getAttribute('data-unmount-on-hide') === 'true') {
-          if (!(dialog as any).rlaSavedHtml) {
-            (dialog as any).rlaSavedHtml = dialog.innerHTML;
-          }
-          const closeBtn = dialog.querySelector('[data-slot="close-button"]');
+      if (!dialog || dialog.tagName !== 'DIALOG') return;
+
+      if (dialog.getAttribute('data-close-on-escape') === 'false') {
+        e.preventDefault();
+        return;
+      }
+      // Let the browser close it, then clean up
+      if (dialog.getAttribute('data-lock-scroll') === 'true') {
+        document.body.style.overflow = '';
+      }
+      if (dialog.getAttribute('data-unmount-on-hide') === 'true') {
+        requestAnimationFrame(() => {
+          (dialog as any).rlaSavedHtml = dialog.innerHTML;
           dialog.innerHTML = '';
-          if (closeBtn) {
-            dialog.appendChild(closeBtn);
-          }
-        }
+        });
       }
     });
 

package/src/components/modal/RLSModal.tsx

@@ -0,0 +1,156 @@
+import {
+  createMemo,
+  splitProps,
+  Show,
+  onMount,
+  onCleanup,
+  createEffect,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { ModalProps } from "./modal"
+import { modalTheme } from "./modal.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSModalProps extends ModalProps {
+  onClose?: () => void
+  children?: JSX.Element
+  titleSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  footerSlot?: JSX.Element
+}
+
+const RLSModal: Component<RLSModalProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "open",
+    "onClose",
+    "title",
+    "description",
+    "size",
+    "closeOnClickOutside",
+    "closeOnEscape",
+    "lockScroll",
+    "unmountOnHide",
+    "ui",
+    "class",
+    "children",
+    "titleSlot",
+    "descriptionSlot",
+    "footerSlot"
+  ])
+
+  const closeOnClickOutside = () => props.closeOnClickOutside !== false
+  const closeOnEscape = () => props.closeOnEscape !== false
+
+  const handleClose = () => {
+    props.onClose?.()
+  }
+
+  onMount(() => {
+    const handleCancel = (e: Event) => {
+      // Native Escape fires 'cancel' on the dialog element
+      if (e.target !== dialogRef) return
+      if (!closeOnEscape()) {
+        e.preventDefault()
+      } else {
+        e.preventDefault()
+        handleClose()
+      }
+    }
+    const handleClick = (e: MouseEvent) => {
+      // Clicking the ::backdrop means e.target IS the dialog element
+      if (closeOnClickOutside() && e.target === dialogRef) {
+        handleClose()
+      }
+    }
+    document.addEventListener("cancel", handleCancel)
+    document.addEventListener("click", handleClick)
+    onCleanup(() => {
+      document.removeEventListener("cancel", handleCancel)
+      document.removeEventListener("click", handleClick)
+    })
+  })
+
+  const resolvedClasses = createMemo(() =>
+    modalTheme({
+      size: props.size ?? "md",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  let dialogRef: HTMLDialogElement | undefined
+
+  createEffect(() => {
+    if (!dialogRef) return
+    if (props.open) {
+      if (!dialogRef.open) dialogRef.showModal()
+    } else {
+      if (dialogRef.open) dialogRef.close()
+    }
+  })
+
+  return (
+    <Show when={props.open || !props.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 || ""}`}
+        data-slot="content"
+        {...rest}
+      >
+        <button
+          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"
+          aria-label="Close modal"
+          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">
+            {props.titleSlot ? (
+              props.titleSlot
+            ) : props.title ? (
+              <h3
+                class={resolvedClasses().title || "text-lg font-semibold text-highlighted"}
+                data-slot="title"
+              >
+                {props.title}
+              </h3>
+            ) : null}
+
+            {props.descriptionSlot ? (
+              props.descriptionSlot
+            ) : props.description ? (
+              <p
+                class={resolvedClasses().description || "text-sm text-muted"}
+                data-slot="description"
+              >
+                {props.description}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
+
+        {props.children}
+
+        {props.footerSlot ? (
+          <div
+            class={
+              resolvedClasses().footer || "flex justify-end gap-2 mt-6 pt-4 border-t border-default"
+            }
+            data-slot="footer"
+          >
+            {props.footerSlot}
+          </div>
+        ) : null}
+      </dialog>
+    </Show>
+  )
+}
+
+export default RLSModal

package/src/components/modal/RLVModal.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import { computed, useSlots, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ModalProps } from "./modal"
-import modalThemeDefault from "./modal.theme"
+import { modalTheme } from "./modal.theme"
 import RLVIcon from "../icon/RLVIcon.vue"
 
 defineOptions({ name: "RLVModal" })
 
 const attrs = useAttrs()
 const slots = useSlots()
-const modalScv = scv(modalThemeDefault)
 
 const isOpen = defineModel<boolean>("open", { default: false })
 
@@ -36,7 +32,10 @@ const emit = defineEmits<{
 }>()
 
 const resolvedClasses = computed(() =>
-  resolveClasses(modalScv, { size: props.size }, useUi("modal", props.ui), props.class)
+  modalTheme({
+    size: props.size,
+    class: props.class
+  })
 )
 
 function handleClose() {