@rimelight/ui 0.0.57 → 0.0.60

package/src/components/textarea/RLATextarea.astro

@@ -33,7 +33,7 @@ const classes = textareaTheme({
       back to the min-height defined in textarea.theme.ts.
   -->
   <textarea
-    class={classes.textarea}
+    class:list={[classes.textarea, autoGrow && "[field-sizing:content] min-h-unset"]}
     data-slot="textarea"
     placeholder={placeholder}
     disabled={disabled}
@@ -41,7 +41,6 @@ const classes = textareaTheme({
     name={name}
     required={required}
     rows={autoGrow ? undefined : rows}
-    style={autoGrow ? "field-sizing: content; min-height: unset;" : undefined}
     {...rest}
   >{value}</textarea>
 </div>

package/src/components/theme-selector/RLAThemeSelector.astro

@@ -34,9 +34,9 @@ const items = [
         class={classes.select}
       >
         <span slot="leading" class="flex items-center">
-          <RLAIcon name="i-lucide-laptop" class="rla-theme-icon-system size-4" style="display: block;" />
-          <RLAIcon name="i-rl-sun" class="rla-theme-icon-light size-4" style="display: none;" />
-          <RLAIcon name="i-rl-moon" class="rla-theme-icon-dark size-4" style="display: none;" />
+          <RLAIcon name="i-lucide-laptop" class="rla-theme-icon-system size-4 block" />
+          <RLAIcon name="i-rl-sun" class="rla-theme-icon-light size-4 hidden" />
+          <RLAIcon name="i-rl-moon" class="rla-theme-icon-dark size-4 hidden" />
         </span>
       </RLASelect>
     </div>
@@ -72,9 +72,9 @@ const items = [
                 const sysIcons = this.querySelectorAll('.rla-theme-icon-system');
                 const lightIcons = this.querySelectorAll('.rla-theme-icon-light');
                 const darkIcons = this.querySelectorAll('.rla-theme-icon-dark');
-                sysIcons.forEach(el => ((el as HTMLElement).style.display = next === 'system' ? 'block' : 'none'));
-                lightIcons.forEach(el => ((el as HTMLElement).style.display = next === 'light' ? 'block' : 'none'));
-                darkIcons.forEach(el => ((el as HTMLElement).style.display = next === 'dark' ? 'block' : 'none'));
+                sysIcons.forEach(el => el.classList.toggle('hidden', next !== 'system'));
+                lightIcons.forEach(el => el.classList.toggle('hidden', next !== 'light'));
+                darkIcons.forEach(el => el.classList.toggle('hidden', next !== 'dark'));
 
                 const resolved = next === 'system'
                     ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'

package/src/components/timeline/RLATimeline.astro

@@ -62,7 +62,7 @@ function getSlotName(item: TimelineItem, base: string) {
   {...rest}
 >
   {items && items.length > 0 ? (
-    items.map((item, index) => {
+    items.map(async (item, index) => {
       const state = getItemState(item, index)
       const isLast = index === items.length - 1
 
@@ -72,6 +72,7 @@ function getSlotName(item: TimelineItem, base: string) {
       const itemTitleSlot = getSlotName(item, "title")
       const itemDescriptionSlot = getSlotName(item, "description")
 
+      const hasDefaultSlot = Astro.slots.has("default")
       const hasCustomIndicator = Astro.slots.has(itemIndicatorSlot) || (item.slot && Astro.slots.has("indicator"))
       const hasCustomWrapper = Astro.slots.has(itemWrapperSlot) || (item.slot && Astro.slots.has("wrapper"))
       const hasCustomDate = Astro.slots.has(itemDateSlot) || (item.slot && Astro.slots.has("date"))
@@ -98,9 +99,12 @@ function getSlotName(item: TimelineItem, base: string) {
               ui={{ icon: "text-highlighted group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted", fallback: "text-highlighted group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted" }}
             >
               {hasCustomIndicator ? (
-                <slot name={itemIndicatorSlot}>
-                  <slot name="indicator" />
-                </slot>
+                <Fragment
+                  set:html={await Astro.slots.render(
+                    Astro.slots.has(itemIndicatorSlot) ? itemIndicatorSlot : "indicator",
+                    [item, index]
+                  )}
+                />
               ) : item.icon ? (
                 <RLAIcon name={item.icon} class="text-inherit" />
               ) : null}
@@ -120,9 +124,12 @@ function getSlotName(item: TimelineItem, base: string) {
             class:list={[classes.wrapper, item.ui?.wrapper]}
           >
             {hasCustomWrapper ? (
-              <slot name={itemWrapperSlot}>
-                <slot name="wrapper" />
-              </slot>
+              <Fragment
+                set:html={await Astro.slots.render(
+                  Astro.slots.has(itemWrapperSlot) ? itemWrapperSlot : "wrapper",
+                  [item, index]
+                )}
+              />
             ) : (
               <>
                 {(item.date || hasCustomDate) && (
@@ -130,11 +137,16 @@ function getSlotName(item: TimelineItem, base: string) {
                     data-slot="date"
                     class:list={[classes.date, item.ui?.date]}
                   >
-                    <slot name={itemDateSlot}>
-                      <slot name="date">
-                        {item.date}
-                      </slot>
-                    </slot>
+                    {hasCustomDate ? (
+                      <Fragment
+                        set:html={await Astro.slots.render(
+                          Astro.slots.has(itemDateSlot) ? itemDateSlot : "date",
+                          [item, index]
+                        )}
+                      />
+                    ) : (
+                      item.date
+                    )}
                   </div>
                 )}
 
@@ -143,24 +155,38 @@ function getSlotName(item: TimelineItem, base: string) {
                     data-slot="title"
                     class:list={[classes.title, item.ui?.title]}
                   >
-                    <slot name={itemTitleSlot}>
-                      <slot name="title">
-                        {item.title}
-                      </slot>
-                    </slot>
+                    {hasCustomTitle ? (
+                      <Fragment
+                        set:html={await Astro.slots.render(
+                          Astro.slots.has(itemTitleSlot) ? itemTitleSlot : "title",
+                          [item, index]
+                        )}
+                      />
+                    ) : (
+                      item.title
+                    )}
                   </div>
                 )}
 
-                {(item.description || hasCustomDescription) && (
+                {(item.description || hasCustomDescription || hasDefaultSlot) && (
                   <div
                     data-slot="description"
                     class:list={[classes.description, item.ui?.description]}
                   >
-                    <slot name={itemDescriptionSlot}>
-                      <slot name="description">
-                        {item.description}
-                      </slot>
-                    </slot>
+                    {hasDefaultSlot ? (
+                      <Fragment
+                        set:html={await Astro.slots.render("default", [item, index])}
+                      />
+                    ) : hasCustomDescription ? (
+                      <Fragment
+                        set:html={await Astro.slots.render(
+                          Astro.slots.has(itemDescriptionSlot) ? itemDescriptionSlot : "description",
+                          [item, index]
+                        )}
+                      />
+                    ) : (
+                      item.description
+                    )}
                   </div>
                 )}
               </>

package/src/components/timeline/RLSTimeline.tsx

@@ -6,9 +6,14 @@ import RLSAvatar from "../avatar/RLSAvatar"
 import RLSIcon from "../icon/RLSIcon"
 
 export interface RLSTimelineProps extends TimelineProps {
-  children?: JSX.Element
-  indicator?: (ctx: { item: TimelineItem; index: number }) => JSX.Element
-  wrapper?: (ctx: { item: TimelineItem; index: number }) => JSX.Element
+  children?:
+    | JSX.Element
+    | ((ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element)
+  indicator?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
+  wrapper?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
+  date?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
+  title?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
+  description?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
 }
 
 const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
@@ -26,7 +31,10 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
     "class",
     "children",
     "indicator",
-    "wrapper"
+    "wrapper",
+    "date",
+    "title",
+    "description"
   ])
 
   const items = (): TimelineItem[] => props.items ?? []
@@ -67,6 +75,19 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
     })
   )
 
+  const renderSlot = (
+    slotFn: any,
+    item: TimelineItem,
+    index: number,
+    fallback?: () => JSX.Element
+  ) => {
+    if (typeof slotFn === "function") {
+      const ctx = { ...item, item, index }
+      return slotFn(ctx)
+    }
+    return fallback ? fallback() : null
+  }
+
   return (
     <Dynamic
       component={props.as || "div"}
@@ -107,7 +128,7 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
                     }}
                   >
                     {props.indicator ? (
-                      props.indicator({ item, index: index() })
+                      renderSlot(props.indicator, item, index())
                     ) : item.icon ? (
                       <RLSIcon name={item.icon} class="text-inherit" />
                     ) : null}
@@ -127,31 +148,35 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
                   class={`${resolvedClasses().wrapper}  ${item.ui?.wrapper || ""}`}
                 >
                   {props.wrapper ? (
-                    props.wrapper({ item, index: index() })
+                    renderSlot(props.wrapper, item, index())
                   ) : (
                     <>
-                      {item.date ? (
+                      {item.date || props.date ? (
                         <div
                           data-slot="date"
                           class={`${resolvedClasses().date}  ${item.ui?.date || ""}`}
                         >
-                          {item.date}
+                          {renderSlot(props.date, item, index(), () => item.date)}
                         </div>
                       ) : null}
-                      {item.title ? (
+                      {item.title || props.title ? (
                         <div
                           data-slot="title"
                           class={`${resolvedClasses().title}  ${item.ui?.title || ""}`}
                         >
-                          {item.title}
+                          {renderSlot(props.title, item, index(), () => item.title)}
                         </div>
                       ) : null}
-                      {item.description ? (
+                      {item.description ||
+                      props.description ||
+                      typeof props.children === "function" ? (
                         <div
                           data-slot="description"
                           class={`${resolvedClasses().description}  ${item.ui?.description || ""}`}
                         >
-                          {item.description}
+                          {typeof props.children === "function"
+                            ? renderSlot(props.children, item, index(), () => item.description)
+                            : renderSlot(props.description, item, index(), () => item.description)}
                         </div>
                       ) : null}
                     </>
@@ -161,7 +186,7 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
             )
           }}
         </For>
-      ) : props.children ? (
+      ) : typeof props.children !== "function" ? (
         props.children
       ) : null}
     </Dynamic>

package/src/components/timeline/timeline.ts

@@ -21,6 +21,16 @@ export interface TimelineItem {
   [key: string]: any
 }
 
+export interface TimelineItemProps extends TimelineItem {
+  as?: any
+  isLast?: boolean
+  state?: "active" | "completed"
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
+  orientation?: "horizontal" | "vertical"
+  class?: any
+}
+
 export interface TimelineProps<T extends TimelineItem = TimelineItem> {
   /**
    * The element or component this component should render as.

package/src/components/tooltip/RLATooltip.astro

@@ -12,23 +12,20 @@ const {
 
 const classes = tooltipTheme(Astro.props)
 
-const anchorName = `--rla-tt-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div class={classes.root} data-slot="tooltip-container" data-placement={placement} {...rest}>
   <div
-    class={classes.trigger}
+    class:list={[classes.trigger, "rla-tt-trigger"]}
     data-slot="trigger"
     tabindex="0"
-    style={`anchor-name: ${anchorName}`}
   >
     <slot />
   </div>
 
   <div
-    class={classes.content}
+    class:list={[classes.content, "rla-tt-content"]}
     data-slot="content"
     role="tooltip"
-    style={`position-anchor: ${anchorName}`}
   >
     <slot name="content">
       {content}
@@ -44,15 +41,14 @@ const anchorName = `--rla-tt-${Math.random().toString(36).substring(2, 9)}`
    * fall back to the existing absolute + translate-based placement
    * defined in tooltip.theme.ts. No JavaScript needed in either path.
    */
+  .rla-tt-trigger {
+    anchor-name: --rla-tooltip-anchor;
+  }
+
   @supports (anchor-name: --x) {
     [data-slot="tooltip-container"] [data-slot="content"] {
-      /*
-       * Switch from the theme's translate-based absolute positioning
-       * to anchor-relative positioning so the browser handles overflow
-       * and viewport clipping automatically.
-       */
       position: absolute;
-      position-anchor: inherit; /* resolved from inline style */
+      position-anchor: --rla-tooltip-anchor;
 
       /* Reset theme's translate hacks — anchor() handles the math */
       transform: none !important;