@rimelight/ui 0.0.34 → 0.0.36

package/README.md

@@ -8,6 +8,7 @@
 [![NPM Version](https://img.shields.io/npm/v/@rimelight/ui?style=for-the-badge&logo=npm&logoColor=white&color=A682FF)](https://www.npmjs.com/package/@rimelight/ui)  
 [![NPM Downloads](https://img.shields.io/npm/dt/@rimelight/ui?style=for-the-badge&color=A682FF&logo=npm&logoColor=white)](https://www.npmjs.com/package/@rimelight/ui)  
 [![View on npmx](https://img.shields.io/badge/VIEW%20ON%20NPMX-A682FF?style=for-the-badge&logo=npm&logoColor=white)](https://npmx.dev/package/@rimelight/ui)  
+[![pkg.pr.new](https://pkg.pr.new/badge/Rimelight-Entertainment/rimelight)](https://pkg.pr.new/~/Rimelight-Entertainment/rimelight)  
 
 Rimelight UI is a comprehensive component library for [Astro](https://astro.build) websites used and maintained by [Rimelight Entertainment](https://rimelight.com).
 It offers a suite of accessible and highly performant components as [Astro Components](https://docs.astro.build/basics/astro-components/) and [Vue Components](https://vuejs.org), and is available as a free and open source project for any to use.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -42,6 +42,8 @@
     "./utils/*": "./src/utils/*",
     "./integrations": "./src/integrations/index.ts",
     "./integrations/*": "./src/integrations/*",
+    "./docs": "./src/docs/extractAll.ts",
+    "./docs/*": "./src/docs/*",
     "./plugins": "./src/plugins/index.ts",
     "./plugins/*": "./src/plugins/*",
     "./middleware": "./src/middleware/index.ts",
@@ -56,50 +58,43 @@
     "access": "public"
   },
   "scripts": {
-    "prepare": "vp config",
-    "knip": "knip",
     "astro": "astro",
     "docs:meta": "tsx scripts/extract-meta.ts"
   },
   "dependencies": {
-    "@astrojs/prism": "^4.0.2",
-    "@astrojs/vue": "7.0.0-alpha.0",
-    "@iconify-json/lucide": "^1.2.109",
-    "@unocss/astro": "^66.7.0",
+    "@astrojs/vue": "6.0.1",
+    "@iconify-json/lucide": "1.2.113",
+    "@unocss/astro": "^66.7.2",
     "css-variants": "2.3.5",
     "defu": "6.1.7",
     "embla-carousel": "8.6.0",
     "nanostores": "1.3.0",
     "picomatch": "^4.0.4",
-    "prismjs": "^1.29.0",
-    "turndown": "^7.2.4",
-    "turndown-plugin-gfm": "^1.0.2",
-    "vite-plugin-virtual": "^0.5.0"
+    "vite-plugin-virtual": "^0.5.0",
+    "vue": "3.5.38"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.9",
     "@astrojs/ts-plugin": "1.10.9",
-    "@e18e/eslint-plugin": "0.5.0",
-    "@types/node": "25.9.1",
+    "@e18e/eslint-plugin": "0.5.1",
+    "@types/node": "25.9.3",
     "@types/picomatch": "^4.0.3",
-    "@unocss/eslint-plugin": "66.7.0",
-    "astro": "7.0.0-alpha.0",
+    "@unocss/eslint-plugin": "66.7.2",
+    "astro": "6.4.8",
     "eslint-plugin-regexp": "3.1.0",
-    "knip": "6.14.2",
-    "tsx": "4.22.3",
+    "tsx": "4.22.4",
     "typescript": "6.0.3",
-    "unocss": "66.7.0",
-    "vite-plus": "catalog:"
+    "unocss": "66.7.2",
+    "vite-plus": "0.2.1"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.5.0",
-    "astro": ">=6.0.0",
-    "vue": ">=3.4.0"
+    "@rimelight/i18n": "workspace:^0.0.1",
+    "astro": ">=6.0.0"
   },
   "peerDependenciesMeta": {
-    "vue": {
+    "@rimelight/i18n": {
       "optional": true
     }
   },
-  "packageManager": "pnpm@11.3.0"
+  "packageManager": "pnpm@11.8.0"
 }

package/src/components/astro/RLAAccordion.astro

@@ -1,18 +1,94 @@
----
-import type { AccordionProps } from "../../types";
-
-const { summary, class: className, ...attrs } = Astro.props as AccordionProps;
----
-
-<details class:list={['group', className]} {...attrs}>
-    <summary
-            class="accordion code flex cursor-pointer list-none items-center justify-between text-astro-gray-200"
-    >
-        <span>{summary}</span>
-        <span class="i-lucide-chevron s-4 rotate-0 transition-transform duration-300 ease-in-out group-open:-rotate-180" />
-    </summary>
-
-    <div class="pt-4">
-        <slot />
-    </div>
-</details>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AccordionProps } from "../../types"
+import accordionThemeDefault, { createAccordionTheme } from "../../themes/accordion.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const accordionTheme = uiConfig.colors ? createAccordionTheme() : accordionThemeDefault
+const accordion = scv(accordionTheme)
+
+const {
+  items,
+  summary,
+  multiple = false,
+  trailingIcon = "i-lucide-chevron-down",
+  disabled = false,
+  name,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AccordionProps
+
+const classes = resolveClasses(accordion, {
+  disabled
+}, useUi("accordion", uiProp), className)
+
+// Generate a unique name for HTML details grouping if single-open mode (multiple=false) is active
+const groupName = name || (!multiple ? `accordion-${Math.random().toString(36).substring(2, 9)}` : undefined)
+---
+
+{items ? (
+  <div class={classes.root} data-slot="root" {...rest}>
+    {items.map((item) => {
+      const itemDisabled = disabled || item.disabled
+      const itemTrailingIcon = item.trailingIcon || trailingIcon
+      
+      return (
+        <details 
+          class={classes.item} 
+          data-slot="item" 
+          name={groupName}
+        >
+          <summary 
+            class={cx(classes.trigger, itemDisabled && "pointer-events-none opacity-50 select-none")} 
+            data-slot="trigger"
+          >
+            {item.icon && (
+              <span class={classes.leadingIcon} data-slot="leading-icon">
+                <span class={cx(item.icon)} aria-hidden="true" />
+              </span>
+            )}
+            
+            <span class={classes.label} data-slot="label">
+              {item.label}
+            </span>
+
+            {itemTrailingIcon && (
+              <span class={classes.trailingIcon} data-slot="trailing-icon">
+                <span class={cx(itemTrailingIcon)} aria-hidden="true" />
+              </span>
+            )}
+          </summary>
+
+          <div class={classes.content} data-slot="content">
+            <div class={classes.body} data-slot="body">
+              {item.content}
+            </div>
+          </div>
+        </details>
+      )
+    })}
+  </div>
+) : (
+  <details class:list={[classes.root, classes.item]} data-slot="root" name={name} {...rest}>
+    <summary 
+      class={cx(classes.trigger, disabled && "pointer-events-none opacity-50 select-none")} 
+      data-slot="trigger"
+    >
+      <span class={classes.label} data-slot="label">{summary}</span>
+      {trailingIcon && (
+        <span class={classes.trailingIcon} data-slot="trailing-icon">
+          <span class={cx(trailingIcon)} aria-hidden="true" />
+        </span>
+      )}
+    </summary>
+
+    <div class={classes.content} data-slot="content">
+      <div class={classes.body} data-slot="body">
+        <slot />
+      </div>
+    </div>
+  </details>
+)}

package/src/components/astro/RLAAvatar.astro

@@ -1,68 +1,135 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AvatarProps } from "../../types"
-import avatarThemeDefault, { createAvatarTheme } from "../../themes/avatar.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const avatarTheme = uiConfig.colors ? createAvatarTheme(uiConfig.colors) : avatarThemeDefault
-
-const avatar = scv(avatarTheme)
-
-const {
-  src,
-  alt = "",
-  fallback,
-  size = "md",
-  badge = false,
-  badgeColor = "success",
-  badgePosition = "bottom-right",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarProps
-
-const classes = resolveClasses(avatar, {
-  size,
-  color: Astro.props.color || "neutral",
-  badgePosition,
-  hasBadge: !!badge
-}, useUi("avatar", uiProp), className)
----
-<span
-  class={classes.root}
-  data-slot="root"
-  {...rest}
->
-  <slot>
-    {src ? (
-      <img
-        src={src}
-        alt={alt}
-        class={classes.image}
-        data-slot="image"
-      />
-    ) : (
-      <span class={classes.fallback} data-slot="fallback">
-        <slot name="fallback">
-          {fallback}
-        </slot>
-        {!fallback && !Astro.slots.has("fallback") && (
-          <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
-        )}
-      </span>
-    )}
-  </slot>
-
-  <slot name="badge">
-    {badge && (
-      <span
-        class={cx(classes.badge, badgeColor && (badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
-        data-slot="badge"
-      >
-        {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
-      </span>
-    )}
-  </slot>
-</span>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AvatarProps } from "../../types"
+import avatarThemeDefault, { createAvatarTheme } from "../../themes/avatar.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const avatarTheme = uiConfig.colors ? createAvatarTheme(uiConfig.colors) : avatarThemeDefault
+
+const avatar = scv(avatarTheme)
+
+const {
+  src,
+  alt = "",
+  fallback,
+  initials,
+  title,
+  subtitle,
+  label,
+  size = "md",
+  badge = false,
+  badgeColor = "success",
+  badgePosition = "bottom-right",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AvatarProps & {
+  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
+  badgeColor?: string
+}
+
+const classes = resolveClasses(avatar, {
+  size,
+  color: (Astro.props.color || "neutral") as "neutral",
+  badgePosition: badgePosition as "bottom-right"
+}, useUi("avatar", uiProp), className)
+
+const avatarFallback = fallback || initials
+const hasTextLayout = !!(title || subtitle)
+---
+{hasTextLayout ? (
+  <div class="flex items-center gap-3" data-slot="profile-wrapper">
+    <span
+      class={classes.root}
+      data-slot="root"
+      aria-label={label || title}
+      role={label || title ? "img" : undefined}
+      {...rest}
+    >
+      <slot>
+        {src ? (
+          <img
+            src={src}
+            alt={alt}
+            class={classes.image}
+            data-slot="image"
+          />
+        ) : (
+          <span class={classes.fallback} data-slot="fallback">
+            <slot name="fallback">
+              {avatarFallback}
+            </slot>
+            {!avatarFallback && !Astro.slots.has("fallback") && (
+              <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
+            )}
+          </span>
+        )}
+      </slot>
+
+      <slot name="badge">
+        {badge && (
+          <span
+            class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+            data-slot="badge"
+          >
+            {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
+          </span>
+        )}
+      </slot>
+    </span>
+    <div class="flex flex-col leading-tight">
+      {title && (
+        <span class="font-medium text-sm text-[var(--foreground)]" data-slot="title">
+          {title}
+        </span>
+      )}
+      {subtitle && (
+        <span class="text-xs text-[var(--muted-foreground)]" data-slot="subtitle">
+          {subtitle}
+        </span>
+      )}
+    </div>
+  </div>
+) : (
+  <span
+    class={classes.root}
+    data-slot="root"
+    aria-label={label}
+    role={label ? "img" : undefined}
+    {...rest}
+  >
+    <slot>
+      {src ? (
+        <img
+          src={src}
+          alt={alt}
+          class={classes.image}
+          data-slot="image"
+        />
+      ) : (
+        <span class={classes.fallback} data-slot="fallback">
+          <slot name="fallback">
+            {avatarFallback}
+          </slot>
+          {!avatarFallback && !Astro.slots.has("fallback") && (
+            <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
+          )}
+        </span>
+      )}
+    </slot>
+
+    <slot name="badge">
+      {badge && (
+        <span
+          class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+          data-slot="badge"
+        >
+          {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
+        </span>
+      )}
+    </slot>
+  </span>
+)}
+

package/src/components/astro/RLABadge.astro

@@ -21,9 +21,11 @@ const {
   ...rest
 } = Astro.props as BadgeProps & { label?: string }
 
+const resolvedVariant = (variant === "ghost") ? "soft" : ((variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid")
+
 const classes = resolveClasses(badge, {
-  variant,
-  color,
+  variant: resolvedVariant as "solid",
+  color: color as "neutral",
   size,
   shape,
   theme

package/src/components/astro/RLABanner.astro

@@ -1,23 +1,138 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BannerProps } from "../../types"
-import bannerThemeDefault, { createBannerTheme } from "../../themes/banner.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const bannerTheme = uiConfig.colors ? createBannerTheme() : bannerThemeDefault
-
-const banner = scv(bannerTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BannerProps
-
-const classes = resolveClasses(banner, {}, useUi("banner", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BannerProps } from "../../types"
+import bannerThemeDefault, { createBannerTheme } from "../../themes/banner.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const bannerTheme = uiConfig.colors ? createBannerTheme() : bannerThemeDefault
+
+const banner = scv(bannerTheme)
+
+const {
+  contain = true,
+  sticky = false,
+  fixed = true,
+  stackIndex = 0,
+  hideOnScroll = true,
+  dismissable = false,
+  dismissId,
+  actions = [],
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BannerProps
+
+const classes = resolveClasses(banner, {
+  contain,
+  sticky: fixed ? false : sticky,
+  fixed,
+}, useUi("banner", uiProp), className);
+
+const bannerId = `rla-banner-${Math.random().toString(36).slice(2, 8)}`;
+const storageKey = dismissId || bannerId;
+const zIndex = 200 - stackIndex;
+---
+
+<div
+  id={bannerId}
+  data-slot="root"
+  class:list={[classes.root]}
+  data-rla-banner="true"
+  data-stack-index={stackIndex}
+  data-hide-on-scroll={String(hideOnScroll)}
+  data-header-layer-id={bannerId}
+  data-layer-type="banner"
+  data-dismiss-key={`rl-banner-dismiss-${storageKey}`}
+  {...rest}
+>
+  <div class:list={[classes.content]} data-header-content>
+    <div class:list={[classes.container]}>
+      <div class:list={[classes.left, "actions-open-hidden"]} data-slot="left">
+        <slot name="left" />
+      </div>
+      <div class:list={[classes.center, "actions-open-hidden"]} data-slot="center">
+        <slot name="center">
+          <slot />
+        </slot>
+      </div>
+
+      {actions.length > 0 && (
+        <input
+          type="checkbox"
+          id={`${bannerId}-act`}
+          class="peer sr-only shrink-0"
+        />
+      )}
+
+      <div class="flex-1"></div>
+
+      <div class:list={[classes.side]}>
+        <slot name="right" />
+      </div>
+
+      {actions.length > 0 && (
+        <label
+          for={`${bannerId}-act`}
+          class="flex-none flex items-center justify-center size-7 rounded-md hover:bg-black/10 dark:hover:bg-white/10 cursor-pointer md:hidden text-sm leading-none peer-checked:order-first"
+          aria-label="Show actions"
+        >···</label>
+      )}
+
+      {actions.length > 0 && (
+        <div
+          class:list={[
+            classes.actions,
+            "hidden peer-checked:flex md:flex flex-row items-center justify-center gap-2 peer-checked:order-first"
+          ]}
+        >
+          {actions.map((action) => (
+            <a
+              href={action.href || "#"}
+              class:list={[
+                "inline-flex items-center justify-center gap-1 px-3 py-1 rounded-md text-xs font-semibold transition-colors no-underline cursor-pointer shrink-0",
+                action.variant === "solid" || !action.variant
+                  ? "bg-foreground text-background hover:opacity-90"
+                  : "bg-white/20 text-white hover:bg-white/30",
+                action.class
+              ]}
+              data-banner-action
+            >
+              {action.label}
+            </a>
+          ))}
+        </div>
+      )}
+
+      {dismissable && (
+        <button
+          class:list={[classes.dismiss]}
+          data-banner-close
+          aria-label="Close banner"
+          type="button"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      )}
+    </div>
+  </div>
+</div>
+
+<style is:inline set:html={`
+  ${actions.length > 0 ? `#${bannerId}:has(#${bannerId}-act:checked) .actions-open-hidden { display: none !important; }` : ''}
+  ${fixed ? `#${bannerId} { z-index: ${zIndex} !important; }` : ''}
+`} />

package/src/components/astro/RLABreadcrumb.astro

@@ -46,3 +46,16 @@ const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), clas
     )}
   </ol>
 </nav>
+
+{items && (
+  <script type="application/ld+json" is:inline set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": items.map((item, idx) => ({
+      "@type": "ListItem",
+      "position": idx + 1,
+      "name": item.label,
+      "item": item.href ? new URL(item.href, Astro.site || "https://starter.rimelight.com").toString() : undefined
+    }))
+  })} />
+)}

package/src/components/astro/RLAButton.astro

@@ -32,7 +32,11 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as ButtonProps
+} = Astro.props as ButtonProps & {
+  rounded?: boolean
+  activeColor?: string
+  activeVariant?: string
+}
 
 const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading")) || loading
 const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
@@ -49,8 +53,8 @@ const leadingIconClass = loading ? "animate-spin" : ""
 const trailingIconClass = loading ? "animate-spin" : ""
 
 const classes = resolveClasses(button, {
-  variant: active && activeVariant ? activeVariant : variant,
-  color: active && activeColor ? activeColor : color,
+  variant: (active && activeVariant ? activeVariant : variant) as "solid",
+  color: (active && activeColor ? activeColor : color) as "neutral",
   size,
   block,
   square: square || (!label && !Astro.slots.has("default")),
@@ -109,7 +113,7 @@ const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
 {loadingAuto && (
   <script>
     document.querySelectorAll('button[data-loading-auto]').forEach((button) => {
-      button.addEventListener('click', async (event) => {
+      button.addEventListener('click', async (_event) => {
         // Find if there are any other click listeners that return a promise
         // This is tricky in vanilla JS, but we can assume if it's data-loading-auto,
         // the user wants us to track the click.