@rimelight/ui 0.0.42 → 0.0.44

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

@@ -1,12 +1,8 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ScrollToTopProps } from "./scroll-to-top"
-import scrollToTopTheme from "./scroll-to-top.theme"
+import { scrollToTopTheme } from "./scroll-to-top.theme"
 
 
-const scrollToTop = scv(scrollToTopTheme)
 
 const {
   color = "primary",
@@ -15,16 +11,14 @@ const {
   threshold = 200,
   showProgress = false,
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as ScrollToTopProps
 
-const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop", uiProp), className)
+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]}
   >
@@ -62,11 +56,10 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
 </rla-scroll-to-top>
 
 <script>
-  import { trackScroll, scrollToTop } from "../../utils/scroll"
+  import { trackScroll, scrollToTop } from "./scroll"
 
   class RLAScrollToTop extends HTMLElement {
     private cleanupScroll: (() => void) | null = null;
-    private styleEl: HTMLStyleElement | null = null;
 
     connectedCallback() {
       this.style.display = 'contents';
@@ -80,50 +73,64 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
       const color = this.dataset.color || 'primary';
       const progressWidth = Number(this.dataset.progressWidth) || 6;
       const gaugeBorderWidth = progressWidth * 0.5;
-      const nonce = (document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') ?? '');
-
-      const getStyleEl = () => {
-        if (!this.styleEl) {
-          this.styleEl = document.createElement('style');
-          if (nonce) this.styleEl.setAttribute('nonce', nonce);
-          document.head.appendChild(this.styleEl);
-        }
-        return this.styleEl;
-      };
 
       innerElement.dataset.rlaInstance = String(id);
 
       button.addEventListener('click', scrollToTop);
 
-      const unsubscribe = trackScroll({ threshold }, (state) => {
+      /**
+       * CSS scroll-state(scrollable: top) — Chrome 133+
+       *
+       * When supported, the body (or nearest scroll-state container) exposes
+       * its scrollability to CSS. The .rla-scroll-to-top-inner uses a
+       * \`@container\` scroll-state rule to hide itself when the page is already
+       * at the top. This eliminates the scroll event listener for show/hide.
+       *
+       * For browsers that don't support scroll-state() we fall back to the
+       * JS trackScroll() approach below.
+       */
+      // JS scroll tracking: show/hide via class toggling
+      const unsubscribeVisibility = trackScroll({ threshold }, (state) => {
         if (state.isVisible) {
-          innerElement.classList.add('visible');
+          innerElement.classList.add('js-visible');
         } else {
-          innerElement.classList.remove('visible');
+          innerElement.classList.remove('js-visible');
         }
-
-        getStyleEl().textContent = `
-          .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-track {
-            border-width: ${gaugeBorderWidth}px;
-            border-color: var(--color-${color}-900);
-            background-color: #000;
-          }
-          .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-progress {
-            --gauge-progress: ${state.scrollPercentage};
-            --gauge-stroke-width: ${gaugeBorderWidth}px;
-            --gauge-color: var(--color-${color}-500);
-          }
-        `;
       });
-
       this.cleanupScroll = () => {
         button.removeEventListener('click', scrollToTop);
-        unsubscribe();
-        if (this.styleEl) {
-          this.styleEl.remove();
-          this.styleEl = null;
+        unsubscribeVisibility();
+        const self = this as any;
+        if (self.styleEl) {
+          self.styleEl.remove();
+          self.styleEl = null;
         }
       };
+
+      // Progress ring scroll tracking using CSS variable on the element
+      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(--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(--rl-${color}-900)`);
+        gaugeTrackEl.style.setProperty('background-color', '#000');
+      }
+
+      const unsubscribeProgress = trackScroll({ threshold }, (state) => {
+        if (gaugeProgressEl) {
+          gaugeProgressEl.style.setProperty('--gauge-progress', String(state.scrollPercentage));
+        }
+      });
+
+      const previousCleanup = this.cleanupScroll;
+      this.cleanupScroll = () => {
+        if (previousCleanup) previousCleanup();
+        unsubscribeProgress();
+      };
     }
 
     disconnectedCallback() {
@@ -142,17 +149,35 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
 </script>
 
 <style>
+  /*
+   * CSS scroll-state(scrollable: top) — Chrome 133+
+   *
+   * This declares the <body> as a scroll-state container so descendant
+   * elements can query whether the body is scrollable at the top.
+   * When the user is already at the top of the page, the button hides itself.
+   */
+  :global(body) {
+    container-type: scroll-state;
+    container-name: rla-page-scroll;
+  }
+
   .rla-scroll-to-top-inner {
+    /* Default: hidden (for JS fallback path) */
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease-in-out;
   }
 
-  .rla-scroll-to-top-inner.visible {
+  /* JS fallback visibility class */
+  .rla-scroll-to-top-inner.js-visible {
     opacity: 1;
     pointer-events: auto;
   }
 
+  /*
+   * Standard JS-backed scroll state visibility (CSP-compliant)
+   */
+
   .progress-circle-base {
     position: relative;
     transform: translateZ(0);
@@ -171,8 +196,8 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
     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

@@ -1,26 +1,22 @@
 <script setup lang="ts">
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ScrollToTopProps } from "./scroll-to-top"
-import scrollToTopTheme from "./scroll-to-top.theme"
-import { trackScroll, scrollToTop as scrollToTopFn } from "../../utils/scroll"
+import { scrollToTopTheme } from "./scroll-to-top.theme"
+import { trackScroll, scrollToTop as scrollToTopFn } from "./scroll"
 import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from "vue"
 
 const attrs = useAttrs()
-const scrollToTop = scv(scrollToTopTheme)
 
 const {
   color = "primary",
   progressWidth = 6,
   duration = 0.1,
   threshold = 200,
-  showProgress = false,
-  ui: uiProp,
-  class: className
+  showProgress = false
 } = defineProps<ScrollToTopProps>()
 
-const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
+const classes = scrollToTopTheme({
+  color
+})
 
 const isVisible = ref(false)
 const scrollPercentage = ref(0)
@@ -34,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};
     }
   `
@@ -120,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 {
@@ -130,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

@@ -1,51 +1,33 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createScrollToTopTheme = (colors: readonly string[] = ["primary", "secondary"]) =>
-  defineTheme({
-    slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
-    base: {
-      root: "fixed bottom-6 right-6 z-50",
-      button: "size-14 lg:size-12 p-0 rounded-full bg-black/85",
-      progressBase: "progress-circle-base size-full",
-      svg: "size-full",
-      iconContainer: "absolute inset-0 flex items-center justify-center text-center",
-      icon: "size-6 text-white"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            progressBase: "",
-            svg: "",
-            iconContainer: "",
-            icon: ""
-          }
-        ])
-      ),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
+export const scrollToTopTheme = defineTheme("scroll-to-top", {
+  slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
+  base: {
+    root: "fixed bottom-6 right-6 z-50",
+    button: "size-14 lg:size-12 p-0 rounded-full bg-black/85",
+    progressBase: "progress-circle-base size-full",
+    svg: "size-full",
+    iconContainer: "absolute inset-0 flex items-center justify-center text-center",
+    icon: "size-6 text-white"
+  },
+  variants: {
+    color: "auto"
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      classNames: {
+        icon: "text-neutral-50"
       }
     },
-    compoundVariants: [
-      {
-        color: "primary",
-        classNames: {
-          icon: "text-primary-foreground"
-        }
-      },
-      {
-        color: "secondary",
-        classNames: {
-          icon: "text-secondary-foreground"
-        }
+    {
+      color: "secondary",
+      classNames: {
+        icon: "text-neutral-50"
       }
-    ],
-    defaultVariants: {
-      color: "primary"
     }
-  })
-
-export default createScrollToTopTheme()
+  ],
+  defaultVariants: {
+    color: "primary"
+  }
+})

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

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface ScrollToTopProps {
   /**

package/src/{utils → components/scroll-to-top}/scroll.ts

@@ -14,13 +14,23 @@ export function trackScroll(
 
   const { threshold = 200 } = options
 
+  let ticking = false
+  let rafId: number | null = null
+
   function update() {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop
-    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
-    onUpdate({
-      isVisible: scrollTop > threshold,
-      scrollPercentage: scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
-    })
+    if (!ticking) {
+      rafId = requestAnimationFrame(() => {
+        const scrollTop = window.scrollY || document.documentElement.scrollTop
+        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+        onUpdate({
+          isVisible: scrollTop > threshold,
+          scrollPercentage: scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+        })
+        ticking = false
+        rafId = null
+      })
+      ticking = true
+    }
   }
 
   window.addEventListener("scroll", update, { passive: true })
@@ -28,6 +38,9 @@ export function trackScroll(
 
   return () => {
     window.removeEventListener("scroll", update)
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+    }
   }
 }
 

package/src/components/search/RLASearch.astro

@@ -1,27 +1,21 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SearchProps } from "./search"
-import searchTheme from "./search.theme"
+import { searchTheme } from "./search.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 import RLAInput from "../input/RLAInput.astro"
 import RLAKbd from "../kbd/RLAKbd.astro"
 import RLAButton from "../button/RLAButton.astro"
 
 
-const search = scv(searchTheme)
 
 const {
   endpoint = "/api/search",
   placeholder = "Search...",
   messages = {},
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as SearchProps
 
-const classes = resolveClasses(search, {}, useUi("search", uiProp), className)
+const classes = searchTheme(Astro.props)
 
 // Default messages
 const searchPlaceholder = messages.searchPlaceholder || placeholder
@@ -61,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>
   )}
 
@@ -83,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>
@@ -111,7 +105,7 @@ const emptyId = `search-empty-${uniqueId}`
 </rla-search>
 
 <script>
-  import { defineShortcuts } from "../../utils/shortcuts"
+  import { defineShortcuts } from "../../shortcuts"
 
   class RLASearch extends HTMLElement {
     private searchCleanup: (() => void) | null = null;

package/src/components/search/search.theme.ts

@@ -1,64 +1,61 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSearchTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "triggerIcon",
-      "triggerLabel",
-      "triggerKbd",
-      "modal",
-      "dialog",
-      "header",
-      "headerIcon",
-      "input",
-      "close",
-      "closeIcon",
-      "results",
-      "resultItem",
-      "resultHeader",
-      "resultTitle",
-      "resultBadge",
-      "resultSnippet",
-      "empty",
-      "footer",
-      "footerHint"
-    ],
-    base: {
-      root: "relative inline-block",
-      trigger:
-        "flex items-center gap-xs text-neutral-400 hover:text-white transition-colors bg-neutral-900 border border-neutral-800 rounded-full px-3 py-1.5 text-sm cursor-pointer",
-      triggerIcon: "w-4 h-4",
-      triggerLabel: "hidden lg:inline text-xs opacity-60",
-      triggerKbd:
-        "hidden lg:inline-flex items-center gap-0.5 text-[10px] bg-neutral-800 border border-neutral-700 px-1.5 py-0.5 rounded font-sans text-neutral-400",
-      modal:
-        "fixed inset-0 z-[1000] hidden items-start justify-center pt-[10vh] px-4 bg-black/70 backdrop-blur-sm",
-      dialog:
-        "bg-neutral-900 border border-neutral-800 rounded-xl w-full max-w-xl shadow-2xl overflow-hidden flex flex-col",
-      header: "flex items-center border-b border-neutral-800 px-4 py-3",
-      headerIcon: "text-neutral-400 w-5 h-5 mr-3",
-      input:
-        "bg-transparent text-white placeholder-neutral-500 focus:outline-none flex-1 text-base border-none p-0",
-      close:
-        "text-neutral-400 hover:text-white transition-colors bg-transparent border-0 cursor-pointer p-0 flex items-center justify-center",
-      closeIcon: "w-5 h-5",
-      results: "max-h-[350px] overflow-y-auto p-2 empty:hidden flex flex-col gap-1",
-      resultItem:
-        "flex flex-col gap-1 p-3 hover:bg-neutral-800 rounded-lg transition-colors border border-transparent hover:border-neutral-700 text-left decoration-none",
-      resultHeader: "flex items-center justify-between",
-      resultTitle: "text-sm font-semibold text-white",
-      resultBadge:
-        "text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-neutral-800 text-neutral-400 font-mono",
-      resultSnippet: "text-xs text-neutral-400 line-clamp-2 m-0",
-      empty: "p-6 text-center text-neutral-500 text-sm hidden",
-      footer:
-        "bg-neutral-950 border-t border-neutral-800 px-4 py-2 flex items-center justify-between text-[11px] text-neutral-500",
-      footerHint: "flex items-center gap-1"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createSearchTheme()
+export const searchTheme = defineTheme("search", {
+  slots: [
+    "root",
+    "trigger",
+    "triggerIcon",
+    "triggerLabel",
+    "triggerKbd",
+    "modal",
+    "dialog",
+    "header",
+    "headerIcon",
+    "input",
+    "close",
+    "closeIcon",
+    "results",
+    "resultItem",
+    "resultHeader",
+    "resultTitle",
+    "resultBadge",
+    "resultSnippet",
+    "empty",
+    "footer",
+    "footerHint"
+  ],
+  base: {
+    root: "relative inline-block",
+    trigger:
+      "flex items-center gap-xs text-neutral-400 hover:text-white transition-colors bg-neutral-900 border border-neutral-800 rounded-full px-3 py-1.5 text-sm cursor-pointer",
+    triggerIcon: "w-4 h-4",
+    triggerLabel: "hidden lg:inline text-xs opacity-60",
+    triggerKbd:
+      "hidden lg:inline-flex items-center gap-0.5 text-[10px] bg-neutral-800 border border-neutral-700 px-1.5 py-0.5 rounded font-sans text-neutral-400",
+    modal:
+      "fixed inset-0 z-[1000] hidden items-start justify-center pt-[10vh] px-4 bg-black/70 backdrop-blur-sm",
+    dialog:
+      "bg-neutral-900 border border-neutral-800 rounded-xl w-full max-w-xl shadow-2xl overflow-hidden flex flex-col",
+    header: "flex items-center border-b border-neutral-800 px-4 py-3",
+    headerIcon: "text-neutral-400 w-5 h-5 mr-3",
+    input:
+      "bg-transparent text-white placeholder-neutral-500 focus:outline-none flex-1 text-base border-none p-0",
+    close:
+      "text-neutral-400 hover:text-white transition-colors bg-transparent border-0 cursor-pointer p-0 flex items-center justify-center",
+    closeIcon: "w-5 h-5",
+    results: "max-h-[350px] overflow-y-auto p-2 empty:hidden flex flex-col gap-1",
+    resultItem:
+      "flex flex-col gap-1 p-3 hover:bg-neutral-800 rounded-lg transition-colors border border-transparent hover:border-neutral-700 text-left decoration-none",
+    resultHeader: "flex items-center justify-between",
+    resultTitle: "text-sm font-semibold text-white",
+    resultBadge:
+      "text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-neutral-800 text-neutral-400 font-mono",
+    resultSnippet: "text-xs text-neutral-400 line-clamp-2 m-0",
+    empty: "p-6 text-center text-neutral-500 text-sm hidden",
+    footer:
+      "bg-neutral-950 border-t border-neutral-800 px-4 py-2 flex items-center justify-between text-[11px] text-neutral-500",
+    footerHint: "flex items-center gap-1"
+  },
+  variants: {},
+  defaultVariants: {}
+})