@rimelight/ui 0.0.56 → 0.0.58

package/src/components/image/RLSImage.tsx

@@ -236,16 +236,13 @@ const RLSImage: Component<RLSImageProps> = (allProps) => {
 
     if (hasColorMode) {
       return (
-        <div
-          class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-lg flex items-center justify-center"
-          style={`--rla-img-light: url('${lightUrl}'); --rla-img-dark: url('${darkUrl}');`}
-        >
+        <div class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-[inherit] flex items-center justify-center">
           <img
             src={show() ? lightUrl : undefined}
             alt={alt}
             loading={loading}
             decoding={decoding}
-            class={`${resolvedClasses().triggerImage} rla-img-light w-full h-full object-cover rounded-lg`}
+            class={`${resolvedClasses().triggerImage} rla-img-light w-full h-full object-cover rounded-[inherit]`}
             onError={handleError}
             onLoad={handleLoad}
           />
@@ -254,7 +251,7 @@ const RLSImage: Component<RLSImageProps> = (allProps) => {
             alt={alt}
             loading={loading}
             decoding={decoding}
-            class={`${resolvedClasses().triggerImage} rla-img-dark w-full h-full object-cover rounded-lg hidden`}
+            class={`${resolvedClasses().triggerImage} rla-img-dark w-full h-full object-cover rounded-[inherit] hidden`}
           />
         </div>
       )
@@ -289,7 +286,7 @@ const RLSImage: Component<RLSImageProps> = (allProps) => {
         {triggerImage()}
       </button>
     ) : (
-      <div class="overflow-hidden rounded-lg block">{triggerImage()}</div>
+      <div class="overflow-hidden rounded-[inherit] block">{triggerImage()}</div>
     )
 
   return (
@@ -298,7 +295,6 @@ const RLSImage: Component<RLSImageProps> = (allProps) => {
       class={resolvedClasses().root}
       data-slot="root"
       data-theme={props.theme}
-      style={props.theme ? `color-scheme: ${props.theme};` : undefined}
       {...rest}
     >
       {isFigure ? (
@@ -357,10 +353,7 @@ const RLSImage: Component<RLSImageProps> = (allProps) => {
                   />
                 </picture>
               ) : hasColorMode ? (
-                <div
-                  class="rla-image-color-mode max-w-full max-h-[65vh] relative flex items-center justify-center overflow-hidden"
-                  style={`--rla-img-light: url('${lightUrl}'); --rla-img-dark: url('${darkUrl}');`}
-                >
+                <div class="rla-image-color-mode max-w-full max-h-[65vh] relative flex items-center justify-center overflow-hidden">
                   <img
                     src={show() ? lightUrl : undefined}
                     alt={alt}

package/src/components/image/image.theme.ts

@@ -14,12 +14,12 @@ export const imageTheme = defineTheme("image", {
     "closeButton"
   ],
   base: {
-    root: "relative inline-block group/image",
-    figure: "m-0 p-0 inline-flex flex-col max-w-full",
+    root: "relative inline-block group/image overflow-hidden rounded-lg",
+    figure: "m-0 p-0 inline-flex flex-col max-w-full rounded-[inherit] overflow-hidden",
     caption: "mt-2 text-xs text-muted text-center italic",
     trigger:
-      "cursor-pointer overflow-hidden rounded-lg block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
-    triggerImage: "max-w-full h-auto object-cover rounded-lg",
+      "cursor-pointer overflow-hidden rounded-[inherit] block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
+    triggerImage: "max-w-full h-auto object-cover rounded-[inherit]",
     dialog:
       "backdrop:bg-black/60 max-w-[98vw] sm:max-w-[95vw] w-fit max-h-[90vh] rounded-xl p-0 overflow-hidden border-0 m-auto",
     image: "object-contain max-w-full max-h-[65vh] rounded-lg",

package/src/components/input-rating/RLAInputRating.astro

@@ -24,20 +24,27 @@ const {
 
 const classes = inputRatingTheme(Astro.props)
 
-const sizeMap = {
-  xs: "0.75rem",
-  sm: "1rem",
-  md: "1.25rem",
-  lg: "1.5rem",
-  xl: "1.75rem"
+const sizeClassMap: Record<string, string> = {
+  xs: "size-3",
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+  xl: "size-7"
 }
-const itemSize = sizeMap[size] || "1.25rem"
+const itemSizeClass = sizeClassMap[size] || "size-5"
 
 const ratingItems = Array.from({ length }, (_, idx) => {
   const i = idx + 1;
-  const initWidth = defaultValue >= i ? "100%" : defaultValue <= i - 1 ? "0%" : `${(defaultValue - (i - 1)) * 100}%`;
+  const pct = defaultValue >= i ? 100 : defaultValue <= i - 1 ? 0 : Math.round((defaultValue - (i - 1)) * 100);
+  const widthClass =
+    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}%]`;
   const isActive = defaultValue >= i - 0.99 ? "active" : "inactive";
-  return { i, initWidth, isActive };
+  return { i, widthClass, isActive };
 });
 ---
 
@@ -71,12 +78,11 @@ const ratingItems = Array.from({ length }, (_, idx) => {
       class="rating-hidden-input"
     />
 
-    {ratingItems.map(({ i, initWidth, isActive }) => (
+    {ratingItems.map(({ i, widthClass, isActive }) => (
       <div
-        class:list={["input-rating-item", classes.item]}
+        class:list={["input-rating-item", classes.item, itemSizeClass]}
         data-slot="item"
         data-index={i}
-        style={`--item-size: ${itemSize}; width: ${itemSize}; height: ${itemSize};`}
       >
         <div class={classes.emptyIcon} data-slot="emptyIcon">
           <slot name="item">
@@ -85,9 +91,8 @@ const ratingItems = Array.from({ length }, (_, idx) => {
         </div>
 
         <div
-          class:list={["rating-item-indicator", classes.indicator]}
+          class:list={["rating-item-indicator", classes.indicator, widthClass]}
           data-slot="indicator"
-          style={`width: ${initWidth}`}
           data-state={isActive}
         >
           <slot name="item">

package/src/components/input-rating/RLSInputRating.tsx

@@ -45,15 +45,17 @@ const RLSInputRating: Component<RLSInputRatingProps> = (allProps) => {
 
   const step = () => props.step ?? 1
   const length = () => props.length ?? 5
-  const itemSize = () => {
+  const hoverable = () => !!props.hoverable
+  const clearable = () => !!props.clearable
+  const itemSizeClass = () => {
     const map: Record<string, string> = {
-      xs: "0.75rem",
-      sm: "1rem",
-      md: "1.25rem",
-      lg: "1.5rem",
-      xl: "1.75rem"
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6",
+      xl: "size-7"
     }
-    return map[props.size ?? "md"] ?? "1.25rem"
+    return map[props.size ?? "md"] || "size-5"
   }
 
   const [internalValue, setInternalValue] = createSignal<number>(
@@ -75,10 +77,11 @@ const RLSInputRating: Component<RLSInputRatingProps> = (allProps) => {
 
   const items = createMemo(() => Array.from({ length: length() }, (_, idx) => idx + 1))
 
-  const getWidthForVal = (val: number, itemIndex: number) => {
-    if (val >= itemIndex) return "100%"
-    if (val <= itemIndex - 1) return "0%"
-    return `${(val - (itemIndex - 1)) * 100}%`
+  const getWidthClass = (val: number, itemIndex: number) => {
+    if (val >= itemIndex) return "w-full"
+    if (val <= itemIndex - 1) return "w-0"
+    const pct = Math.round((val - (itemIndex - 1)) * 100)
+    return pct === 75 ? "w-3/4" : pct === 50 ? "w-1/2" : pct === 25 ? "w-1/4" : `w-[${pct}%]`
   }
 
   const getValueFromEvent = (e: MouseEvent, el: HTMLElement, index: number) => {
@@ -89,8 +92,9 @@ const RLSInputRating: Component<RLSInputRatingProps> = (allProps) => {
   }
 
   const handleMouseMove = (e: MouseEvent, el: HTMLElement, index: number) => {
-    if (props.disabled || props.readonly) return
-    if (props.hoverable) setHoverValue(getValueFromEvent(e, el, index))
+    if (!hoverable()) return
+    const val = getValueFromEvent(e, el, index)
+    setHoverValue(val)
   }
 
   const handleMouseLeave = () => {
@@ -98,31 +102,36 @@ const RLSInputRating: Component<RLSInputRatingProps> = (allProps) => {
   }
 
   const handleClick = (e: MouseEvent, el: HTMLElement, index: number) => {
-    if (props.disabled || props.readonly) return
     const val = getValueFromEvent(e, el, index)
-    let finalVal = val
-    if (props.clearable && value() === val) finalVal = 0
-    if (props.value === undefined && props.modelValue === undefined) setInternalValue(finalVal)
-    props.onValueChange?.(finalVal)
+    let next = val
+    if (clearable() && value() === val) {
+      next = 0
+    }
+    setInternalValue(next)
+    props.onValueChange?.(next)
+    setHoverValue(null)
   }
 
   const handleKeyDown = (e: KeyboardEvent) => {
     if (props.disabled || props.readonly) return
-    let newVal = value()
+    let next = value()
     if (e.key === "ArrowRight" || e.key === "ArrowUp") {
-      newVal = Math.min(value() + step(), length())
+      next = Math.min(value() + step(), length())
+      e.preventDefault()
     } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
-      newVal = Math.max(value() - step(), 0)
+      next = Math.max(value() - step(), 0)
+      e.preventDefault()
     } else if (e.key === "Home") {
-      newVal = 0
+      next = 0
+      e.preventDefault()
     } else if (e.key === "End") {
-      newVal = length()
-    } else {
-      return
+      next = length()
+      e.preventDefault()
+    }
+    if (next !== value()) {
+      setInternalValue(next)
+      props.onValueChange?.(next)
     }
-    e.preventDefault()
-    if (props.value === undefined && props.modelValue === undefined) setInternalValue(newVal)
-    props.onValueChange?.(newVal)
   }
 
   return (
@@ -158,10 +167,9 @@ const RLSInputRating: Component<RLSInputRatingProps> = (allProps) => {
       <For each={items()}>
         {(i) => (
           <div
-            class={`input-rating-item ${resolvedClasses().item}`}
+            class={`input-rating-item ${resolvedClasses().item} ${itemSizeClass()}`}
             data-slot="item"
             data-index={i}
-            style={{ "--item-size": itemSize(), "width": itemSize(), "height": itemSize() }}
             onMouseMove={(e) => handleMouseMove(e, e.currentTarget, i)}
             onMouseLeave={handleMouseLeave}
             onClick={(e) => handleClick(e, e.currentTarget, i)}
@@ -176,10 +184,9 @@ const RLSInputRating: Component<RLSInputRatingProps> = (allProps) => {
             </div>
 
             <div
-              class={`rating-item-indicator ${resolvedClasses().indicator}`}
+              class={`rating-item-indicator ${resolvedClasses().indicator} ${getWidthClass(display(), i)}`}
               data-slot="indicator"
               data-state={display() >= i - 0.99 ? "active" : "inactive"}
-              style={{ width: getWidthForVal(display(), i) }}
             >
               <RLSIcon
                 name={props.icon || "star"}

package/src/components/input-tags/RLAInputTags.astro

@@ -2,12 +2,9 @@
 import type { InputTagsProps, TagItem } from "./input-tags"
 import { inputTagsTheme } from "./input-tags.theme"
 
-
-
 const {
   items,
   displayLimit = 4,
-  estimatedTagWidth = 80,
   showInput = false,
   name,
   placeholder = "Add tag…",
@@ -16,109 +13,39 @@ const {
 
 const classes = inputTagsTheme(Astro.props)
 
-// ─── Responsive CSS Item Counter ────────────────────────────────────────────
-//
-// Each tag is a flat DOM sibling. Container queries hide tags from the right
-// as the container shrinks and set --hidden-items. CSS counters combine it
-// with the server-side --base-hidden to render "+N more" — no resize observer.
-//
-// Unlike AvatarGroup (fixed-size items), tags have variable widths. We use
-// `estimatedTagWidth` as the per-tag width approximation for breakpoints.
-// Users can tune this prop for label-length mismatches.
-// ─────────────────────────────────────────────────────────────────────────────
-
-const uid = Math.random().toString(36).substring(2, 9)
-const cName = `rla-it-${uid}`
-
-// Normalize items to TagItem objects
 const normalizedItems: TagItem[] = (items ?? []).map(item =>
   typeof item === "string" ? { label: item, value: item } : item
 )
 
-const renderedItems   = normalizedItems.slice(0, displayLimit)
-const baseHiddenCount = Math.max(0, normalizedItems.length - displayLimit)
-const needsOverflow   = normalizedItems.length >= displayLimit
-
-// Gap between tags in px (gap-1.5 = 6px)
-const tagGapPx  = 6
-// Width of the "+N more" chip
-const morePx    = 56
-
-// Generate per-instance container-query CSS
-// Same cascade-based approach as AvatarGroup:
-//   each breakpoint hides ONE new nth-child, smaller containers match more rules.
-let instanceCss = ""
-if (needsOverflow && renderedItems.length > 1) {
-  const maxBreaks = renderedItems.length - 1 // keep at least the first tag
-  for (let i = 0; i < maxBreaks; i++) {
-    const hiddenItems  = i + 1
-    const visibleCount = renderedItems.length - hiddenItems
-    // Min container width for visibleCount tags + more chip + gaps
-    const maxWidth     = visibleCount * estimatedTagWidth + (visibleCount) * tagGapPx + morePx + tagGapPx
-    const hideNthChild = renderedItems.length - i // counting from the end
-
-    instanceCss += `\n@container ${cName} (max-width: ${maxWidth}px) {`
-    instanceCss += `\n  [data-it="${uid}"] { --hidden-items: ${hiddenItems}; }`
-    instanceCss += `\n  [data-it="${uid}"] > .rla-it-tag.hidable:nth-child(${hideNthChild}) { display: none; }`
-    if (baseHiddenCount === 0) {
-      instanceCss += `\n  [data-it="${uid}"] > .rla-it-more-hidden { display: inline-flex; }`
-    }
-    instanceCss += `\n}`
-  }
-}
+const renderedItems = normalizedItems.slice(0, displayLimit)
+const hiddenCount = normalizedItems.length - displayLimit
 ---
 
 {normalizedItems.length > 0 ? (
-  <div
-    class="rla-it-host"
-    style={`container-type: inline-size; container-name: ${cName};`}
-    {...rest}
-  >
-    <div
-      class:list={[classes.root, "rla-it-list"]}
-      data-slot="root"
-      data-it={uid}
-      style={`--base-hidden: ${baseHiddenCount}; --hidden-items: 0;`}
-    >
-      {renderedItems.map((item, idx) => (
-        <span
-          class:list={[
-            classes.tag,
-            "rla-it-tag",
-            needsOverflow && idx > 0 && "hidable"
-          ]}
-          data-slot="tag"
-        >
-          <span class={classes.tagLabel}>{item.label}</span>
-          {name && <input type="hidden" name={name} value={item.value ?? item.label} />}
-        </span>
-      ))}
-
-      {needsOverflow && (
-        <span
-          class:list={[
-            classes.more,
-            "rla-it-more",
-            baseHiddenCount === 0 && "rla-it-more-hidden"
-          ]}
-          aria-hidden="true"
-          data-slot="more"
-        >
-          +<span class="rla-it-count" /> more
-        </span>
-      )}
+  <div class={classes.root} data-slot="root" {...rest}>
+    {renderedItems.map((item) => (
+      <span class={classes.tag} data-slot="tag">
+        <span class={classes.tagLabel}>{item.label}</span>
+        {name && <input type="hidden" name={name} value={item.value ?? item.label} />}
+      </span>
+    ))}
+
+    {hiddenCount > 0 && (
+      <span class={classes.more} aria-hidden="true" data-slot="more">
+        +{hiddenCount} more
+      </span>
+    )}
 
-      {showInput && (
-        <input
-          type="text"
-          name={name ? `${name}__input` : undefined}
-          placeholder={placeholder}
-          class:list={[classes.input]}
-          data-slot="input"
-          autocomplete="off"
-        />
-      )}
-    </div>
+    {showInput && (
+      <input
+        type="text"
+        name={name ? `${name}__input` : undefined}
+        placeholder={placeholder}
+        class={classes.input}
+        data-slot="input"
+        autocomplete="off"
+      />
+    )}
   </div>
 ) : (
   <div class={classes.root} data-slot="root" {...rest}>
@@ -128,47 +55,10 @@ if (needsOverflow && renderedItems.length > 1) {
         type="text"
         name={name ? `${name}__input` : undefined}
         placeholder={placeholder}
-        class:list={[classes.input]}
+        class={classes.input}
         data-slot="input"
         autocomplete="off"
       />
     )}
   </div>
-)}
-
-<!-- Per-instance CSS scoped via unique data-it attribute -->
-<style is:inline set:html={instanceCss} />
-
-<style>
-  .rla-it-host {
-    display: block;
-    width: 100%;
-  }
-
-  .rla-it-tag {
-    display: inline-flex;
-    flex-shrink: 0;
-  }
-
-  /* "+more" chip — flex, visible by default when base-hidden > 0 */
-  .rla-it-more {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    gap: 0.125rem;
-  }
-
-  /* Hidden by default when base-hidden is 0 (revealed by container queries) */
-  .rla-it-more-hidden {
-    display: none;
-  }
-
-  /*
-   * CSS Counter — sums --base-hidden (render-time) + --hidden-items (CSS queries).
-   * Zero JS. The browser does the arithmetic via counter-reset: calc().
-   */
-  .rla-it-count::after {
-    counter-reset: rla-it-cnt calc(var(--base-hidden, 0) + var(--hidden-items, 0));
-    content: counter(rla-it-cnt);
-  }
-</style>
+)}

package/src/components/layout-grid/RLALayoutGrid.astro

@@ -82,10 +82,10 @@ const classes = layoutGridTheme(Astro.props)
     data-shortcut={shortcut}
     {...rest}
   >
-    <aside class={classes.overlay} data-slot="overlay" style={`z-index: ${zIndex}; display: none;`} id="rla-layout-grid-overlay">
+    <aside class:list={[classes.overlay, `z-[${zIndex}]`, "hidden"]} data-slot="overlay" id="rla-layout-grid-overlay">
       <!-- Container holding absolutely-positioned viewport columns -->
-      <div style="position: relative; width: 100%; height: 100%;" data-slot="columns-container"></div>
-      <div data-slot="indicator" style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.85); color: #fff; padding: 6px 12px; border-radius: 6px; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: bold; pointer-events: none; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.5); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px;"></div>
+      <div class="relative w-full h-full" data-slot="columns-container"></div>
+      <div data-slot="indicator" class="fixed bottom-5 right-5 bg-black/85 text-white px-3 py-1.5 rounded-md font-mono text-[11px] font-bold pointer-events-none border border-white/15 shadow-xl tracking-wider flex items-center gap-2"></div>
     </aside>
   </rla-layout-grid>
 )}
@@ -302,7 +302,7 @@ const classes = layoutGridTheme(Astro.props)
       }
 
       if (this.indicatorElement) {
-        this.indicatorElement.innerHTML = `<span style="color: #3b82f6;">${this.currentBreakpoint.toUpperCase()} (${breakpointThreshold}px)</span> <span style="opacity: 0.35;">|</span> <span>${width}px</span> <span style="opacity: 0.35;">|</span> <span style="color: #ef4444;">${totalCols} Cols</span>`
+        this.indicatorElement.innerHTML = `<span class="text-blue-500">${this.currentBreakpoint.toUpperCase()} (${breakpointThreshold}px)</span> <span class="opacity-35">|</span> <span>${width}px</span> <span class="opacity-35">|</span> <span class="text-red-500">${totalCols} Cols</span>`
       }
 
 

package/src/components/logo/RLALogo.astro

@@ -59,7 +59,6 @@ const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
   aria-label={alt || variant}
   data-slot="root"
   data-theme={theme}
-  style={theme ? `color-scheme: ${theme};` : undefined}
   {...rest}
 >
   {logoSrc ? (
@@ -68,7 +67,6 @@ const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
     ) : hasAutoMode ? (
       <span
         class="rla-logo-image size-full flex items-center justify-center shrink-0"
-        style={`--rla-logo-light: url('${lightSrc}'); --rla-logo-dark: url('${darkSrc}');`}
       >
         <img
           src={lightSrc}
@@ -136,18 +134,4 @@ const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
       display: none !important;
     }
   }
-
-  @supports (background-image: light-dark(none, none)) {
-    .rla-logo-image {
-      background-image: light-dark(var(--rla-logo-light), var(--rla-logo-dark));
-      background-size: contain;
-      background-position: center;
-      background-repeat: no-repeat;
-    }
-    .rla-logo-image > .rla-logo-light,
-    .rla-logo-image > .rla-logo-dark {
-      opacity: 0 !important;
-      visibility: hidden !important;
-    }
-  }
 </style>

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>