@rimelight/ui 0.0.57 → 0.0.60

package/src/components/logo/RLSLogo.tsx

@@ -81,7 +81,6 @@ const RLSLogo: Component<RLSLogoProps> = (allProps) => {
       aria-label={props.alt || variant()}
       data-slot="root"
       data-theme={props.theme}
-      style={props.theme ? { "color-scheme": props.theme } : undefined}
       {...rest}
     >
       <Show when={logoInfo().logoSrc} fallback={props.children}>
@@ -94,13 +93,7 @@ const RLSLogo: Component<RLSLogoProps> = (allProps) => {
           <Show
             when={!hasAutoMode()}
             fallback={
-              <span
-                class="rla-logo-image size-full flex items-center justify-center shrink-0"
-                style={{
-                  "--rla-logo-light": `url('${logoInfo().lightSrc}')`,
-                  "--rla-logo-dark": `url('${logoInfo().darkSrc}')`
-                }}
-              >
+              <span class="rla-logo-image size-full flex items-center justify-center shrink-0">
                 <img
                   src={logoInfo().lightSrc || ""}
                   alt={props.alt || ""}

package/src/components/marquee/RLAMarquee.astro

@@ -1,62 +1,55 @@
----
-import type { MarqueeProps } from "./marquee"
-import { marqueeTheme } from "./marquee.theme"
-
-
-const {
-  speed = 40,
-  ...rest
-} = Astro.props as MarqueeProps
-
-const classes = marqueeTheme(Astro.props)
-
-const duration = `${speed}s`
-const id = `marquee-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="marquee-root" {...rest}>
-  <div class:list={[classes.track, id]} data-slot="track">
-    <slot />
-  </div>
-  <div class:list={[classes.track, id]} data-slot="track" aria-hidden="true">
-    <slot />
-  </div>
-</div>
-
-<style is:inline set:html={`
-  .${id} {
-    animation-duration: ${duration} !important;
-  }
-`} />
-
-<style>
-  .animate-marquee,
-  .animate-marquee-left {
-    animation: marquee-left 30s linear infinite;
-  }
-  .animate-marquee-right {
-    animation: marquee-right 30s linear infinite;
-  }
-  .animate-marquee-up {
-    animation: marquee-up 30s linear infinite;
-  }
-  .animate-marquee-down {
-    animation: marquee-down 30s linear infinite;
-  }
-
-  @keyframes marquee-left {
-    from { transform: translateX(0); }
-    to { transform: translateX(-100%); }
-  }
-  @keyframes marquee-right {
-    from { transform: translateX(-100%); }
-    to { transform: translateX(0); }
-  }
-  @keyframes marquee-up {
-    from { transform: translateY(0); }
-    to { transform: translateY(-100%); }
-  }
-  @keyframes marquee-down {
-    from { transform: translateY(-100%); }
-    to { transform: translateY(0); }
-  }
-</style>
+---
+import type { MarqueeProps } from "./marquee"
+import { marqueeTheme } from "./marquee.theme"
+
+
+const {
+  speed = 40,
+  ...rest
+} = Astro.props as MarqueeProps
+
+const classes = marqueeTheme(Astro.props)
+
+const durationClass = `duration-[${speed}s]`
+---
+<div class={classes.root} data-slot="marquee-root" {...rest}>
+  <div class:list={[classes.track, durationClass]} data-slot="track">
+    <slot />
+  </div>
+  <div class:list={[classes.track, durationClass]} data-slot="track" aria-hidden="true">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .animate-marquee,
+  .animate-marquee-left {
+    animation: marquee-left 30s linear infinite;
+  }
+  .animate-marquee-right {
+    animation: marquee-right 30s linear infinite;
+  }
+  .animate-marquee-up {
+    animation: marquee-up 30s linear infinite;
+  }
+  .animate-marquee-down {
+    animation: marquee-down 30s linear infinite;
+  }
+
+  @keyframes marquee-left {
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
+  }
+  @keyframes marquee-right {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+  @keyframes marquee-up {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+  }
+  @keyframes marquee-down {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+</style>

package/src/components/page-section/RLAPageSection.astro

@@ -45,9 +45,9 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
   data-orientation={orientation}
   class:list={[
     classes.root,
-    contentVisibility === "auto" && "[content-visibility:auto] [contain-intrinsic-size:var(--rla-contain-intrinsic-size,auto_500px)]"
+    contentVisibility === "auto" && "[content-visibility:auto]",
+    containIntrinsicSize ? `[contain-intrinsic-size:${containIntrinsicSize}]` : (contentVisibility === "auto" && "[contain-intrinsic-size:auto_500px]")
   ]}
-  style={containIntrinsicSize ? `--rla-contain-intrinsic-size: ${containIntrinsicSize};` : undefined}
   {...rest}
 >
   {Astro.slots.has("background") && (

package/src/components/progress/RLAProgress.astro

@@ -1,38 +1,39 @@
----
-import type { ProgressProps } from "./progress"
-import { progressTheme } from "./progress.theme"
-
-
-const {
-  value = 0,
-  max = 100,
-  theme,
-  ...rest
-} = Astro.props as ProgressProps
-
-const classes = progressTheme(Astro.props)
-
-const percentage = Math.min(100, Math.max(0, (value / max) * 100))
-const id = `progress-${Math.random().toString(36).substring(2, 9)}`
----
-<div
-  class={classes.root}
-  data-slot="progress-root"
-  role="progressbar"
-  aria-valuemin={0}
-  aria-valuemax={max}
-  aria-valuenow={value}
-  data-theme={theme}
-  {...rest}
->
-  <div
-    class:list={[classes.indicator, id]}
-    data-slot="indicator"
-  />
-</div>
-
-<style is:inline set:html={`
-  .${id} {
-    transform: translateX(-${100 - percentage}%) !important;
-  }
-`} />
+---
+import type { ProgressProps } from "./progress"
+import { progressTheme } from "./progress.theme"
+
+
+const {
+  value = 0,
+  max = 100,
+  theme,
+  ...rest
+} = Astro.props as ProgressProps
+
+const classes = progressTheme(Astro.props)
+
+const percentage = Math.min(100, Math.max(0, Math.round((value / max) * 100)))
+
+const widthClass =
+  percentage === 100 ? "w-full" :
+  percentage === 75 ? "w-3/4" :
+  percentage === 50 ? "w-1/2" :
+  percentage === 25 ? "w-1/4" :
+  percentage === 0 ? "w-0" :
+  `w-[${percentage}%]`
+---
+<div
+  class={classes.root}
+  data-slot="progress-root"
+  role="progressbar"
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  data-theme={theme}
+  {...rest}
+>
+  <div
+    class:list={[classes.indicator, widthClass]}
+    data-slot="indicator"
+  />
+</div>

package/src/components/progress/RLSProgress.tsx

@@ -29,6 +29,21 @@ const RLSProgress: Component<RLSProgressProps> = (allProps) => {
     })
   )
 
+  const widthClass = () => {
+    const pct = Math.round(percentage())
+    return pct === 100
+      ? "w-full"
+      : pct === 75
+        ? "w-3/4"
+        : pct === 50
+          ? "w-1/2"
+          : pct === 25
+            ? "w-1/4"
+            : pct === 0
+              ? "w-0"
+              : `w-[${pct}%]`
+  }
+
   return (
     <div
       class={resolvedClasses().root}
@@ -40,11 +55,7 @@ const RLSProgress: Component<RLSProgressProps> = (allProps) => {
       data-theme={props.theme}
       {...rest}
     >
-      <div
-        class={resolvedClasses().indicator}
-        data-slot="indicator"
-        style={{ transform: `translateX(-${100 - percentage()}%)` }}
-      />
+      <div class={`${resolvedClasses().indicator} ${widthClass()}`} data-slot="indicator" />
       {props.children}
     </div>
   )

package/src/components/progress/progress.theme.ts

@@ -4,7 +4,7 @@ export const progressTheme = defineTheme("progress", {
   slots: ["root", "indicator"],
   base: {
     root: "relative w-full overflow-hidden rounded-full bg-muted shadow-inner",
-    indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out bg-[var(--rl-bg)]"
+    indicator: "h-full rounded-full transition-all duration-300 ease-in-out bg-[var(--rl-bg)]"
   },
   variants: {
     color: "auto",

package/src/components/scroll-area/RLAScrollArea.astro

@@ -13,18 +13,17 @@ const {
 
 const classes = scrollAreaTheme(Astro.props)
 
-const heightStyle = height
-  ? `height:${typeof height === "number" ? `${height}px` : height}`
-  : undefined
+const heightClass = height
+  ? (typeof height === "number" ? `h-[${height}px]` : `h-[${height}]`)
+  : ""
 ---
 
 <div
-  class={classes.root}
+  class:list={[classes.root, heightClass]}
   data-slot="root"
   data-scroll-area
   data-orientation={orientation}
   data-hide-delay={scrollHideDelay}
-  style={heightStyle}
   {...rest}
 >
   {/* Scrollable viewport */}

package/src/components/scroll-area/RLSScrollArea.tsx

@@ -141,21 +141,20 @@ const RLSScrollArea: Component<RLSScrollAreaProps> = (allProps) => {
     })
   )
 
-  const heightStyle = () =>
+  const heightClass = () =>
     props.height
       ? typeof props.height === "number"
-        ? `${props.height}px`
-        : props.height
-      : undefined
+        ? `h-[${props.height}px]`
+        : `h-[${props.height}]`
+      : ""
 
   return (
     <div
-      class={resolvedClasses().root}
+      class={`${resolvedClasses().root} ${heightClass()}`}
       data-slot="root"
       data-scroll-area
       data-orientation={orientation()}
       data-hide-delay={hideDelay()}
-      style={{ height: heightStyle() }}
       {...rest}
     >
       <div