@rimelight/ui 0.0.41 → 0.0.43

package/src/components/sticky-surface/RLAStickySurface.astro

@@ -1,38 +1,67 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { StickySurfaceProps } from "./sticky-surface"
-import { resolveTheme } from "../../utils/resolveTheme"
-import stickySurfaceThemeDefault, { createStickySurfaceTheme } from "./sticky-surface.theme"
-const stickySurfaceTheme = resolveTheme(stickySurfaceThemeDefault, createStickySurfaceTheme)
-
-
-const stickySurface = scv(stickySurfaceTheme)
-
-const {
-  offsetTop = 0,
-  zIndex = 10,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as StickySurfaceProps
-
-const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
-const topOffset = `${offsetTop}px`
-const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
----
-<div
-  class:list={[classes.root, id]}
-  data-slot="root"
-  {...rest}
->
-  <slot />
-</div>
-
-<style is:inline set:html={`
-  .${id} {
-    top: ${topOffset} !important;
-    z-index: ${zIndex} !important;
-  }
-`} />
+---
+import type { StickySurfaceProps } from "./sticky-surface"
+import { stickySurfaceTheme } from "./sticky-surface.theme"
+
+
+
+const {
+  offsetTop = 0,
+  zIndex = 10,
+  stuckShadow = true,
+  ...rest
+} = Astro.props as StickySurfaceProps
+
+
+
+const classes = stickySurfaceTheme(Astro.props)
+const topOffset = `${offsetTop}px`
+const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
+---
+<div
+  class:list={[classes.root, id, stuckShadow && "rla-sticky-shadow"]}
+  data-slot="root"
+  {...rest}
+>
+  <slot />
+</div>
+
+<style is:inline set:html={`
+  .${id} {
+    top: ${topOffset} !important;
+    z-index: ${zIndex} !important;
+    /*
+     * CSS scroll-state(stuck: top) — Chrome 133+
+     *
+     * Declare this element as a scroll-state container so it can query
+     * its own stuck state. When position: sticky causes it to be pinned
+     * at the top, the browser marks it as "stuck: top".
+     */
+    container-type: scroll-state;
+    container-name: rla-sticky-${id};
+  }
+`} />
+
+<!--
+  The stuck shadow is applied via a nested CSS @container scroll-state rule.
+  This is progressive enhancement — browsers that don't support scroll-state()
+  silently ignore it and the surface just has no shadow (which is fine).
+-->
+{stuckShadow && (
+  <style is:inline set:html={`
+    @container rla-sticky-${id} scroll-state(stuck: top) {
+      .${id} {
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      @container rla-sticky-${id} scroll-state(stuck: top) {
+        .${id} {
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.40), 0 1px 4px 0 rgba(0, 0, 0, 0.20);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+        }
+      }
+    }
+  `} />
+)}

package/src/components/sticky-surface/sticky-surface.theme.ts

@@ -1,12 +1,8 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createStickySurfaceTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "sticky top-0 self-start transition-all duration-300"
-    }
-  })
-
-export default createStickySurfaceTheme()
+export const stickySurfaceTheme = defineTheme("sticky-surface", {
+  slots: ["root"],
+  base: {
+    root: "sticky top-0 self-start transition-all duration-300"
+  }
+})

package/src/components/sticky-surface/sticky-surface.ts

@@ -1,4 +1,5 @@
 export interface StickySurfaceProps {
+  stuckShadow?: boolean
   /**
    * Pixels offset from top when sticky.
    */

package/src/components/surround/RLASurround.astro

@@ -14,13 +14,13 @@ import RLAIcon from "../icon/RLAIcon.astro"
 ---
 
 {(prev || next) && (
-  <div class="mt-12 pt-6 border-t border-border flex justify-between gap-4">
+  <div class="mt-12 pt-6 border-t border-default flex justify-between gap-4">
     {prev ? (
       <a href={prev.href} class="flex flex-col gap-1 text-left group no-underline max-w-[45%]">
-        <span class="text-xs text-muted-foreground font-medium flex items-center gap-1 group-hover:text-primary transition-colors">
+        <span class="text-xs text-muted font-medium flex items-center gap-1 group-hover:text-primary transition-colors">
           <RLAIcon name="arrowLeft" class="size-3" /> Previous
         </span>
-        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
+        <span class="text-sm font-semibold text-highlighted group-hover:text-primary transition-colors truncate">
           {prev.label}
         </span>
       </a>
@@ -28,10 +28,10 @@ import RLAIcon from "../icon/RLAIcon.astro"
 
     {next ? (
       <a href={next.href} class="flex flex-col gap-1 text-right group no-underline max-w-[45%]">
-        <span class="text-xs text-muted-foreground font-medium flex items-center justify-end gap-1 group-hover:text-primary transition-colors">
+        <span class="text-xs text-muted font-medium flex items-center justify-end gap-1 group-hover:text-primary transition-colors">
           Next <RLAIcon name="arrowRight" class="size-3" />
         </span>
-        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
+        <span class="text-sm font-semibold text-highlighted group-hover:text-primary transition-colors truncate">
           {next.label}
         </span>
       </a>

package/src/components/switch/RLASwitch.astro

@@ -1,34 +1,18 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SwitchProps } from "./switch"
-import { resolveTheme } from "../../utils/resolveTheme"
-import switchThemeDefault, { createSwitchTheme } from "./switch.theme"
-const switchTheme = resolveTheme(switchThemeDefault, createSwitchTheme)
+import { switchTheme } from "./switch.theme"
 
 
-const switchFn = scv(switchTheme)
 
 const {
   checked = false,
   disabled = false,
   name,
   label,
-  color = "primary",
-  size = "md",
-  theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as SwitchProps
 
-const classes = resolveClasses(switchFn, {
-  color,
-  size,
-  checked,
-  theme
-}, useUi("switch", uiProp), className);
+const classes = switchTheme(Astro.props);
 ---
 <label class={classes.root} data-slot="root">
   <input

package/src/components/switch/switch.theme.ts

@@ -1,66 +1,55 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSwitchTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "input", "track", "thumb", "label"],
-    base: {
-      root: "inline-flex items-center gap-2 cursor-pointer select-none",
-      input: "absolute opacity-0 size-0 pointer-events-none peer",
-      track: [
-        "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-      ],
-      thumb:
-        "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
-      label: "text-sm text-foreground leading-none"
+export const switchTheme = defineTheme("switch", {
+  slots: ["root", "input", "track", "thumb", "label"],
+  base: {
+    root: "inline-flex items-center gap-2 cursor-pointer select-none",
+    input: "absolute opacity-0 size-0 pointer-events-none peer",
+    track: [
+      "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-[var(--rl-ring)]/50 focus-within:ring-offset-2",
+      "peer-checked:bg-[var(--rl-bg)]",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+    ],
+    thumb:
+      "pointer-events-none block size-4 rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 translate-x-0",
+    label: "text-sm text-highlighted leading-none"
+  },
+  variants: {
+    color: "auto",
+    size: {
+      sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
+      md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
+      lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
     },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
-          }
-        ])
-      ),
-      size: {
-        sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
-        md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
-        lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
-      },
-      checked: {
-        true: { thumb: "translate-x-full" },
-        false: { thumb: "translate-x-0" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
+    checked: {
+      true: { thumb: "translate-x-full" },
+      false: { thumb: "translate-x-0" }
     },
-    compoundVariants: [
-      {
-        size: "sm",
-        checked: true,
-        classNames: { thumb: "translate-x-3" }
-      },
-      {
-        size: "md",
-        checked: true,
-        classNames: { thumb: "translate-x-4" }
-      },
-      {
-        size: "lg",
-        checked: true,
-        classNames: { thumb: "translate-x-5" }
-      }
-    ],
-    defaultVariants: {
-      color: "primary",
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
+    }
+  },
+  compoundVariants: [
+    {
+      size: "sm",
+      checked: true,
+      classNames: { thumb: "translate-x-3" }
+    },
+    {
       size: "md",
-      checked: false
+      checked: true,
+      classNames: { thumb: "translate-x-4" }
+    },
+    {
+      size: "lg",
+      checked: true,
+      classNames: { thumb: "translate-x-5" }
     }
-  })
-
-export default createSwitchTheme()
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    checked: false
+  }
+})

package/src/components/switch/switch.ts

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