@rimelight/ui 0.0.42 → 0.0.43

package/src/components/password/password.theme.ts

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

package/src/components/phone-mockup/RLAPhoneMockup.astro

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

package/src/components/phone-mockup/phone-mockup.theme.ts

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

package/src/components/placeholder/RLAPlaceholder.astro

@@ -1,43 +1,32 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PlaceholderProps } from "./placeholder"
-import placeholderTheme from "./placeholder.theme"
-
-
-const placeholder = scv(placeholderTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PlaceholderProps
-
-const classes = resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
----
-
-<div class={classes.base} {...rest}>
-  <svg class={classes.svg}>
-    <defs>
-      <pattern
-        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
-        x="0"
-        y="0"
-        width="10"
-        height="10"
-        patternUnits="userSpaceOnUse"
-      >
-        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
-      </pattern>
-    </defs>
-    <rect
-      stroke="none"
-      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
-      width="100%"
-      height="100%"
-    />
-  </svg>
-
-  <slot />
-</div>
+---
+import { placeholderTheme } from "./placeholder.theme"
+
+
+
+const classes = placeholderTheme(Astro.props)
+---
+
+<div class={classes.base} {...Astro.props}>
+  <svg class={classes.svg}>
+    <defs>
+      <pattern
+        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+        x="0"
+        y="0"
+        width="10"
+        height="10"
+        patternUnits="userSpaceOnUse"
+      >
+        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+      </pattern>
+    </defs>
+    <rect
+      stroke="none"
+      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+      width="100%"
+      height="100%"
+    />
+  </svg>
+
+  <slot />
+</div>

package/src/components/placeholder/placeholder.theme.ts

@@ -1,15 +1,12 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPlaceholderTheme = () =>
-  defineTheme({
-    slots: ["base", "svg"],
-    base: {
-      base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
-      svg: "absolute inset-0 h-full w-full stroke-primary/10"
-    },
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {}
-  })
-
-export default createPlaceholderTheme()
+export const placeholderTheme = defineTheme("placeholder", {
+  slots: ["base", "svg"],
+  base: {
+    base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
+    svg: "absolute inset-0 h-full w-full stroke-primary/10"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})

package/src/components/popover/RLAPopover.astro

@@ -1,173 +1,246 @@
 ---
-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;
+  }
 
-    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;
+  /*
+   * 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;
     }
 
-    const placement = container.getAttribute('data-placement') || 'bottom';
-    const isCentered = (placement === 'top' || placement === 'bottom') &&
-                       !content.classList.contains('right-0') &&
-                       !content.classList.contains('left-0');
+    [popover][data-slot="content"] {
+      position: absolute;
+      position-anchor: --rla-popover-anchor;
+    }
 
-    if (shift !== 0) {
-      if (isCentered) {
-        content.style.transform = `translateX(calc(-50% + ${shift}px))`;
-      } else {
-        content.style.transform = `translateX(${shift}px)`;
-      }
+    /* 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;
     }
 
-    content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: true } }));
-  }
+    /* 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;
+    }
 
-  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 } }));
+    /* 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;
     }
-  }
 
-  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);
-          }
-        }
-      }
-    });
+    /* top */
+    [data-placement="top"] [popover][data-slot="content"] {
+      bottom: anchor(top);
+      left: anchor(left);
+      margin-bottom: 0.5rem;
+      position-try-fallbacks: --flip-bottom;
+    }
 
-    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);
-          }
-        }
-      }
-    });
+    /* left */
+    [data-placement="left"] [popover][data-slot="content"] {
+      right: anchor(left);
+      top: anchor(top);
+      margin-right: 0.5rem;
+      position-try-fallbacks: --flip-right;
+    }
 
-    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;
-      }
+    /* right */
+    [data-placement="right"] [popover][data-slot="content"] {
+      left: anchor(right);
+      top: anchor(top);
+      margin-left: 0.5rem;
+      position-try-fallbacks: --flip-left;
+    }
+
+    /* 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>
 
-      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;
+<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.querySelectorAll('.popover-content').forEach(other => {
-        closePopover(other as HTMLElement);
-      });
+      // 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?.();
+          }
+        };
+
+        const hide = () => {
+          hoverTimer = setTimeout(() => {
+            panel.hidePopover?.();
+          }, 150);
+        };
+
+        container.addEventListener('mouseenter', show);
+        container.addEventListener('mouseleave', hide);
+        panel.addEventListener('mouseenter', () => {
+          if (hoverTimer) clearTimeout(hoverTimer);
+        });
+        panel.addEventListener('mouseleave', hide);
+      }
     });
   }
 
   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;