@rimelight/ui 0.0.41 → 0.0.43

package/src/components/callout/callout.theme.ts

@@ -1,107 +1,65 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createCalloutTheme = (colors: readonly string[] = colorConfig.colors) => {
-  const colorVariants: Record<string, { root: string }> = { neutral: { root: "" } }
-  for (const c of colors) {
-    colorVariants[c] = { root: "" }
-  }
-
-  return defineTheme({
-    slots: ["root", "body", "icon", "title", "content", "avatar", "avatarSize", "actions", "close"],
-    base: {
-      root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start",
-      body: "flex flex-col gap-2.5 flex-1 min-w-0",
-      icon: "shrink-0 size-6 inline-flex items-center justify-center",
-      title: "text-sm font-bold",
-      content: "text-sm opacity-90 leading-relaxed [&>:first-child]:mt-0 [&>:last-child]:mb-0",
-      avatar: "shrink-0",
-      avatarSize: "2xl",
-      actions: "flex flex-wrap gap-1.5",
-      close: "p-0 ml-auto"
+export const calloutTheme = defineTheme("callout", {
+  slots: ["root", "body", "icon", "title", "content", "avatar", "avatarSize", "actions", "close"],
+  base: {
+    root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start",
+    body: "flex flex-col gap-2.5 flex-1 min-w-0",
+    icon: "shrink-0 size-6 inline-flex items-center justify-center",
+    title: "text-sm font-bold",
+    content: "text-sm opacity-90 leading-relaxed [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+    avatar: "shrink-0",
+    avatarSize: "2xl",
+    actions: "flex flex-wrap gap-1.5",
+    close: "p-0 ml-auto"
+  },
+  variants: {
+    variant: {
+      solid: { root: "bg-[var(--rl-bg)] text-white" },
+      outline: { root: "text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25" },
+      soft: { root: "bg-[var(--rl-bg)]/10 text-[var(--rl-text)]" },
+      subtle: {
+        root: "bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+      }
+    },
+    color: "auto",
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
+      variant: "solid",
+      classNames: {
+        root: "text-inverted bg-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      classNames: {
+        root: "text-highlighted bg-default ring ring-inset ring-default"
+      }
     },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      color: colorVariants,
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
+    {
+      color: "neutral",
+      variant: "soft",
+      classNames: {
+        root: "text-highlighted bg-elevated/50"
       }
     },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: {
-          root: "text-inverted bg-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: {
-          root: "text-highlighted bg-default ring ring-inset ring-default"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-highlighted bg-elevated/50"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
-        }
+    {
+      color: "neutral",
+      variant: "subtle",
+      classNames: {
+        root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
       }
-    ],
-    defaultVariants: {
-      color: "primary",
-      variant: "solid"
     }
-  })
-}
-
-export default createCalloutTheme()
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid"
+  }
+})

package/src/components/callout/callout.ts

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

package/src/components/card/RLACard.astro

@@ -1,77 +1,71 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { CardProps } from "./card"
-import cardTheme from "./card.theme"
-
-
-const card = scv(cardTheme)
-
-const {
-  title,
-  description,
-  mediaSrc,
-  href,
-  overlay = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CardProps
-
-const classes = resolveClasses(card, {
-  interactive: !!href,
-  overlay
-}, useUi("card", uiProp), className)
-
-const Tag = href ? "a" : "div"
----
-<Tag
-  class={classes.root}
-  data-slot="card-root"
-  {...(Tag === "a" ? { href } : {})}
-  {...(Tag === "a" ? { style: "text-decoration: none" } : {})}
-  {...rest}
->
-  <slot name="media">
-    {mediaSrc && (
-      <div class={classes.media} data-slot="media">
-        <img src={mediaSrc} alt={title || ""} class="h-full w-full object-cover" />
-      </div>
-    )}
-  </slot>
-
-  {overlay ? (
-    <div class={classes.overlay} data-slot="overlay">
-      {title && <div class={classes.title} data-slot="title">{title}</div>}
-      {description && <div class={classes.description} data-slot="description">{description}</div>}
-      <slot />
-    </div>
-  ) : (
-    <>
-      <slot name="header">
-        {(title || description || Astro.slots.has("title") || Astro.slots.has("description")) && (
-          <div class={classes.header} data-slot="header">
-            {title && <div class={classes.title} data-slot="title">{title}</div>}
-            <slot name="title" />
-            
-            {description && <div class={classes.description} data-slot="description">{description}</div>}
-            <slot name="description" />
-          </div>
-        )}
-      </slot>
-
-      {Astro.slots.has("default") && (
-        <div class={classes.body} data-slot="body">
-          <slot />
-        </div>
-      )}
-
-      {Astro.slots.has("footer") && (
-        <div class={classes.footer} data-slot="footer">
-          <slot name="footer" />
-        </div>
-      )}
-    </>
-  )}
-</Tag>
+---
+import type { CardProps } from "./card"
+import { cardTheme } from "./card.theme"
+
+
+
+const {
+  title,
+  description,
+  mediaSrc,
+  href,
+  overlay = false,
+  ...rest
+} = Astro.props as CardProps
+
+const classes = cardTheme({
+  ...Astro.props,
+  interactive: !!href
+})
+
+const Tag = href ? "a" : "div"
+---
+<Tag
+  class={classes.root}
+  data-slot="card-root"
+  {...(Tag === "a" ? { href } : {})}
+  {...(Tag === "a" ? { style: "text-decoration: none" } : {})}
+  {...rest}
+>
+  <slot name="media">
+    {mediaSrc && (
+      <div class={classes.media} data-slot="media">
+        <img src={mediaSrc} alt={title || ""} class="h-full w-full object-cover" />
+      </div>
+    )}
+  </slot>
+
+  {overlay ? (
+    <div class={classes.overlay} data-slot="overlay">
+      {title && <div class={classes.title} data-slot="title">{title}</div>}
+      {description && <div class={classes.description} data-slot="description">{description}</div>}
+      <slot />
+    </div>
+  ) : (
+    <>
+      <slot name="header">
+        {(title || description || Astro.slots.has("title") || Astro.slots.has("description")) && (
+          <div class={classes.header} data-slot="header">
+            {title && <div class={classes.title} data-slot="title">{title}</div>}
+            <slot name="title" />
+            
+            {description && <div class={classes.description} data-slot="description">{description}</div>}
+            <slot name="description" />
+          </div>
+        )}
+      </slot>
+
+      {Astro.slots.has("default") && (
+        <div class={classes.body} data-slot="body">
+          <slot />
+        </div>
+      )}
+
+      {Astro.slots.has("footer") && (
+        <div class={classes.footer} data-slot="footer">
+          <slot name="footer" />
+        </div>
+      )}
+    </>
+  )}
+</Tag>

package/src/components/card/RLSCard.tsx

@@ -0,0 +1,116 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { CardProps } from "./card"
+import { cardTheme } from "./card.theme"
+
+export interface RLSCardProps extends CardProps {
+  children?: JSX.Element
+  header?: JSX.Element
+  footer?: JSX.Element
+  media?: JSX.Element
+}
+
+const RLSCard: Component<RLSCardProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "title",
+    "description",
+    "mediaSrc",
+    "href",
+    "overlay",
+    "ui",
+    "class",
+    "children",
+    "header",
+    "footer",
+    "media"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    cardTheme({
+      interactive: !!props.href,
+      overlay: !!props.overlay,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const content = () => (
+    <>
+      {props.media ? (
+        props.media
+      ) : props.mediaSrc ? (
+        <div class={resolvedClasses().media} data-slot="media">
+          <img src={props.mediaSrc} alt={props.title || ""} class="h-full w-full object-cover" />
+        </div>
+      ) : null}
+
+      {props.overlay ? (
+        <div class={resolvedClasses().overlay} data-slot="overlay">
+          {props.title ? (
+            <div class={resolvedClasses().title} data-slot="title">
+              {props.title}
+            </div>
+          ) : null}
+          {props.description ? (
+            <div class={resolvedClasses().description} data-slot="description">
+              {props.description}
+            </div>
+          ) : null}
+          {props.children}
+        </div>
+      ) : (
+        <>
+          {props.header ? (
+            props.header
+          ) : props.title || props.description ? (
+            <div class={resolvedClasses().header} data-slot="header">
+              {props.title ? (
+                <div class={resolvedClasses().title} data-slot="title">
+                  {props.title}
+                </div>
+              ) : null}
+              {props.description ? (
+                <div class={resolvedClasses().description} data-slot="description">
+                  {props.description}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+
+          {props.children ? (
+            <div class={resolvedClasses().body} data-slot="body">
+              {props.children}
+            </div>
+          ) : null}
+
+          {props.footer ? (
+            <div class={resolvedClasses().footer} data-slot="footer">
+              {props.footer}
+            </div>
+          ) : null}
+        </>
+      )}
+    </>
+  )
+
+  if (props.href) {
+    return (
+      <a
+        href={props.href}
+        class={resolvedClasses().root}
+        data-slot="card-root"
+        style={{ "text-decoration": "none" }}
+        {...rest}
+      >
+        {content()}
+      </a>
+    )
+  }
+
+  return (
+    <div class={resolvedClasses().root} data-slot="card-root" {...rest}>
+      {content()}
+    </div>
+  )
+}
+
+export default RLSCard

package/src/components/card/RLVCard.vue

@@ -1,31 +1,23 @@
 <script setup lang="ts">
 import { computed, useSlots, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { CardProps } from "./card"
-import cardThemeDefault from "./card.theme"
+import { cardTheme } from "./card.theme"
 
 defineOptions({ name: "RLVCard" })
 
 const attrs = useAttrs()
 const slots = useSlots()
-const cardScv = scv(cardThemeDefault)
 
 const props = withDefaults(defineProps<CardProps>(), {
   overlay: false
 })
 
 const resolvedClasses = computed(() =>
-  resolveClasses(
-    cardScv,
-    {
-      interactive: !!props.href,
-      overlay: props.overlay
-    },
-    useUi("card", props.ui),
-    props.class
-  )
+  cardTheme({
+    interactive: !!props.href,
+    overlay: props.overlay,
+    class: props.class
+  })
 )
 
 const Tag = computed(() => (props.href ? "a" : "div"))

package/src/components/card/card.theme.ts

@@ -1,50 +1,47 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createCardTheme = () =>
-  defineTheme({
-    slots: ["root", "header", "title", "description", "body", "footer", "overlay", "media"],
-    base: {
-      root: "rounded-lg overflow-hidden",
-      header: "p-4 sm:px-6 border-default",
-      title: "text-highlighted font-semibold",
-      description: "mt-1 text-muted-foreground text-sm",
-      body: "p-4 sm:p-6 border-default",
-      footer: "p-4 sm:px-6 border-default",
-      overlay:
-        "absolute inset-0 z-10 flex flex-col justify-end p-4 bg-gradient-to-t from-black/80 to-transparent text-white",
-      media: "relative border-default"
-    },
-    variants: {
-      variant: {
-        solid: {
-          root: "bg-inverted text-inverted",
-          title: "text-inverted",
-          description: "text-dimmed"
-        },
-        outline: {
-          root: "bg-default border border-default divide-y divide-default"
-        },
-        soft: {
-          root: "bg-elevated/50 divide-y divide-default"
-        },
-        subtle: {
-          root: "bg-elevated/50 border border-default divide-y divide-default"
-        }
+export const cardTheme = defineTheme("card", {
+  slots: ["root", "header", "title", "description", "body", "footer", "overlay", "media"],
+  base: {
+    root: "rounded-lg overflow-hidden",
+    header: "p-4 sm:px-6 border-default",
+    title: "text-highlighted font-semibold",
+    description: "mt-1 text-muted text-sm",
+    body: "p-4 sm:p-6 border-default",
+    footer: "p-4 sm:px-6 border-default",
+    overlay:
+      "absolute inset-0 z-10 flex flex-col justify-end p-4 bg-gradient-to-t from-black/80 to-transparent text-white",
+    media: "relative border-default"
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: "bg-inverted text-inverted",
+        title: "text-inverted",
+        description: "text-dimmed"
+      },
+      outline: {
+        root: "bg-default border border-default divide-y divide-default"
       },
-      interactive: {
-        true: { root: "hover:shadow-md cursor-pointer" },
-        false: { root: "" }
+      soft: {
+        root: "bg-elevated/50 divide-y divide-default"
       },
-      overlay: {
-        true: { root: "relative" },
-        false: {}
+      subtle: {
+        root: "bg-elevated/50 border border-default divide-y divide-default"
       }
     },
-    defaultVariants: {
-      variant: "outline",
-      interactive: false,
-      overlay: false
+    interactive: {
+      true: { root: "hover:shadow-md cursor-pointer" },
+      false: { root: "" }
+    },
+    overlay: {
+      true: { root: "relative" },
+      false: {}
     }
-  })
-
-export default createCardTheme()
+  },
+  defaultVariants: {
+    variant: "outline",
+    interactive: false,
+    overlay: false
+  }
+})

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) && (
@@ -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>