@rimelight/ui 0.0.42 → 0.0.44

package/src/components/carousel/RLACarousel.astro

@@ -1,25 +1,17 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { CarouselProps } from "./carousel"
-import { resolveTheme } from "../../utils/resolveTheme"
-import carouselThemeDefault, { createCarouselTheme } from "./carousel.theme"
-const carouselTheme = resolveTheme(carouselThemeDefault, createCarouselTheme)
+import { carouselTheme } from "./carousel.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const carousel = scv(carouselTheme)
 
 const {
   slides,
   autoplay = false,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as CarouselProps
 
-const classes = resolveClasses(carousel, {}, useUi("carousel", uiProp), className)
+const classes = carouselTheme(Astro.props)
 const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
 ---
 <rla-carousel data-autoplay={autoplay ? "true" : "false"} {...rest}>
@@ -28,7 +20,11 @@ const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
       <div class={classes.container} data-slot="container">
         {slides ? (
           slides.map((slide) => (
-            <div class={classes.slide} data-slot="slide">
+            <div
+              class={`${classes.slide} rla-carousel-slide`}
+              data-slot="slide"
+              style="container-type: scroll-state; container-name: rla-slide;"
+            >
               <div class="relative w-full aspect-video">
                 {slide.imageSrc && <img src={slide.imageSrc} alt={slide.title || ""} class="w-full h-full object-cover rounded-lg" draggable="false" />}
                 {(slide.title || slide.description) && (
@@ -47,10 +43,10 @@ const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
     </div>
 
     <button class={classes.buttonPrev} data-slot="prev-button" type="button" aria-label="Previous slide">
-      <RLAIcon name="chevronLeft" class="size-5" aria-hidden="true" />
+      <RLAIcon name="i-rl-chevronLeft" class="size-5" aria-hidden="true" />
     </button>
     <button class={classes.buttonNext} data-slot="next-button" type="button" aria-label="Next slide">
-      <RLAIcon name="chevronRight" class="size-5" aria-hidden="true" />
+      <RLAIcon name="i-rl-chevronRight" class="size-5" aria-hidden="true" />
     </button>
   </div>
 </rla-carousel>
@@ -283,3 +279,39 @@ const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
     customElements.define('rla-carousel', RLACarousel);
   }
 </script>
+
+<style>
+  /*
+   * CSS scroll-state(snapped: x) — Chrome 133+
+   *
+   * Each slide is a scroll-state container. When the carousel uses
+   * scroll-snap (or the JS engine snaps to a slide), the browser marks
+   * the currently-snapped slide with snapped: x.
+   *
+   * Snapped slide  → full opacity + normal scale
+   * Off-screen slides → dimmed + slightly scaled down
+   *
+   * This is purely additive progressive enhancement. The JS engine
+   * (infinite-loop clones, pointer drag, autoplay) is unchanged.
+   * Browsers without scroll-state() support see all slides at full
+   * opacity, which matches the previous behaviour.
+   */
+  @container rla-slide scroll-state(snapped: x) {
+    .rla-carousel-slide {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @container rla-slide not scroll-state(snapped: x) {
+    .rla-carousel-slide {
+      opacity: 0.7;
+      scale: 0.97;
+    }
+  }
+
+  /* Smooth transition between states */
+  .rla-carousel-slide {
+    transition: opacity 0.35s ease, scale 0.35s ease;
+  }
+</style>

package/src/components/carousel/carousel.theme.ts

@@ -1,34 +1,30 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createCarouselTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "viewport", "container", "slide", "buttonPrev", "buttonNext", "dots", "dot"],
-    base: {
-      root: "relative w-full overflow-hidden select-none group/carousel",
-      viewport: "w-full overflow-hidden cursor-grab active:cursor-grabbing",
-      container: "flex backface-hidden",
-      slide: "min-w-0 shrink-0 grow-0 basis-full pl-4 relative",
-      buttonPrev: [
-        "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-border bg-background/80 backdrop-blur-sm text-foreground shadow transition-all hover:bg-background cursor-pointer",
-        "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
-      ],
-      buttonNext: [
-        "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-border bg-background/80 backdrop-blur-sm text-foreground shadow transition-all hover:bg-background cursor-pointer",
-        "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
-      ],
-      dots: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5 items-center",
-      dot: "block size-2 rounded-full bg-foreground/20 cursor-pointer transition-all duration-350 hover:bg-foreground/45"
-    },
-    variants: {
-      active: {
-        true: { dot: "bg-foreground size-2.5" },
-        false: { dot: "" }
-      }
-    },
-    defaultVariants: {
-      active: false
+export const carouselTheme = defineTheme("carousel", {
+  slots: ["root", "viewport", "container", "slide", "buttonPrev", "buttonNext", "dots", "dot"],
+  base: {
+    root: "relative w-full overflow-hidden select-none group/carousel",
+    viewport: "w-full overflow-hidden cursor-grab active:cursor-grabbing",
+    container: "flex backface-hidden",
+    slide: "min-w-0 shrink-0 grow-0 basis-full pl-4 relative",
+    buttonPrev: [
+      "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-default bg-default/80 backdrop-blur-sm text-highlighted shadow transition-all hover:bg-default cursor-pointer",
+      "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
+    ],
+    buttonNext: [
+      "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-default bg-default/80 backdrop-blur-sm text-highlighted shadow transition-all hover:bg-default cursor-pointer",
+      "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
+    ],
+    dots: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5 items-center",
+    dot: "block size-2 rounded-full bg-neutral-950/20 cursor-pointer transition-all duration-350 hover:bg-neutral-950/45"
+  },
+  variants: {
+    active: {
+      true: { dot: "bg-neutral-950 size-2.5" },
+      false: { dot: "" }
     }
-  })
-
-export default createCarouselTheme()
+  },
+  defaultVariants: {
+    active: false
+  }
+})

package/src/components/chart/RLAChart.astro

@@ -1,12 +1,8 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ChartProps, ChartDataPoint } from "./chart"
-import chartTheme from "./chart.theme"
+import { chartTheme } from "./chart.theme"
 
 
-const chart = scv(chartTheme)
 
 const {
   type = "bar",
@@ -14,12 +10,10 @@ const {
   title,
   height = 280,
   color = "primary",
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as ChartProps
 
-const classes = resolveClasses(chart, {}, useUi("chart", uiProp), className)
+const classes = chartTheme(Astro.props)
 
 // Compute derived values on the server so we don't do heavy JS on the client
 const max = data.length > 0 ? Math.max(...data.map(d => d.value)) : 1
@@ -102,7 +96,7 @@ const id = `chart-${Math.random().toString(36).substring(2, 9)}`
         const pct = max > 0 ? (item.value / max) * 100 : 0
         return (
           <div class="flex flex-col items-center gap-1 flex-1 group">
-            <span class="text-[10px] text-muted-foreground font-mono opacity-0 group-hover:opacity-100 transition-opacity">
+            <span class="text-[10px] text-muted font-mono opacity-0 group-hover:opacity-100 transition-opacity">
               {item.value}
             </span>
             <div class:list={[classes.bar, "h-full w-full overflow-hidden !bg-transparent"]} title={`${item.label}: ${item.value}`}>
@@ -187,19 +181,19 @@ const id = `chart-${Math.random().toString(36).substring(2, 9)}`
           )
         })}
         {type === "donut" && (
-          <circle cx={PIE_CX} cy={PIE_CY} r={DONUT_INNER_R} fill="var(--color-card, white)" />
+          <circle cx={PIE_CX} cy={PIE_CY} r={DONUT_INNER_R} fill="var(--rl-neutral-50)" />
         )}
       </svg>
 
       {/* Legend */}
       <div class="flex flex-col gap-1.5">
         {data.map((item, i) => (
-          <div class="flex items-center gap-2 text-xs text-muted-foreground">
+          <div class="flex items-center gap-2 text-xs text-muted">
             <svg class="size-3 shrink-0" viewBox="0 0 10 10">
               <rect width="10" height="10" rx="2" fill={getColor(item, i)} />
             </svg>
             <span>{item.label}</span>
-            <span class="ml-1 font-mono text-foreground">{item.value}</span>
+            <span class="ml-1 font-mono text-highlighted">{item.value}</span>
           </div>
         ))}
       </div>

package/src/components/chart/chart.theme.ts

@@ -1,22 +1,19 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChartTheme = () =>
-  defineTheme({
-    slots: ["root", "title", "container", "svg", "axis", "bar", "line", "tooltip", "legend"],
-    base: {
-      root: "flex flex-col gap-3 p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm",
-      title: "text-sm font-semibold tracking-tight text-foreground",
-      container: "relative w-full aspect-video flex items-end justify-between",
-      svg: "w-full h-full",
-      axis: "text-[10px] text-muted-foreground",
-      bar: "rounded-t transition-all hover:opacity-85",
-      line: "stroke-2 fill-none",
-      tooltip:
-        "absolute z-50 bg-background text-foreground border border-border rounded shadow p-2 text-xs",
-      legend: "flex items-center justify-center gap-4 text-xs text-muted-foreground"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChartTheme()
+export const chartTheme = defineTheme("chart", {
+  slots: ["root", "title", "container", "svg", "axis", "bar", "line", "tooltip", "legend"],
+  base: {
+    root: "flex flex-col gap-3 p-4 rounded-xl border border-default bg-elevated text-highlighted shadow-sm",
+    title: "text-sm font-semibold tracking-tight text-highlighted",
+    container: "relative w-full aspect-video flex items-end justify-between",
+    svg: "w-full h-full",
+    axis: "text-[10px] text-muted",
+    bar: "rounded-t transition-all hover:opacity-85",
+    line: "stroke-2 fill-none",
+    tooltip:
+      "absolute z-50 bg-default text-highlighted border border-default rounded shadow p-2 text-xs",
+    legend: "flex items-center justify-center gap-4 text-xs text-muted"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chart/chart.ts

@@ -1,4 +1,4 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 export interface ChartDataPoint {
   label: string
   value: number

package/src/components/chat/RLAChat.astro

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

package/src/components/chat/chat.theme.ts

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

package/src/components/chat-message/RLAChatMessage.astro

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

package/src/components/chat-message/chat-message.theme.ts

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

package/src/components/chat-messages/RLAChatMessages.astro

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

package/src/components/chat-messages/chat-messages.theme.ts

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

package/src/components/chat-palette/RLAChatPalette.astro

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

package/src/components/chat-palette/chat-palette.theme.ts

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

package/src/components/chat-prompt/RLAChatPrompt.astro

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

package/src/components/chat-prompt/chat-prompt.theme.ts

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

package/src/components/chat-prompt-submit/RLAChatPromptSubmit.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatPromptSubmitProps } from "./chat-prompt-submit"
-import chatPromptSubmitTheme from "./chat-prompt-submit.theme"
-
-
-const chatPromptSubmit = scv(chatPromptSubmitTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatPromptSubmitProps
-
-const classes = resolveClasses(chatPromptSubmit, {}, useUi("chatPromptSubmit", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatPromptSubmitTheme } from "./chat-prompt-submit.theme"
+
+
+
+const classes = chatPromptSubmitTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat-prompt-submit/chat-prompt-submit.theme.ts

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

package/src/components/chat-reasoning/RLAChatReasoning.astro

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