@rimelight/ui 0.0.38 → 0.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -54,11 +54,11 @@
     "@astrojs/solid-js": "7.0.1",
     "@astrojs/ts-plugin": "1.10.10",
     "@astrojs/vue": "7.0.1",
-    "astro": "7.1.0",
+    "astro": "7.1.3",
     "solid-js": "1.9.14",
     "typescript": "6.0.3",
     "unocss": "66.7.5",
-    "vue": "3.5.39"
+    "vue": "3.5.40"
   },
   "peerDependencies": {
     "@astrojs/solid-js": ">=7.0.1",

package/src/components/button/RLAButton.astro

@@ -28,6 +28,7 @@ const {
   square = false,
   rounded = false,
   block = false,
+  justify = "center",
   active = false,
   theme,
   activeColor,
@@ -60,6 +61,7 @@ const classes = resolveClasses(button, {
   color: (active && activeColor ? activeColor : color) as "neutral",
   size,
   block,
+  justify,
   square: square || (!label && !Astro.slots.has("default")),
   rounded,
   leading: isLeading,

package/src/components/button/button.theme.ts

@@ -11,7 +11,7 @@ export const createButtonTheme = (colors: readonly string[] = colorConfig.colors
     slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
     base: {
       root: [
-        "group inline-flex items-center justify-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
+        "group inline-flex items-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
         "transition-colors outline-none",
         "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
       ],
@@ -63,8 +63,16 @@ export const createButtonTheme = (colors: readonly string[] = colorConfig.colors
           trailingIcon: "size-7"
         }
       },
+      justify: {
+        start: { root: "justify-start" },
+        center: { root: "justify-center" },
+        end: { root: "justify-end" },
+        between: { root: "justify-between" },
+        around: { root: "justify-around" },
+        evenly: { root: "justify-evenly" }
+      },
       block: {
-        true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
+        true: { root: "w-full", trailingIcon: "ms-auto" }
       },
       square: {
         true: {},
@@ -218,7 +226,8 @@ export const createButtonTheme = (colors: readonly string[] = colorConfig.colors
     defaultVariants: {
       variant: "solid",
       color: "primary",
-      size: "md"
+      size: "md",
+      justify: "center"
     }
   })
 }

package/src/components/button/button.ts

@@ -46,6 +46,10 @@ export interface ButtonProps extends LinkProps {
    * Makes the button stretch to full width
    */
   block?: boolean
+  /**
+   * Horizontal alignment of content inside the button flex container
+   */
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly"
   /**
    * Applies active state styling
    */

package/src/components/icon/icon.theme.ts

@@ -4,7 +4,14 @@ export const createIconTheme = () =>
   defineTheme({
     slots: ["root"],
     base: {
-      root: ["inline-block", "align-middle"]
+      root: [
+        "shrink-0",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "align-middle",
+        "leading-none"
+      ]
     },
     variants: {
       size: {

package/src/components/image/RLAImage.astro

@@ -1,8 +1,6 @@
 ---
-import { getImage } from "astro:assets"
+import { Image, Picture, getImage } from "astro:assets"
 import type { ImageMetadata } from "astro"
-import Image from "astro/components/Image.astro"
-import Picture from "astro/components/Picture.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 import { scv } from "css-variants"
 import { useUi } from "../../utils/useUi"

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

@@ -42,6 +42,7 @@ const classes = resolveClasses(pageSection, {
 }, useUi("pageSection", uiProp), className);
 
 const hasDefaultSlot = Astro.slots.has("default");
+const hasContentSlot = Astro.slots.has("content");
 
 const Tag = as;
 const TitleTag = variant === "hero" ? "h1" : "h2";
@@ -152,7 +153,14 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
     ) : orientation === "horizontal" ? (
       <div class="hidden lg:block" />
     ) : null}
+
+    {hasContentSlot && (
+      <div class="col-span-full w-full">
+        <slot name="content" />
+      </div>
+    )}
   </div>
 
   <slot name="bottom" />
 </Tag>
+

package/src/components/post/RLAPost.astro

@@ -1,72 +1,72 @@
----
-import { scv } from "css-variants"
+---
+import { scv } from "css-variants"
 import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PostProps } from "./post"
-import postTheme from "./post.theme"
-import type { ImageMetadata } from "astro"
-import Image from "astro/components/Image.astro"
-import RLABadge from "../badge/RLABadge.astro"
-
-
-const post = scv(postTheme)
-
-const {
-  title,
-  description,
-  date,
-  image,
-  to,
-  badge,
-  badgeColor = "primary",
-  variant = "soft",
-  orientation = "vertical",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PostProps
-
-const classes = resolveClasses(post, { variant, orientation }, useUi("post", uiProp), className);
-
-const Tag = to ? "a" : "div";
-const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() : date) : null;
----
-<Tag class={classes.root} data-slot="root" {...(to ? { href: to } : {})} {...rest}>
-  <slot name="image" {...{ ui: classes }}>
-    {image && (
-      <div class={classes.imageWrapper} data-slot="image-wrapper">
-        {typeof image === 'string' ? (
-           <img src={image} alt={title} class={classes.image} data-slot="image" />
-        ) : (
-           <Image src={image as ImageMetadata} alt={title || ""} class={classes.image} data-slot="image" />
-        )}
-      </div>
-    )}
-  </slot>
-
-  <div class={classes.content} data-slot="content">
-    <slot name="title" {...{ ui: classes }}>
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-    </slot>
-
-    <slot name="description" {...{ ui: classes }}>
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-    </slot>
-
-    <slot name="badge" {...{ ui: classes }}>
-      {badge && <RLABadge color={badgeColor as any} size="sm" shape="pill" class={classes.badge} data-slot="badge">{badge}</RLABadge>}
-    </slot>
-
-    <slot name="date" {...{ ui: classes }}>
-      {formattedDate && <time class={classes.date} data-slot="date">{formattedDate}</time>}
-    </slot>
-
-    <slot />
-  </div>
-
-  {Astro.slots.has("footer") && (
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" {...{ ui: classes }} />
-    </div>
-  )}
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { PostProps } from "./post"
+import postTheme from "./post.theme"
+import { Image } from "astro:assets"
+import type { ImageMetadata } from "astro"
+import RLABadge from "../badge/RLABadge.astro"
+
+
+const post = scv(postTheme)
+
+const {
+  title,
+  description,
+  date,
+  image,
+  to,
+  badge,
+  badgeColor = "primary",
+  variant = "soft",
+  orientation = "vertical",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PostProps
+
+const classes = resolveClasses(post, { variant, orientation }, useUi("post", uiProp), className);
+
+const Tag = to ? "a" : "div";
+const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() : date) : null;
+---
+<Tag class={classes.root} data-slot="root" {...(to ? { href: to } : {})} {...rest}>
+  <slot name="image" {...{ ui: classes }}>
+    {image && (
+      <div class={classes.imageWrapper} data-slot="image-wrapper">
+        {typeof image === 'string' ? (
+           <img src={image} alt={title} class={classes.image} data-slot="image" />
+        ) : (
+           <Image src={image as ImageMetadata} alt={title || ""} class={classes.image} data-slot="image" />
+        )}
+      </div>
+    )}
+  </slot>
+
+  <div class={classes.content} data-slot="content">
+    <slot name="title" {...{ ui: classes }}>
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+    </slot>
+
+    <slot name="description" {...{ ui: classes }}>
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+    </slot>
+
+    <slot name="badge" {...{ ui: classes }}>
+      {badge && <RLABadge color={badgeColor as any} size="sm" shape="pill" class={classes.badge} data-slot="badge">{badge}</RLABadge>}
+    </slot>
+
+    <slot name="date" {...{ ui: classes }}>
+      {formattedDate && <time class={classes.date} data-slot="date">{formattedDate}</time>}
+    </slot>
+
+    <slot />
+  </div>
+
+  {Astro.slots.has("footer") && (
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" {...{ ui: classes }} />
+    </div>
+  )}
 </Tag>

package/src/components/tabs/RLATabs.astro

@@ -2,71 +2,96 @@
 import { scv } from "css-variants"
 import { useUi } from "../../utils/useUi"
 import { resolveClasses } from "../../utils/resolveClasses"
-import type { TabsProps } from "./tabs"
+import type { TabsProps, TabItem } from "./tabs"
 import tabsTheme from "./tabs.theme"
-
+import RLABadge from "../badge/RLABadge.astro"
 
 const tabs = scv(tabsTheme)
 
 const {
   items = [],
   value = "",
-  variant = "solid",
+  defaultValue = "",
+  variant = "pill",
   orientation = "horizontal",
   size = "md",
   color = "primary",
+  content = true,
+  unmountOnHide = true,
+  valueKey = "value",
+  labelKey = "label",
   ui: uiProp,
   class: className,
   ...rest
 } = Astro.props as TabsProps
 
+// Normalize variant names for backward compatibility (solid -> pill, pills -> pill, underline -> underline, link -> underline)
+const normalizedVariant = (variant === "solid" || variant === "pills") ? "pill" : (variant === "link" ? "underline" : variant);
+
 const classes = resolveClasses(tabs, {
-  variant,
+  variant: normalizedVariant,
   orientation,
   size
 }, useUi("tabs", uiProp), className);
 
-const initialValue = value || (items.length > 0 ? items[0]?.value : "")
+const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valueKey] ?? items[0].value ?? "0") : "")
 ---
-<rla-tabs {...rest}>
+<rla-tabs {...rest} data-orientation={orientation} data-variant={normalizedVariant}>
   <div class={classes.root} data-slot="root" data-tabs-container data-value={initialValue}>
     <div class={classes.list} data-slot="list" role="tablist">
-      {items.map((item) => {
-        const active = item.value === initialValue
+      <div class={classes.indicator} data-slot="indicator" style="display: none;"></div>
+      {items.map((item, index) => {
+        const itemVal = item[valueKey] ?? item.value ?? String(index)
+        const itemLabel = item[labelKey] ?? item.label
+        const active = itemVal === initialValue
         return (
           <button
             type="button"
             class={classes.trigger}
             data-slot="trigger"
             role="tab"
-            data-value={item.value}
+            data-value={itemVal}
             data-state={active ? "active" : "inactive"}
             disabled={item.disabled}
           >
-            {item.icon && <span class={item.icon + " mr-2"} />}
-            {item.label}
+            {item.icon && <span class={item.icon + " " + classes.leadingIcon} data-slot="leadingIcon" />}
+            {itemLabel && <span class={classes.label} data-slot="label">{itemLabel}</span>}
+            {item.badge !== undefined && item.badge !== null && (
+              <RLABadge
+                size="sm"
+                variant="subtle"
+                color="neutral"
+                class={classes.trailingBadge}
+                data-slot="trailingBadge"
+              >
+                {typeof item.badge === "object" ? item.badge.label : item.badge}
+              </RLABadge>
+            )}
           </button>
         )
       })}
     </div>
-    <div class="flex-1">
-      <slot>
-        {items.map(item => {
-          const active = item.value === initialValue
-          return (
-            <div
-              class={classes.content}
-              data-slot="content"
-              role="tabpanel"
-              data-value={item.value}
-              hidden={active ? undefined : "until-found"}
-            >
-              {item.content}
-            </div>
-          )
-        })}
-      </slot>
-    </div>
+    {content && (
+      <div class="flex-1">
+        <slot>
+          {items.map((item, index) => {
+            const itemVal = item[valueKey] ?? item.value ?? String(index)
+            const active = itemVal === initialValue
+            return (
+              <div
+                class={classes.content}
+                data-slot="content"
+                role="tabpanel"
+                data-value={itemVal}
+                hidden={active ? undefined : "until-found"}
+              >
+                {item.content}
+              </div>
+            )
+          })}
+        </slot>
+      </div>
+    )}
   </div>
 </rla-tabs>
 
@@ -74,19 +99,59 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
   if (typeof HTMLElement !== 'undefined') {
     class RLATabs extends HTMLElement {
       private tabsCleanup: (() => void) | null = null;
+      private resizeObserver: ResizeObserver | null = null;
 
       connectedCallback() {
         this.style.display = 'contents';
         const container = this.querySelector("[data-tabs-container]") as HTMLElement | null;
         if (!container) return;
 
+        const list = container.querySelector("[data-slot=list]") as HTMLElement | null;
+        const indicator = container.querySelector("[data-slot=indicator]") as HTMLElement | null;
+        const orientation = this.dataset.orientation || "horizontal";
+        const isVertical = orientation === "vertical";
+
+        const updateIndicator = (activeTrigger: HTMLElement | null) => {
+          if (!indicator || !list || !activeTrigger) {
+            if (indicator) indicator.style.display = 'none';
+            return;
+          }
+
+          const listRect = list.getBoundingClientRect();
+          const triggerRect = activeTrigger.getBoundingClientRect();
+
+          if (triggerRect.width === 0 && triggerRect.height === 0) {
+            indicator.style.display = 'none';
+            return;
+          }
+
+          indicator.style.display = 'block';
+
+          if (isVertical) {
+            const top = triggerRect.top - listRect.top + list.scrollTop;
+            const height = triggerRect.height;
+            indicator.style.transform = `translateY(${top}px)`;
+            indicator.style.height = `${height}px`;
+          } else {
+            const left = triggerRect.left - listRect.left + list.scrollLeft;
+            const width = triggerRect.width;
+            indicator.style.transform = `translateX(${left}px)`;
+            indicator.style.width = `${width}px`;
+          }
+        };
+
         const containerValue = container.dataset.value;
         const triggers = container.querySelectorAll("[role=tab]");
         const panels = container.querySelectorAll("[role=tabpanel]");
 
+        let activeTrigger: HTMLElement | null = null;
+
         triggers.forEach(trigger => {
-          const val = (trigger as HTMLButtonElement).dataset.value;
-          trigger.setAttribute("data-state", val === containerValue ? "active" : "inactive");
+          const el = trigger as HTMLElement;
+          const val = el.dataset.value;
+          const isActive = val === containerValue;
+          el.setAttribute("data-state", isActive ? "active" : "inactive");
+          if (isActive) activeTrigger = el;
         });
 
         panels.forEach(panel => {
@@ -98,6 +163,17 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
           }
         });
 
+        // Initialize indicator position
+        requestAnimationFrame(() => updateIndicator(activeTrigger));
+
+        if (window.ResizeObserver && list) {
+          this.resizeObserver = new ResizeObserver(() => {
+            const currentActive = list.querySelector("[role=tab][data-state=active]") as HTMLElement | null;
+            updateIndicator(currentActive);
+          });
+          this.resizeObserver.observe(list);
+        }
+
         const clickCleanups: (() => void)[] = [];
         const beforeMatchCleanups: (() => void)[] = [];
 
@@ -117,11 +193,14 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
         triggers.forEach(triggerNode => {
           const trigger = triggerNode as HTMLButtonElement;
           const onClick = () => {
+            if (trigger.disabled) return;
             const targetValue = trigger.dataset.value;
 
             triggers.forEach(tNode => {
               const t = tNode as HTMLButtonElement;
-              t.setAttribute("data-state", t.dataset.value === targetValue ? "active" : "inactive");
+              const isTarget = t.dataset.value === targetValue;
+              t.setAttribute("data-state", isTarget ? "active" : "inactive");
+              if (isTarget) updateIndicator(t);
             });
 
             panels.forEach(panel => {
@@ -139,6 +218,10 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
         this.tabsCleanup = () => {
           clickCleanups.forEach(fn => fn());
           beforeMatchCleanups.forEach(fn => fn());
+          if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+          }
         };
       }
 
@@ -155,3 +238,4 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
     }
   }
 </script>
+

package/src/components/tabs/tabs.theme.ts

@@ -2,48 +2,86 @@ import { defineTheme } from "../../utils/defineTheme"
 
 export const createTabsTheme = () =>
   defineTheme({
-    slots: ["root", "list", "trigger", "content"],
+    slots: [
+      "root",
+      "list",
+      "indicator",
+      "trigger",
+      "leadingIcon",
+      "leadingAvatar",
+      "label",
+      "trailingBadge",
+      "content"
+    ],
     base: {
-      root: "w-full flex flex-col gap-4",
-      list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
+      root: "flex gap-2 w-full",
+      list: "relative flex p-1 group items-center min-w-0",
+      indicator:
+        "absolute transition-[translate,width,height,top,left] duration-200 ease-out pointer-events-none",
       trigger:
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
-      content:
-        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        "group relative inline-flex items-center justify-center min-w-0 whitespace-nowrap font-medium transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-none data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground",
+      leadingIcon: "shrink-0",
+      leadingAvatar: "shrink-0",
+      label: "truncate",
+      trailingBadge: "shrink-0",
+      content: "w-full focus-visible:outline-none"
     },
     variants: {
       variant: {
-        solid: {
-          list: "bg-muted p-1 rounded-lg",
-          trigger:
-            "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+        pill: {
+          list: "bg-muted/60 dark:bg-muted/40 rounded-lg p-1",
+          trigger: "grow rounded-md data-[state=active]:text-foreground z-10",
+          indicator: "bg-background rounded-md shadow-xs top-1 bottom-1 h-[calc(100%-8px)]"
         },
         underline: {
-          list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
-          trigger:
-            "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
+          list: "bg-transparent border-b border-border p-0 gap-2 -mb-px",
+          trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
+          indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
         },
-        pills: {
-          list: "bg-transparent p-0 gap-2",
-          trigger:
-            "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
+        link: {
+          list: "bg-transparent border-b border-border p-0 gap-2 -mb-px",
+          trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
+          indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
         }
       },
       orientation: {
-        horizontal: { root: "flex-col", list: "w-full" },
+        horizontal: {
+          root: "flex-col",
+          list: "w-full",
+          indicator: "",
+          trigger: "justify-center"
+        },
         vertical: {
           root: "flex-row gap-6",
-          list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent"
+          list: "flex-col items-stretch w-48 border-r border-border p-0",
+          trigger: "justify-start text-left"
         }
       },
       size: {
-        sm: { trigger: "text-xs px-2.5 py-1" },
-        md: { trigger: "text-sm px-3.5 py-1.5" },
-        lg: { trigger: "text-base px-4.5 py-2" }
+        xs: {
+          trigger: "px-2 py-1 text-xs gap-1",
+          leadingIcon: "size-3.5"
+        },
+        sm: {
+          trigger: "px-2.5 py-1.5 text-xs gap-1.5",
+          leadingIcon: "size-4"
+        },
+        md: {
+          trigger: "px-3 py-1.5 text-sm gap-1.5",
+          leadingIcon: "size-4"
+        },
+        lg: {
+          trigger: "px-3.5 py-2 text-sm gap-2",
+          leadingIcon: "size-5"
+        },
+        xl: {
+          trigger: "px-4 py-2.5 text-base gap-2",
+          leadingIcon: "size-5"
+        }
       }
     },
     defaultVariants: {
-      variant: "solid",
+      variant: "pill",
       orientation: "horizontal",
       size: "md"
     }