@rimelight/ui 0.0.42 → 0.0.44

package/src/components/popover/RLAPopover.astro

@@ -1,173 +1,285 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { PopoverProps } from "./popover"
-import { resolveTheme } from "../../utils/resolveTheme"
-import popoverThemeDefault, { createPopoverTheme } from "./popover.theme"
+import { popoverTheme } from "./popover.theme"
 
-const popoverTheme = resolveTheme(popoverThemeDefault, createPopoverTheme)
-const popover = scv(popoverTheme)
 
 const {
   triggerLabel,
   placement = "bottom",
   mode = "both",
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as PopoverProps
 
-const classes = resolveClasses(popover, {
-  placement
-}, useUi("popover", uiProp), className)
+const classes = popoverTheme(Astro.props)
+
+const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
 ---
-<div class={`group/popover ${classes.root}`} data-slot="popover-container" data-placement={placement} data-mode={mode} {...rest}>
-  <div class={`${classes.trigger} popover-trigger`} data-slot="trigger">
+<div
+  class={`rla-popover-host ${classes.root}`}
+  data-slot="popover-container"
+  data-placement={placement}
+  data-mode={mode}
+  {...rest}
+>
+  <div class={classes.trigger} data-slot="trigger">
     <slot name="trigger">
-      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
+      {triggerLabel && (
+        <button
+          type="button"
+          class="cursor-pointer"
+          popovertarget={popoverId}
+          popovertargetaction="toggle"
+        >
+          {triggerLabel}
+        </button>
+      )}
     </slot>
   </div>
 
-  <div class={`${classes.content} popover-content hidden`} data-slot="content">
+  <div
+    id={popoverId}
+    class={classes.content}
+    data-slot="content"
+    popover="auto"
+  >
     <slot />
   </div>
 </div>
 
-<script>
-  function openPopover(container: Element, content: HTMLElement) {
-    document.querySelectorAll('.popover-content').forEach(other => {
-      if (other !== content && !other.classList.contains('hidden')) {
-        other.classList.add('hidden');
-        (other as HTMLElement).style.transform = '';
-        other.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
-      }
-    });
+<style>
+  /*
+   * Popover API — native positioning fallback.
+   * For browsers that support anchor positioning we layer it on top;
+   * all others get the default centred viewport placement that the
+   * Popover API provides out of the box.
+   */
+  .rla-popover-host {
+    position: relative;
+    display: inline-block;
+  }
+
+  /* Reset browser's default popover styles so our theme classes apply */
+  [popover] {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
+    color: inherit;
+  }
+
+  /* Hide until open — the popover API toggles [popover] visibility,
+     but we need to re-apply our own show/hide for the :popover-open state */
+  [popover]:not(:popover-open) {
+    display: none;
+  }
+
+  /*
+   * CSS Anchor Positioning (progressive enhancement — Chrome 125+).
+   * Browsers without anchor-name support ignore this entire block and
+   * fall back to the Popover API's default viewport-centred placement.
+   */
+  @supports (anchor-name: --x) {
+    .rla-popover-host [data-slot="trigger"] {
+      anchor-name: --rla-popover-anchor;
+    }
 
-    content.classList.remove('hidden');
-    content.style.transform = '';
-
-    const rect = content.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-    let shift = 0;
-    const safetyMargin = 16;
-    if (rect.right > viewportWidth - safetyMargin) {
-      shift = (viewportWidth - safetyMargin) - rect.right;
-    } else if (rect.left < safetyMargin) {
-      shift = safetyMargin - rect.left;
+    [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;
     }
 
-    const placement = container.getAttribute('data-placement') || 'bottom';
-    const isCentered = (placement === 'top' || placement === 'bottom') &&
-                       !content.classList.contains('right-0') &&
-                       !content.classList.contains('left-0');
+    /* bottom (default) */
+    [data-placement="bottom"] [popover][data-slot="content"],
+    :not([data-placement]) [popover][data-slot="content"] {
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: 0.5rem;
+      position-try-fallbacks: --flip-top;
+    }
 
-    if (shift !== 0) {
-      if (isCentered) {
-        content.style.transform = `translateX(calc(-50% + ${shift}px))`;
-      } else {
-        content.style.transform = `translateX(${shift}px)`;
-      }
+    /* bottom-end */
+    [data-placement="bottom-end"] [popover][data-slot="content"] {
+      top: anchor(bottom);
+      right: anchor(right);
+      left: auto;
+      margin-top: 0.5rem;
+      position-try-fallbacks: --flip-top-end;
     }
 
-    content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: true } }));
-  }
+    /* bottom-start */
+    [data-placement="bottom-start"] [popover][data-slot="content"] {
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: 0.5rem;
+      position-try-fallbacks: --flip-top-start;
+    }
+
+    /* top */
+    [data-placement="top"] [popover][data-slot="content"] {
+      bottom: anchor(top);
+      left: anchor(left);
+      margin-bottom: 0.5rem;
+      position-try-fallbacks: --flip-bottom;
+    }
+
+    /* left */
+    [data-placement="left"] [popover][data-slot="content"] {
+      right: anchor(left);
+      top: anchor(top);
+      margin-right: 0.5rem;
+      position-try-fallbacks: --flip-right;
+    }
+
+    /* right */
+    [data-placement="right"] [popover][data-slot="content"] {
+      left: anchor(right);
+      top: anchor(top);
+      margin-left: 0.5rem;
+      position-try-fallbacks: --flip-left;
+    }
 
-  function closePopover(content: HTMLElement) {
-    if (!content.classList.contains('hidden')) {
-      content.classList.add('hidden');
-      content.style.transform = '';
-      content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+    /* Fallback try sets — browser picks the first one that fits in the viewport */
+    @position-try --flip-top {
+      bottom: anchor(top);
+      top: auto;
+      margin-bottom: 0.5rem;
+      margin-top: 0;
+    }
+    @position-try --flip-bottom {
+      top: anchor(bottom);
+      bottom: auto;
+      margin-top: 0.5rem;
+      margin-bottom: 0;
+    }
+    @position-try --flip-top-end {
+      bottom: anchor(top);
+      right: anchor(right);
+      left: auto;
+      top: auto;
+      margin-bottom: 0.5rem;
+      margin-top: 0;
+    }
+    @position-try --flip-top-start {
+      bottom: anchor(top);
+      left: anchor(left);
+      top: auto;
+      margin-bottom: 0.5rem;
+      margin-top: 0;
+    }
+    @position-try --flip-right {
+      left: anchor(right);
+      right: auto;
+      margin-left: 0.5rem;
+      margin-right: 0;
+    }
+    @position-try --flip-left {
+      right: anchor(left);
+      left: auto;
+      margin-right: 0.5rem;
+      margin-left: 0;
     }
   }
+</style>
 
-  function setupPopoverListeners() {
-    const win = window as any;
-    if (win.hasGlobalPopoverListeners) return;
-    win.hasGlobalPopoverListeners = true;
-
-    let hoverTimeout: any = null;
-
-    document.addEventListener('mouseover', (e) => {
-      const target = e.target as HTMLElement | null;
-      if (!target) return;
-
-      const container = target.closest('[data-slot="popover-container"]') as HTMLElement | null;
-      if (container) {
-        const mode = container.getAttribute('data-mode') || 'both';
-        if (mode === 'hover' || mode === 'both') {
-          if (hoverTimeout) clearTimeout(hoverTimeout);
-          const content = container.querySelector('.popover-content') as HTMLElement | null;
-          if (content && content.classList.contains('hidden')) {
-            openPopover(container, content);
-          }
-        }
+<script>
+  /**
+   * Minimal JS shim — only needed for:
+   *  1. hover mode (no declarative HTML equivalent for hover-open yet)
+   *  2. wiring slot-based custom triggers (not a <button popovertarget>)
+   *     so they still open the popover on click
+   *
+   * Light-dismiss, Escape, top-layer stacking, and keyboard accessibility
+   * are all handled natively by the Popover API.
+   */
+  function setupPopovers() {
+    document.querySelectorAll<HTMLElement>('[data-slot="popover-container"]').forEach(container => {
+      const mode = container.dataset.mode || 'both';
+      const popoverId = container.querySelector<HTMLElement>('[data-slot="content"]')?.id;
+      if (!popoverId) return;
+
+      const panel = document.getElementById(popoverId) as HTMLElement & { hidePopover?: () => void; showPopover?: () => void } | null;
+      if (!panel || typeof panel.showPopover !== 'function') return;
+
+      // For slot-based triggers (not a <button popovertarget>), wire click manually
+      const trigger = container.querySelector<HTMLElement>('[data-slot="trigger"]');
+      if (trigger && !trigger.querySelector('[popovertarget]')) {
+        trigger.addEventListener('click', () => {
+          // @ts-ignore
+          panel.togglePopover?.();
+        });
       }
-    });
 
-    document.addEventListener('mouseout', (e) => {
-      const target = e.target as HTMLElement | null;
-      if (!target) return;
-
-      const container = target.closest('[data-slot="popover-container"]') as HTMLElement | null;
-      if (container) {
-        const mode = container.getAttribute('data-mode') || 'both';
-        if (mode === 'hover' || mode === 'both') {
-          const related = e.relatedTarget as HTMLElement | null;
-          if (related && container.contains(related)) return;
-
-          const content = container.querySelector('.popover-content') as HTMLElement | null;
-          if (content && !content.classList.contains('hidden')) {
-            hoverTimeout = setTimeout(() => {
-              closePopover(content);
-            }, 150);
+      // Hover support
+      if (mode === 'hover' || mode === 'both') {
+        let hoverTimer: ReturnType<typeof setTimeout> | null = null;
+
+        const show = () => {
+          if (hoverTimer) clearTimeout(hoverTimer);
+          if (!container.matches(':has(:popover-open)')) {
+            panel.showPopover?.();
           }
-        }
-      }
-    });
+        };
 
-    document.addEventListener('click', (e) => {
-      const target = e.target as HTMLElement | null;
-      if (!target) return;
-
-      const trigger = target.closest('.popover-trigger') as HTMLElement | null;
-      if (trigger) {
-        e.stopPropagation();
-        const container = trigger.closest('[data-slot="popover-container"]');
-        if (!container) return;
-
-        const content = container.querySelector('.popover-content') as HTMLElement | null;
-        if (!content) return;
-
-        const isOpen = !content.classList.contains('hidden');
-        if (isOpen) {
-          closePopover(content);
-        } else {
-          openPopover(container, content);
-        }
-        return;
-      }
+        const hide = () => {
+          hoverTimer = setTimeout(() => {
+            panel.hidePopover?.();
+          }, 150);
+        };
 
-      if (target.closest('.popover-content')) {
-        const isActionLink = target.closest('a') || target.closest('button[data-close-popover]');
-        if (isActionLink) {
-          document.querySelectorAll('.popover-content').forEach(other => {
-            closePopover(other as HTMLElement);
-          });
-        }
-        return;
+        container.addEventListener('mouseenter', show);
+        container.addEventListener('mouseleave', hide);
+        panel.addEventListener('mouseenter', () => {
+          if (hoverTimer) clearTimeout(hoverTimer);
+        });
+        panel.addEventListener('mouseleave', hide);
       }
 
-      document.querySelectorAll('.popover-content').forEach(other => {
-        closePopover(other as HTMLElement);
-      });
+      // 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);
     });
   }
 
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', setupPopoverListeners);
+    document.addEventListener('DOMContentLoaded', setupPopovers);
   } else {
-    setupPopoverListeners();
+    setupPopovers();
   }
-  document.addEventListener('astro:page-load', setupPopoverListeners);
+  document.addEventListener('astro:page-load', setupPopovers);
 </script>

package/src/components/popover/popover.theme.ts

@@ -1,29 +1,25 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPopoverTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "trigger", "content"],
-    base: {
-      root: "relative inline-block",
-      trigger: "",
-      content: [
-        "absolute z-50 w-72 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 text-neutral-900 dark:text-neutral-100 shadow-xl outline-none"
-      ]
-    },
-    variants: {
-      placement: {
-        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
-        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
-        "bottom-end": { content: "top-full right-0 left-auto mt-2" },
-        "bottom-start": { content: "top-full left-0 right-auto mt-2" },
-        left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
-        right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
-      }
-    },
-    defaultVariants: {
-      placement: "bottom"
+export const popoverTheme = defineTheme("popover", {
+  slots: ["root", "trigger", "content"],
+  base: {
+    root: "relative inline-block",
+    trigger: "",
+    content: [
+      "absolute z-50 w-72 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 text-neutral-900 dark:text-neutral-100 shadow-xl outline-none"
+    ]
+  },
+  variants: {
+    placement: {
+      "top": { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
+      "bottom": { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
+      "bottom-end": { content: "top-full right-0 left-auto mt-2" },
+      "bottom-start": { content: "top-full left-0 right-auto mt-2" },
+      "left": { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
+      "right": { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
     }
-  })
-
-export default createPopoverTheme()
+  },
+  defaultVariants: {
+    placement: "bottom"
+  }
+})

package/src/components/post/RLAPost.astro

@@ -1,15 +1,11 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { PostProps } from "./post"
-import postTheme from "./post.theme"
+import { postTheme } from "./post.theme"
 import { Image } from "astro:assets"
 import type { ImageMetadata } from "astro"
 import RLABadge from "../badge/RLABadge.astro"
 
 
-const post = scv(postTheme)
 
 const {
   title,
@@ -19,14 +15,10 @@ const {
   to,
   badge,
   badgeColor = "primary",
-  variant = "soft",
-  orientation = "vertical",
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as PostProps
 
-const classes = resolveClasses(post, { variant, orientation }, useUi("post", uiProp), className);
+const classes = postTheme(Astro.props);
 
 const Tag = to ? "a" : "div";
 const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() : date) : null;

package/src/components/post/post.theme.ts

@@ -1,53 +1,50 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPostTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "imageWrapper",
-      "image",
-      "content",
-      "title",
-      "description",
-      "badge",
-      "date",
-      "footer"
-    ],
-    base: {
-      root: "group relative flex overflow-hidden transition-all duration-300",
-      imageWrapper: "relative overflow-hidden aspect-video",
-      image: "absolute inset-0 w-full h-full object-cover transition-transform duration-500",
-      content: "flex-1 p-4",
-      title: "font-bold text-xl line-clamp-2",
-      description: "text-neutral-500 text-sm mt-1 line-clamp-3",
-      date: "text-xs text-neutral-400 mt-2",
-      footer: "p-4 border-t border-neutral-100"
-    },
-    variants: {
-      orientation: {
-        vertical: {
-          root: "flex-col"
-        },
-        horizontal: {
-          root: "flex-col md:flex-row",
-          imageWrapper: "w-full md:w-80 md:shrink-0 md:aspect-auto"
-        }
+export const postTheme = defineTheme("post", {
+  slots: [
+    "root",
+    "imageWrapper",
+    "image",
+    "content",
+    "title",
+    "description",
+    "badge",
+    "date",
+    "footer"
+  ],
+  base: {
+    root: "group relative flex overflow-hidden transition-all duration-300",
+    imageWrapper: "relative overflow-hidden aspect-video",
+    image: "absolute inset-0 w-full h-full object-cover transition-transform duration-500",
+    content: "flex-1 p-4",
+    title: "font-bold text-xl line-clamp-2",
+    description: "text-neutral-500 text-sm mt-1 line-clamp-3",
+    date: "text-xs text-neutral-400 mt-2",
+    footer: "p-4 border-t border-neutral-100"
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: "flex-col"
       },
-      variant: {
-        soft: {
-          root: "bg-white rounded-2xl shadow-xl hover:shadow-2xl border border-neutral-100",
-          image: "group-hover:scale-105"
-        },
-        ghost: {
-          root: "bg-transparent",
-          image: "rounded-xl group-hover:opacity-90"
-        }
+      horizontal: {
+        root: "flex-col md:flex-row",
+        imageWrapper: "w-full md:w-80 md:shrink-0 md:aspect-auto"
       }
     },
-    defaultVariants: {
-      orientation: "vertical",
-      variant: "soft"
+    variant: {
+      soft: {
+        root: "bg-white rounded-2xl shadow-xl hover:shadow-2xl border border-neutral-100",
+        image: "group-hover:scale-105"
+      },
+      ghost: {
+        root: "bg-transparent",
+        image: "rounded-xl group-hover:opacity-90"
+      }
     }
-  })
-
-export default createPostTheme()
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "soft"
+  }
+})

package/src/components/pricing-plan/RLAPricingPlan.astro

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

package/src/components/pricing-plan/pricing-plan.theme.ts

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