@rimelight/ui 0.0.56 → 0.0.58

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

package/src/components/splitter/RLASplitter.astro

@@ -1,230 +1,217 @@
----
-import type { SplitterProps } from "./splitter"
-import { splitterTheme } from "./splitter.theme"
-
-import RLAIcon from "../icon/RLAIcon.astro"
-
-
-const {
-  direction = "horizontal",
-  defaultSizes = [50, 50],
-  ...rest
-} = Astro.props as SplitterProps
-
-const classes = splitterTheme(Astro.props)
-
-// Normalise sizes so they sum to 100
-const total = defaultSizes.reduce((s, v) => s + v, 0)
-const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
-
-const panelCount = sizes.length
-const id = `splitter-${Math.random().toString(36).substring(2, 9)}`
-
-const panelContents: string[] = []
-await Promise.all(
-  sizes.map(async (_, i) => {
-    if (Astro.slots.has(`panel-${i}`)) {
-      panelContents[i] = await Astro.slots.render(`panel-${i}`)
-    }
-  })
-)
----
-
-<rla-splitter {...rest}>
-  <div
-    class:list={[classes.root, id]}
-    data-slot="root"
-    data-resizable
-    data-direction={direction}
-  >
-    {sizes.map((_size, i) => (
-      <>
-        <div
-          class={classes.panel}
-          data-slot="panel"
-          data-resizable-panel={i}
-        >
-          {Astro.slots.has(`panel-${i}`) ? (
-            <Fragment set:html={panelContents[i]} />
-          ) : (
-            i === 0
-              ? <slot />
-              : <slot name="panel" />
-          )}
-        </div>
-
-        {/* Render a handle between panels, not after the last one */}
-        {i < panelCount - 1 && (
-          <div
-            class={classes.handle}
-            data-slot="handle"
-            data-resizable-handle={i}
-            role="separator"
-            aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
-            tabindex={0}
-            aria-label="Resize panels"
-          >
-            <RLAIcon
-              name={direction === "horizontal" ? "gripVertical" : "gripHorizontal"}
-              class="size-3.5 text-muted/50"
-              aria-hidden="true"
-            />
-          </div>
-        )}
-      </>
-    ))}
-  </div>
-</rla-splitter>
-
-<script>
-  class RLASplitter extends HTMLElement {
-    private splitterCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const container = this.querySelector("[data-resizable]") as HTMLElement | null;
-      if (!container) return;
-
-      const direction = container.dataset["direction"] ?? "horizontal";
-      const isHorizontal = direction === "horizontal";
-
-      const panels = Array.from(
-        container.querySelectorAll("[data-resizable-panel]")
-      ) as HTMLElement[];
-
-      const handles = Array.from(
-        container.querySelectorAll("[data-resizable-handle]")
-      ) as HTMLElement[];
-
-      const cleanupFns: (() => void)[] = [];
-
-      handles.forEach((handle, idx) => {
-        const panelA = panels[idx];
-        const panelB = panels[idx + 1];
-        if (!panelA || !panelB) return;
-
-        const containerSize = () =>
-          isHorizontal
-            ? container.clientWidth
-            : container.clientHeight;
-
-        let isDragging = false;
-        let startPos = 0;
-        let startASize = 0;
-        let startBSize = 0;
-
-        const getSize = (el: HTMLElement) =>
-          isHorizontal ? el.offsetWidth : el.offsetHeight;
-
-        const setSize = (el: HTMLElement, px: number) => {
-          const pct = (px / containerSize()) * 100;
-          if (isHorizontal) {
-            el.style.width = `${pct}%`;
-          } else {
-            el.style.height = `${pct}%`;
-          }
-        };
-
-        const onMouseMove = (e: MouseEvent) => {
-          if (!isDragging) return;
-          const delta = isHorizontal
-            ? e.clientX - startPos
-            : e.clientY - startPos;
-
-          const newASize = Math.max(48, startASize + delta);
-          const newBSize = Math.max(48, startBSize - delta);
-
-          // Only resize if both panels have enough space
-          if (startASize + startBSize - newASize < 48) return;
-
-          setSize(panelA, newASize);
-          setSize(panelB, newBSize);
-        };
-
-        const onMouseUp = () => {
-          isDragging = false;
-          document.body.style.cursor = "";
-          document.body.style.userSelect = "";
-          handle.classList.remove("bg-primary/30");
-          panels.forEach(p => p.style.transition = "");
-          document.removeEventListener("mousemove", onMouseMove);
-          document.removeEventListener("mouseup", onMouseUp);
-        };
-
-        const onMouseDown = (e: MouseEvent) => {
-          e.preventDefault();
-          isDragging = true;
-          startPos = isHorizontal ? e.clientX : e.clientY;
-          startASize = getSize(panelA);
-          startBSize = getSize(panelB);
-          document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
-          document.body.style.userSelect = "none";
-          handle.classList.add("bg-primary/30");
-          panels.forEach(p => p.style.transition = "none");
-          document.addEventListener("mousemove", onMouseMove);
-          document.addEventListener("mouseup", onMouseUp);
-        };
-
-        handle.addEventListener("mousedown", onMouseDown);
-        cleanupFns.push(() => {
-          handle.removeEventListener("mousedown", onMouseDown);
-          document.removeEventListener("mousemove", onMouseMove);
-          document.removeEventListener("mouseup", onMouseUp);
-        });
-
-        // Keyboard resize: arrow keys shift by 2%
-        const onKeyDown = (e: KeyboardEvent) => {
-          const step = containerSize() * 0.02;
-          const forward = isHorizontal
-            ? e.key === "ArrowRight"
-            : e.key === "ArrowDown";
-          const backward = isHorizontal
-            ? e.key === "ArrowLeft"
-            : e.key === "ArrowUp";
-
-          if (!forward && !backward) return;
-          e.preventDefault();
-
-          const aSize = getSize(panelA);
-          const bSize = getSize(panelB);
-          const delta = forward ? step : -step;
-
-          setSize(panelA, Math.max(48, aSize + delta));
-          setSize(panelB, Math.max(48, bSize - delta));
-        };
-
-        handle.addEventListener("keydown", onKeyDown);
-        cleanupFns.push(() => {
-          handle.removeEventListener("keydown", onKeyDown);
-        });
-      });
-
-      this.splitterCleanup = () => {
-        cleanupFns.forEach(fn => fn());
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.splitterCleanup) {
-        this.splitterCleanup();
-        this.splitterCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-splitter')) {
-    customElements.define('rla-splitter', RLASplitter);
-  }
-</script>
-
-<style is:inline set:html={`
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="0"] { width: ${sizes[0] ?? 50}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="1"] { width: ${sizes[1] ?? 50}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="2"] { width: ${sizes[2] ?? 0}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="3"] { width: ${sizes[3] ?? 0}%; }
-
-  .${id}[data-direction="vertical"] > [data-resizable-panel="0"] { height: ${sizes[0] ?? 50}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="1"] { height: ${sizes[1] ?? 50}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="2"] { height: ${sizes[2] ?? 0}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="3"] { height: ${sizes[3] ?? 0}%; }
-`} />
+---
+import type { SplitterProps } from "./splitter"
+import { splitterTheme } from "./splitter.theme"
+
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  direction = "horizontal",
+  defaultSizes = [50, 50],
+  ...rest
+} = Astro.props as SplitterProps
+
+const classes = splitterTheme(Astro.props)
+
+// Normalise sizes so they sum to 100
+const total = defaultSizes.reduce((s, v) => s + v, 0)
+const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
+
+const panelCount = sizes.length
+
+const panelContents: string[] = []
+await Promise.all(
+  sizes.map(async (_, i) => {
+    if (Astro.slots.has(`panel-${i}`)) {
+      panelContents[i] = await Astro.slots.render(`panel-${i}`)
+    }
+  })
+)
+---
+
+<rla-splitter {...rest}>
+  <div
+    class:list={[classes.root]}
+    data-slot="root"
+    data-resizable
+    data-direction={direction}
+  >
+    {sizes.map((_size, i) => (
+      <>
+        <div
+          class:list={[classes.panel, direction === "horizontal" ? `w-[${sizes[i]}%]` : `h-[${sizes[i]}%]`]}
+          data-slot="panel"
+          data-resizable-panel={i}
+        >
+          {Astro.slots.has(`panel-${i}`) ? (
+            <Fragment set:html={panelContents[i]} />
+          ) : (
+            i === 0
+              ? <slot />
+              : <slot name="panel" />
+          )}
+        </div>
+
+        {/* Render a handle between panels, not after the last one */}
+        {i < panelCount - 1 && (
+          <div
+            class={classes.handle}
+            data-slot="handle"
+            data-resizable-handle={i}
+            role="separator"
+            aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+            tabindex={0}
+            aria-label="Resize panels"
+          >
+            <RLAIcon
+              name={direction === "horizontal" ? "gripVertical" : "gripHorizontal"}
+              class="size-3.5 text-muted/50"
+              aria-hidden="true"
+            />
+          </div>
+        )}
+      </>
+    ))}
+  </div>
+</rla-splitter>
+
+<script>
+  class RLASplitter extends HTMLElement {
+    private splitterCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const container = this.querySelector("[data-resizable]") as HTMLElement | null;
+      if (!container) return;
+
+      const direction = container.dataset["direction"] ?? "horizontal";
+      const isHorizontal = direction === "horizontal";
+
+      const panels = Array.from(
+        container.querySelectorAll("[data-resizable-panel]")
+      ) as HTMLElement[];
+
+      const handles = Array.from(
+        container.querySelectorAll("[data-resizable-handle]")
+      ) as HTMLElement[];
+
+      const cleanupFns: (() => void)[] = [];
+
+      handles.forEach((handle, idx) => {
+        const panelA = panels[idx];
+        const panelB = panels[idx + 1];
+        if (!panelA || !panelB) return;
+
+        const containerSize = () =>
+          isHorizontal
+            ? container.clientWidth
+            : container.clientHeight;
+
+        let isDragging = false;
+        let startPos = 0;
+        let startASize = 0;
+        let startBSize = 0;
+
+        const getSize = (el: HTMLElement) =>
+          isHorizontal ? el.offsetWidth : el.offsetHeight;
+
+        const setSize = (el: HTMLElement, px: number) => {
+          const pct = (px / containerSize()) * 100;
+          if (isHorizontal) {
+            el.style.width = `${pct}%`;
+          } else {
+            el.style.height = `${pct}%`;
+          }
+        };
+
+        const onMouseMove = (e: MouseEvent) => {
+          if (!isDragging) return;
+          const delta = isHorizontal
+            ? e.clientX - startPos
+            : e.clientY - startPos;
+
+          const newASize = Math.max(48, startASize + delta);
+          const newBSize = Math.max(48, startBSize - delta);
+
+          // Only resize if both panels have enough space
+          if (startASize + startBSize - newASize < 48) return;
+
+          setSize(panelA, newASize);
+          setSize(panelB, newBSize);
+        };
+
+        const onMouseUp = () => {
+          isDragging = false;
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+          handle.classList.remove("bg-primary/30");
+          panels.forEach(p => p.style.transition = "");
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+          e.preventDefault();
+          isDragging = true;
+          startPos = isHorizontal ? e.clientX : e.clientY;
+          startASize = getSize(panelA);
+          startBSize = getSize(panelB);
+          document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+          document.body.style.userSelect = "none";
+          handle.classList.add("bg-primary/30");
+          panels.forEach(p => p.style.transition = "none");
+          document.addEventListener("mousemove", onMouseMove);
+          document.addEventListener("mouseup", onMouseUp);
+        };
+
+        handle.addEventListener("mousedown", onMouseDown);
+        cleanupFns.push(() => {
+          handle.removeEventListener("mousedown", onMouseDown);
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        });
+
+        // Keyboard resize: arrow keys shift by 2%
+        const onKeyDown = (e: KeyboardEvent) => {
+          const step = containerSize() * 0.02;
+          const forward = isHorizontal
+            ? e.key === "ArrowRight"
+            : e.key === "ArrowDown";
+          const backward = isHorizontal
+            ? e.key === "ArrowLeft"
+            : e.key === "ArrowUp";
+
+          if (!forward && !backward) return;
+          e.preventDefault();
+
+          const aSize = getSize(panelA);
+          const bSize = getSize(panelB);
+          const delta = forward ? step : -step;
+
+          setSize(panelA, Math.max(48, aSize + delta));
+          setSize(panelB, Math.max(48, bSize - delta));
+        };
+
+        handle.addEventListener("keydown", onKeyDown);
+        cleanupFns.push(() => {
+          handle.removeEventListener("keydown", onKeyDown);
+        });
+      });
+
+      this.splitterCleanup = () => {
+        cleanupFns.forEach(fn => fn());
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.splitterCleanup) {
+        this.splitterCleanup();
+        this.splitterCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-splitter')) {
+    customElements.define('rla-splitter', RLASplitter);
+  }
+</script>