@rimelight/ui 0.0.42 → 0.0.44

package/src/components/toast/RLAToast.astro

@@ -1,40 +1,38 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ToastProps } from "./toast"
-import toastTheme from "./toast.theme"
+import { toastTheme } from "./toast.theme"
 
 import RLAIcon from "../icon/RLAIcon.astro"
 
-const toast = scv(toastTheme)
 
 const {
   title,
   description,
   variant = "default",
   actionLabel,
-  duration = 5000,
-  color = "primary",
-  ui: uiProp,
-  class: className,
+  duration = 6000,
   dismissable = true,
   ...rest
 } = Astro.props as ToastProps
 
-const classes = resolveClasses(toast, {
-  variant: ["success", "error", "warning", "info"].includes(variant ?? "") ? variant : "default"
-}, useUi("toast", uiProp), className)
+const classes = toastTheme({
+  ...Astro.props,
+  variant: ["success",
+  "error",
+  "warning",
+  "info"].includes(variant ?? "") ? variant : "default"
+})
 
 const variantIcons: Record<string, string> = {
-  default: "bell",
-  error: "circleX",
-  success: "circleCheck",
-  warning: "alertTriangle",
-  info: "info",
+  default: "i-rl-bell",
+  error: "i-rl-circleCheck",
+  success: "i-rl-circleCheck",
+  warning: "i-rl-alertTriangle",
+  info: "i-rl-info",
 }
 
 const icon = variantIcons[variant] ?? variantIcons.default!
+const isError = variant === "error"
 ---
 
 <div
@@ -43,9 +41,10 @@ const icon = variantIcons[variant] ?? variantIcons.default!
   data-toast
   data-duration={duration}
   data-dismissable={dismissable.toString()}
-  role="alert"
-  aria-live="assertive"
+  role={isError ? "alert" : "status"}
+  aria-live={isError ? "assertive" : "polite"}
   aria-atomic="true"
+  tabindex="-1"
   {...rest}
 >
   {/* Icon */}
@@ -91,27 +90,54 @@ const icon = variantIcons[variant] ?? variantIcons.default!
       data-toast-close
       aria-label="Dismiss notification"
     >
-      <RLAIcon name="close" class="size-3.5" aria-hidden="true" />
+      <RLAIcon name="i-rl-close" class="size-3.5" aria-hidden="true" />
     </button>
   )}
 </div>
 
 <script>
-  document.querySelectorAll("[data-toast]").forEach(toast => {
+  document.querySelectorAll("[data-toast]").forEach(toastEl => {
+    const toast = toastEl as HTMLElement;
     const dismissable = toast.getAttribute("data-dismissable") !== "false";
     if (!dismissable) return;
 
     const close = toast.querySelector("[data-toast-close]");
-    const duration = parseInt((toast as HTMLElement).dataset.duration ?? "5000", 10);
+    const duration = parseInt(toast.dataset.duration ?? "6000", 10);
+    let timerId: ReturnType<typeof setTimeout> | null = null;
+    let startTime = Date.now();
+    let remaining = duration;
 
     const dismiss = () => {
       toast.classList.add("opacity-0", "translate-y-2", "pointer-events-none");
       toast.addEventListener("transitionend", () => toast.remove(), { once: true });
     };
 
-    // Auto-dismiss
+    const startTimer = () => {
+      if (duration > 0 && remaining > 0) {
+        startTime = Date.now();
+        timerId = setTimeout(dismiss, remaining);
+      }
+    };
+
+    const pauseTimer = () => {
+      if (timerId !== null) {
+        clearTimeout(timerId);
+        timerId = null;
+        remaining -= Date.now() - startTime;
+      }
+    };
+
+    // Auto-dismiss with pause on hover & focus
     if (duration > 0) {
-      setTimeout(dismiss, duration);
+      startTimer();
+      toast.addEventListener("mouseenter", pauseTimer);
+      toast.addEventListener("mouseleave", startTimer);
+      toast.addEventListener("focusin", pauseTimer);
+      toast.addEventListener("focusout", (e) => {
+        if (!toast.contains(e.relatedTarget as Node)) {
+          startTimer();
+        }
+      });
     }
 
     // Manual close

package/src/components/toast/store.ts

@@ -0,0 +1,97 @@
+import { atom } from "../../stores"
+
+export interface ToastItem {
+  id: string
+  title: string
+  description?: string
+  variant?: "success" | "error" | "warning" | "info" | "default"
+  duration?: number
+  color?: string
+  icon?: string
+  onDismiss?: () => void
+}
+
+export type Toast = ToastItem
+
+export const toasts = atom<ToastItem[]>([])
+
+export function addToast(toast: Omit<ToastItem, "id"> & { id?: string }): ToastItem {
+  const id =
+    toast.id ||
+    (typeof crypto !== "undefined" && crypto.randomUUID
+      ? crypto.randomUUID()
+      : Math.random().toString(36).substring(2, 9))
+  const item: ToastItem = { duration: 6000, ...toast, id }
+  toasts.set([...toasts.get(), item])
+  return item
+}
+
+export function removeToast(id: string) {
+  const current = toasts.get()
+  const target = current.find((t) => t.id === id)
+  if (target?.onDismiss) {
+    const cb = target.onDismiss
+    delete target.onDismiss
+    try {
+      cb()
+    } catch (err) {
+      console.error("Error executing toast onDismiss callback:", err)
+    }
+  }
+  toasts.set(current.filter((t) => t.id !== id))
+}
+
+export function clearToasts() {
+  toasts.set([])
+}
+
+export type ToastInput = string | (Omit<ToastItem, "id"> & { id?: string })
+
+function normalizeToastInput(
+  input: ToastInput,
+  description?: string,
+  variant?: ToastItem["variant"],
+  extra?: Partial<ToastItem>
+): Omit<ToastItem, "id"> & { id?: string } {
+  if (typeof input === "string") {
+    return {
+      title: input,
+      ...(description !== undefined ? { description } : {}),
+      ...(variant ? { variant } : {}),
+      ...extra
+    }
+  }
+  return {
+    ...input,
+    ...(variant && !input.variant ? { variant } : {}),
+    ...extra
+  }
+}
+
+export const toast = Object.assign(
+  (input: ToastInput, description?: string, options?: Partial<ToastItem>) => {
+    return addToast(normalizeToastInput(input, description, undefined, options))
+  },
+  {
+    error: (input: ToastInput, description?: string, options?: Partial<ToastItem>) =>
+      addToast(normalizeToastInput(input, description, "error", options)),
+    success: (input: ToastInput, description?: string, options?: Partial<ToastItem>) =>
+      addToast(normalizeToastInput(input, description, "success", options)),
+    warning: (input: ToastInput, description?: string, options?: Partial<ToastItem>) =>
+      addToast(normalizeToastInput(input, description, "warning", options)),
+    info: (input: ToastInput, description?: string, options?: Partial<ToastItem>) =>
+      addToast(normalizeToastInput(input, description, "info", options)),
+    add: addToast,
+    remove: removeToast,
+    clear: clearToasts
+  }
+)
+
+export const showErrorToast = (title: string, description?: string, options?: Partial<ToastItem>) =>
+  toast.error(title, description, options)
+
+export const showSuccessToast = (
+  title: string,
+  description?: string,
+  options?: Partial<ToastItem>
+) => toast.success(title, description, options)

package/src/components/toast/toast.theme.ts

@@ -1,37 +1,34 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createToastTheme = () =>
-  defineTheme({
-    slots: ["root", "title", "description", "action", "close"],
-    base: {
-      root: "group pointer-events-auto relative flex w-full items-start justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
-      title: "text-sm font-semibold",
-      description: "text-xs opacity-90",
-      action:
-        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.error]:border-muted/40 group-[.error]:hover:border-error-500/30 group-[.error]:hover:bg-error-500 group-[.error]:hover:text-white group-[.error]:focus:ring-error-500",
-      close:
-        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
-    },
-    variants: {
-      variant: {
-        default: { root: "bg-background border-border" },
-        error: {
-          root: "error group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
-        },
-        success: {
-          root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400"
-        },
-        warning: {
-          root: "border-warning-500/20 bg-warning-500/10 text-warning-700 dark:text-warning-400"
-        },
-        info: {
-          root: "border-info-500/20 bg-info-500/10 text-info-700 dark:text-info-400"
-        }
+export const toastTheme = defineTheme("toast", {
+  slots: ["root", "title", "description", "action", "close"],
+  base: {
+    root: "group pointer-events-auto relative flex w-full items-start justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-default bg-default text-highlighted",
+    title: "text-sm font-semibold",
+    description: "text-xs opacity-90",
+    action:
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.error]:border-muted/40 group-[.error]:hover:border-error-500/30 group-[.error]:hover:bg-error-500 group-[.error]:hover:text-white group-[.error]:focus:ring-error-500",
+    close:
+      "absolute right-2 top-2 rounded-md p-1 text-highlighted/50 opacity-0 transition-opacity hover:text-highlighted focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
+  },
+  variants: {
+    variant: {
+      default: { root: "bg-default border-default" },
+      error: {
+        root: "error group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
+      },
+      success: {
+        root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400"
+      },
+      warning: {
+        root: "border-warning-500/20 bg-warning-500/10 text-warning-700 dark:text-warning-400"
+      },
+      info: {
+        root: "border-info-500/20 bg-info-500/10 text-info-700 dark:text-info-400"
       }
-    },
-    defaultVariants: {
-      variant: "default"
     }
-  })
-
-export default createToastTheme()
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+})

package/src/components/toast/toast.ts

@@ -1,4 +1,4 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 export interface ToastProps {
   /**
    * Main toast title.

package/src/components/toaster/RLAToaster.astro

@@ -1,10 +1,16 @@
 ---
 ---
 
-<div id="rla-toaster-container" class="fixed bottom-5 right-5 z-[200] flex flex-col gap-2 max-w-sm w-full pointer-events-none"></div>
+<div
+  id="rla-toaster-container"
+  class="fixed bottom-5 right-5 z-[200] flex flex-col gap-2 max-w-sm w-full pointer-events-none"
+  aria-live="polite"
+  aria-atomic="false"
+  role="status"
+></div>
 
 <script>
-  import { toasts, removeToast, addToast } from "../../stores/toast"
+  import { toasts, removeToast, addToast } from "../toast/store"
 
   function checkPendingToasts() {
     const stored = sessionStorage.getItem("pending_toast")
@@ -56,9 +62,30 @@
   document.addEventListener("astro:page-load", checkPendingToasts)
 
   const container = document.getElementById("rla-toaster-container")
+  const activeTimers = new Map<string, { timerId: ReturnType<typeof setTimeout> | null; startTime: number; remaining: number }>()
+
+  // Keyboard shortcut (Alt + T) to jump focus to active toasts for keyboard accessibility
+  window.addEventListener("keydown", (e) => {
+    if (e.altKey && (e.key === "t" || e.key === "T")) {
+      const firstCloseBtn = container?.querySelector<HTMLButtonElement>("button")
+      if (firstCloseBtn) {
+        e.preventDefault()
+        firstCloseBtn.focus()
+      }
+    }
+  })
 
   toasts.subscribe((list) => {
     if (!container) return
+    
+    // Cleanup old timers for removed toasts
+    for (const [id, timerData] of activeTimers.entries()) {
+      if (!list.some(t => t.id === id)) {
+        if (timerData.timerId) clearTimeout(timerData.timerId)
+        activeTimers.delete(id)
+      }
+    }
+
     container.innerHTML = ""
     list.forEach((t) => {
       const el = document.createElement("div")
@@ -67,20 +94,63 @@
         ? "bg-error-900 text-error-100 border-error-700"
         : "bg-neutral-900 text-white border-neutral-800 dark:bg-neutral-800"
       const iconSvg = isError
-        ? `<svg class="size-4 shrink-0 text-error-400 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>`
-        : `<svg class="size-4 shrink-0 text-success-400 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>`
+        ? `<svg class="size-4 shrink-0 text-error-400 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>`
+        : `<svg class="size-4 shrink-0 text-success-400 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>`
 
       el.className = `pointer-events-auto flex items-start gap-3 p-4 rounded-lg border shadow-xl transition-all duration-300 ${bgClass}`
+      el.setAttribute("role", isError ? "alert" : "status")
+      el.setAttribute("aria-live", isError ? "assertive" : "polite")
+      el.setAttribute("tabindex", "-1")
+
       el.innerHTML = `
         ${iconSvg}
         <div class="flex flex-col gap-0.5 flex-1 min-w-0">
           <div class="font-semibold text-sm">${t.title}</div>
           ${t.description ? `<div class="text-xs opacity-90">${t.description}</div>` : ""}
         </div>
-        <button type="button" class="text-neutral-400 hover:text-white p-0.5 rounded focus:outline-none" aria-label="Close">
-          <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
+        <button type="button" class="text-neutral-400 hover:text-white p-0.5 rounded focus:outline-none focus:ring-2 focus:ring-primary-500" aria-label="Dismiss notification">
+          <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
         </button>
       `
+
+      // Auto-dismiss management with pause-on-hover/focus
+      const duration = t.duration ?? 6000
+      if (duration > 0) {
+        let timerData = activeTimers.get(t.id)
+        if (!timerData) {
+          timerData = { timerId: null, startTime: Date.now(), remaining: duration }
+          activeTimers.set(t.id, timerData)
+        }
+
+        const startTimer = () => {
+          if (timerData.remaining > 0) {
+            timerData.startTime = Date.now()
+            timerData.timerId = setTimeout(() => {
+              removeToast(t.id)
+            }, timerData.remaining)
+          }
+        }
+
+        const pauseTimer = () => {
+          if (timerData.timerId !== null) {
+            clearTimeout(timerData.timerId)
+            timerData.timerId = null;
+            timerData.remaining -= Date.now() - timerData.startTime
+          }
+        }
+
+        startTimer()
+
+        el.addEventListener("mouseenter", pauseTimer)
+        el.addEventListener("mouseleave", startTimer)
+        el.addEventListener("focusin", pauseTimer)
+        el.addEventListener("focusout", (e) => {
+          if (!el.contains(e.relatedTarget as Node)) {
+            startTimer()
+          }
+        })
+      }
+
       el.querySelector("button")?.addEventListener("click", () => removeToast(t.id))
       container.appendChild(el)
     })

package/src/components/tooltip/RLATooltip.astro

@@ -1,33 +1,136 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { TooltipProps } from "./tooltip"
-import tooltipTheme from "./tooltip.theme"
-
-
-const tooltip = scv(tooltipTheme)
-
-const {
-  content,
-  placement = "top",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TooltipProps
-
-const classes = resolveClasses(tooltip, {
-  placement
-}, useUi("tooltip", uiProp), className)
----
-<div class={classes.root} data-slot="tooltip-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger" tabindex="0">
-    <slot />
-  </div>
-
-  <div class={classes.content} data-slot="content" role="tooltip">
-    <slot name="content">
-      {content}
-    </slot>
-  </div>
-</div>
+---
+import type { TooltipProps } from "./tooltip"
+import { tooltipTheme } from "./tooltip.theme"
+
+
+
+const {
+  content,
+  placement = "top",
+  ...rest
+} = Astro.props as TooltipProps
+
+const classes = tooltipTheme(Astro.props)
+
+const anchorName = `--rla-tt-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="tooltip-container" data-placement={placement} {...rest}>
+  <div
+    class={classes.trigger}
+    data-slot="trigger"
+    tabindex="0"
+    style={`anchor-name: ${anchorName}`}
+  >
+    <slot />
+  </div>
+
+  <div
+    class={classes.content}
+    data-slot="content"
+    role="tooltip"
+    style={`position-anchor: ${anchorName}`}
+  >
+    <slot name="content">
+      {content}
+    </slot>
+  </div>
+</div>
+
+<style>
+  /*
+   * CSS Anchor Positioning — progressive enhancement (Chrome 125+).
+   *
+   * Browsers that don't support anchor-name will ignore this block and
+   * fall back to the existing absolute + translate-based placement
+   * defined in tooltip.theme.ts. No JavaScript needed in either path.
+   */
+  @supports (anchor-name: --x) {
+    [data-slot="tooltip-container"] [data-slot="content"] {
+      /*
+       * Switch from the theme's translate-based absolute positioning
+       * to anchor-relative positioning so the browser handles overflow
+       * and viewport clipping automatically.
+       */
+      position: absolute;
+      position-anchor: inherit; /* resolved from inline style */
+
+      /* Reset theme's translate hacks — anchor() handles the math */
+      transform: none !important;
+      left: unset;
+      right: unset;
+      top: unset;
+      bottom: unset;
+      margin: 0;
+    }
+
+    /* top (default) */
+    [data-placement="top"] [data-slot="content"] {
+      bottom: anchor(top);
+      left: anchor(center);
+      translate: -50% 0;
+      margin-bottom: 0.375rem;
+      position-try-fallbacks: --tt-bottom, --tt-right, --tt-left;
+    }
+
+    /* bottom */
+    [data-placement="bottom"] [data-slot="content"] {
+      top: anchor(bottom);
+      left: anchor(center);
+      translate: -50% 0;
+      margin-top: 0.375rem;
+      position-try-fallbacks: --tt-top, --tt-right, --tt-left;
+    }
+
+    /* left */
+    [data-placement="left"] [data-slot="content"] {
+      right: anchor(left);
+      top: anchor(center);
+      translate: 0 -50%;
+      margin-right: 0.375rem;
+      position-try-fallbacks: --tt-right, --tt-top, --tt-bottom;
+    }
+
+    /* right */
+    [data-placement="right"] [data-slot="content"] {
+      left: anchor(right);
+      top: anchor(center);
+      translate: 0 -50%;
+      margin-left: 0.375rem;
+      position-try-fallbacks: --tt-left, --tt-top, --tt-bottom;
+    }
+
+    /* Fallback positions the browser tries when the preferred side clips */
+    @position-try --tt-top {
+      bottom: anchor(top);
+      top: auto;
+      left: anchor(center);
+      translate: -50% 0;
+      margin-bottom: 0.375rem;
+      margin-top: 0;
+    }
+    @position-try --tt-bottom {
+      top: anchor(bottom);
+      bottom: auto;
+      left: anchor(center);
+      translate: -50% 0;
+      margin-top: 0.375rem;
+      margin-bottom: 0;
+    }
+    @position-try --tt-left {
+      right: anchor(left);
+      left: auto;
+      top: anchor(center);
+      translate: 0 -50%;
+      margin-right: 0.375rem;
+      margin-left: 0;
+    }
+    @position-try --tt-right {
+      left: anchor(right);
+      right: auto;
+      top: anchor(center);
+      translate: 0 -50%;
+      margin-left: 0.375rem;
+      margin-right: 0;
+    }
+  }
+</style>

package/src/components/tooltip/tooltip.theme.ts

@@ -1,28 +1,25 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTooltipTheme = () =>
-  defineTheme({
-    slots: ["root", "trigger", "content"],
-    base: {
-      root: "relative inline-block group/tooltip",
-      trigger: "",
-      content: [
-        "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95",
-        "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
-        "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
-      ]
-    },
-    variants: {
-      placement: {
-        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-1.5" },
-        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-1.5" },
-        left: { content: "right-full top-1/2 -translate-y-1/2 mr-1.5" },
-        right: { content: "left-full top-1/2 -translate-y-1/2 ml-1.5" }
-      }
-    },
-    defaultVariants: {
-      placement: "top"
+export const tooltipTheme = defineTheme("tooltip", {
+  slots: ["root", "trigger", "content"],
+  base: {
+    root: "relative inline-block group/tooltip",
+    trigger: "",
+    content: [
+      "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-neutral-50 shadow-md animate-in fade-in-0 zoom-in-95",
+      "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
+      "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
+    ]
+  },
+  variants: {
+    placement: {
+      top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-1.5" },
+      bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-1.5" },
+      left: { content: "right-full top-1/2 -translate-y-1/2 mr-1.5" },
+      right: { content: "left-full top-1/2 -translate-y-1/2 ml-1.5" }
     }
-  })
-
-export default createTooltipTheme()
+  },
+  defaultVariants: {
+    placement: "top"
+  }
+})