@rimelight/ui 0.0.34 → 0.0.35

package/src/components/astro/RLALink.astro

@@ -7,16 +7,38 @@ const {
   href,
   variant = "link",
   color = "neutral",
+  external,
+  isButton = false,
+  ariaLabel,
+  externalIcon,
+  target,
+  rel,
+  trailingIcon,
   ...rest
 } = Astro.props as LinkProps
 
 const linkHref = href || (typeof to === 'string' ? to : undefined);
+
+const isExternal = !!(external || (linkHref && (linkHref.startsWith('http://') || linkHref.startsWith('https://') || linkHref.startsWith('//'))));
+
+const linkVariant = isButton && variant === "link" ? "solid" : variant;
+const linkTarget = target || (isExternal ? "_blank" : undefined);
+const linkRel = rel || (isExternal ? "noopener noreferrer" : undefined);
+
+const showExternalIcon = isExternal && !trailingIcon ? (externalIcon || "i-lucide-external-link") : trailingIcon;
 ---
 <RLAButton
-  variant={variant as any}
+  variant={linkVariant as any}
   color={color as any}
   href={linkHref}
+  target={linkTarget}
+  rel={linkRel}
+  aria-label={ariaLabel}
+  trailingIcon={showExternalIcon}
   {...rest}
 >
   <slot />
+  {isExternal && !ariaLabel && (
+    <span class="sr-only"> (opens in a new tab)</span>
+  )}
 </RLAButton>

package/src/components/astro/RLALinkGroup.astro

@@ -1,100 +1,100 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LinkGroupProps } from "../../types"
-import linkGroupThemeDefault, { createLinkGroupTheme } from "../../themes/link-group.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-import RLALink from "./RLALink.astro"
-
-const uiConfig = getUIConfig()
-const linkGroupTheme = uiConfig.colors ? createLinkGroupTheme() : linkGroupThemeDefault
-
-const linkGroup = scv(linkGroupTheme)
-
-const {
-  title,
-  label,
-  leadingIcon,
-  trailingIcon,
-  href,
-  to,
-  links = [],
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LinkGroupProps
-
-const classes = resolveClasses(linkGroup, { theme }, useUi("linkGroup", uiProp), className);
-
-const headingLabel = label || (typeof title === "object" ? title.label : (typeof title === "string" ? title : undefined));
-const headingLeadingIcon = leadingIcon || (typeof title === "object" ? title.leadingIcon : undefined);
-const headingTrailingIcon = trailingIcon || (typeof title === "object" ? title.trailingIcon : undefined);
-const headingHref = href || (typeof title === "object" ? title.href : undefined);
-const headingTo = to || (typeof title === "object" ? (title as any).to : undefined);
-
-const linksProp = links ?? [];
-const normalizedLinks = Array.isArray(linksProp) ? linksProp : [linksProp];
-
-// Prefix utility classes in classes.link with `!` to cleanly override conflicting text colors in RLAButton's base classes.
-// For default or light themes, do not force base text classes so RLAButton's own light/dark mode styles can adapt naturally.
-const isPinnedDark = theme === "flat" || theme === "dark";
-const overrideLinkClass = classes.link
-    ? classes.link
-        .split(" ")
-        .map(cls => {
-            if (!cls) return "";
-            if (cls.includes(":")) {
-                const parts = cls.split(":");
-                const state = parts.slice(0, -1).join(":");
-                const baseCls = parts[parts.length - 1];
-                return `${state}:!${baseCls}`;
-            }
-            if (cls.startsWith("text-") && !isPinnedDark) {
-                return cls;
-            }
-            return `!${cls}`;
-        })
-        .filter(Boolean)
-        .join(" ")
-    : "";
----
-<div class={classes.root} data-slot="root" {...rest}>
-  {headingLabel && (
-    <h4 class={classes.title} data-slot="title">
-      {headingHref || headingTo ? (
-        <a href={headingHref || (typeof headingTo === 'string' ? headingTo : undefined)} class="hover:underline flex items-center gap-1.5">
-          {headingLeadingIcon && <span class={headingLeadingIcon} />}
-          <span>{headingLabel}</span>
-          {headingTrailingIcon && <span class={headingTrailingIcon} />}
-        </a>
-      ) : (
-        <span class="flex items-center gap-1.5">
-          {headingLeadingIcon && <span class={headingLeadingIcon} />}
-          <span>{headingLabel}</span>
-          {headingTrailingIcon && <span class={headingTrailingIcon} />}
-        </span>
-      )}
-    </h4>
-  )}
-  
-  <ul class={classes.list} data-slot="list">
-    <slot>
-      {normalizedLinks.map((link) => (
-        <li class={classes.item} data-slot="item">
-          <RLALink
-            variant={link.variant ?? "ghost"}
-            color={link.color ?? "neutral"}
-            theme={link.theme ?? theme}
-            class:list={[overrideLinkClass, "w-full !justify-start"]}
-            data-slot="link"
-            {...link}
-          >
-            {link.label}
-          </RLALink>
-        </li>
-      ))}
-    </slot>
-  </ul>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LinkGroupProps } from "../../types"
+import linkGroupThemeDefault, { createLinkGroupTheme } from "../../themes/link-group.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+import RLALink from "./RLALink.astro"
+
+const uiConfig = getUIConfig()
+const linkGroupTheme = uiConfig.colors ? createLinkGroupTheme() : linkGroupThemeDefault
+
+const linkGroup = scv(linkGroupTheme)
+
+const {
+  title,
+  label,
+  leadingIcon,
+  trailingIcon,
+  href,
+  to,
+  links = [],
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LinkGroupProps
+
+const classes = resolveClasses(linkGroup, { theme }, useUi("linkGroup", uiProp), className);
+
+const headingLabel = label || (typeof title === "object" ? title.label : (typeof title === "string" ? title : undefined));
+const headingLeadingIcon = leadingIcon || (typeof title === "object" ? title.leadingIcon : undefined);
+const headingTrailingIcon = trailingIcon || (typeof title === "object" ? title.trailingIcon : undefined);
+const headingHref = href || (typeof title === "object" ? title.href : undefined);
+const headingTo = to || (typeof title === "object" ? (title as any).to : undefined);
+
+const linksProp = links ?? [];
+const normalizedLinks = Array.isArray(linksProp) ? linksProp : [linksProp];
+
+// Prefix utility classes in classes.link with `!` to cleanly override conflicting text colors in RLAButton's base classes.
+// For default or light themes, do not force base text classes so RLAButton's own light/dark mode styles can adapt naturally.
+const isPinnedDark = theme === "dark";
+const overrideLinkClass = classes.link
+    ? classes.link
+        .split(" ")
+        .map(cls => {
+            if (!cls) return "";
+            if (cls.includes(":")) {
+                const parts = cls.split(":");
+                const state = parts.slice(0, -1).join(":");
+                const baseCls = parts[parts.length - 1];
+                return `${state}:!${baseCls}`;
+            }
+            if (cls.startsWith("text-") && !isPinnedDark) {
+                return cls;
+            }
+            return `!${cls}`;
+        })
+        .filter(Boolean)
+        .join(" ")
+    : "";
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  {headingLabel && (
+    <h4 class={classes.title} data-slot="title">
+      {headingHref || headingTo ? (
+        <a href={headingHref || (typeof headingTo === 'string' ? headingTo : undefined)} class="hover:underline flex items-center gap-1.5">
+          {headingLeadingIcon && <span class={headingLeadingIcon} />}
+          <span>{headingLabel}</span>
+          {headingTrailingIcon && <span class={headingTrailingIcon} />}
+        </a>
+      ) : (
+        <span class="flex items-center gap-1.5">
+          {headingLeadingIcon && <span class={headingLeadingIcon} />}
+          <span>{headingLabel}</span>
+          {headingTrailingIcon && <span class={headingTrailingIcon} />}
+        </span>
+      )}
+    </h4>
+  )}
+  
+  <ul class={classes.list} data-slot="list">
+    <slot>
+      {normalizedLinks.map((link) => (
+        <li class={classes.item} data-slot="item">
+          <RLALink
+            variant={link.variant ?? "ghost"}
+            color={link.color ?? "neutral"}
+            theme={link.theme ?? theme}
+            class:list={[overrideLinkClass, "w-full !justify-start"]}
+            data-slot="link"
+            {...link}
+          >
+            {link.label}
+          </RLALink>
+        </li>
+      ))}
+    </slot>
+  </ul>
 </div>

package/src/components/astro/RLALocaleSelector.astro

@@ -81,45 +81,38 @@ const overrideTriggerClass = classes.select
 
 const gapClass = size === "sm" ? "gap-1.5" : size === "lg" ? "gap-3" : "gap-2";
 
-const isDefault = variant === "default";
-const triggerDarkModeOverrides = isDefault 
-    ? "dark:!bg-neutral-800 dark:!text-white dark:hover:!bg-neutral-700" 
-    : "";
-
 const selectUi = {
     root: "!w-fit !inline-flex",
-    trigger: `flex items-center justify-between !w-fit ${gapClass} ${overrideTriggerClass} ${triggerDarkModeOverrides}`,
-    content: "!min-w-0 !w-full !bg-white !border-gray-200 !text-gray-800 dark:!bg-neutral-900 dark:!border-neutral-800 dark:!text-white",
-    item: "!text-gray-700 hover:!bg-gray-100 hover:!text-gray-900 dark:!text-neutral-300 dark:hover:!bg-neutral-800 dark:hover:!text-white"
+    trigger: `flex items-center justify-between !w-fit ${gapClass} ${overrideTriggerClass}`,
+    content: "!min-w-0 !w-full !bg-[var(--popover)] !border-[var(--border)] !text-[var(--popover-foreground)]",
+    item: "!text-[var(--foreground)] hover:!bg-[var(--accent)] hover:!text-[var(--accent-foreground)]"
 };
 ---
 
-<div class:list={[classes.root]} data-locale-selector {...rest}>
-    {Astro.slots.has("label") && (
-            <label class:list={[classes.label]}>
-                <slot name="label" />
-            </label>
-    )}
-
-    <div class:list={[classes.wrapper]}>
-        <RLASelect
-            items={items}
-            value={currentLocaleUrl}
-            size={size}
-            ui={selectUi}
-        />
+<rla-locale-selector {...rest}>
+    <div class:list={[classes.root]} data-locale-selector>
+        {Astro.slots.has("label") && (
+                <label class:list={[classes.label]}>
+                    <slot name="label" />
+                </label>
+        )}
+
+        <div class:list={[classes.wrapper]}>
+            <RLASelect
+                items={items}
+                value={currentLocaleUrl}
+                size={size}
+                ui={selectUi}
+            />
+        </div>
     </div>
-</div>
+</rla-locale-selector>
 
 <script>
-    const initializeLocaleSelector = () => {
-        const selectors = document.querySelectorAll('[data-locale-selector]');
-
-        selectors.forEach(selector => {
-            if (selector.hasAttribute('data-initialized')) return;
-            selector.setAttribute('data-initialized', 'true');
-
-            const hiddenInput = selector.querySelector('[data-select-hidden-input]') as HTMLInputElement;
+    class RLALocaleSelector extends HTMLElement {
+        connectedCallback() {
+            this.style.display = 'contents';
+            const hiddenInput = this.querySelector('[data-select-hidden-input]') as HTMLInputElement | null;
             if (!hiddenInput) return;
 
             hiddenInput.addEventListener('change', (event) => {
@@ -129,9 +122,10 @@ const selectUi = {
                     window.location.href = targetUrl;
                 }
             });
-        });
-    };
+        }
+    }
 
-    document.addEventListener('DOMContentLoaded', initializeLocaleSelector);
-    document.addEventListener('astro:page-load', initializeLocaleSelector);
+    if (!customElements.get('rla-locale-selector')) {
+        customElements.define('rla-locale-selector', RLALocaleSelector);
+    }
 </script>

package/src/components/astro/RLALogo.astro

@@ -1,90 +1,117 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LogoProps } from "../../types"
-import logoThemeDefault, { createLogoTheme } from "../../themes/logo.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const logoTheme = uiConfig.colors ? createLogoTheme() : logoThemeDefault
-
-const logo = scv(logoTheme)
-
-const {
-  variant = "logomark",
-  mode,
-  theme,
-  href = "/",
-  alt,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LogoProps;
-
-const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
-
-const globalConfig = getUIConfig();
-const rcLogos = globalConfig.logos as Record<string, any>;
-
-let logoSrc: string | null = null;
-let darkSrc: string | null = null;
-let lightSrc: string | null = null;
-
-if (rcLogos && typeof rcLogos === "object") {
-  let src = rcLogos[variant];
-  if (src && typeof src === "object") {
-    if (theme === "flat" && src.flat) {
-      logoSrc = src.flat;
-    } else if (mode) {
-      logoSrc = src[mode] || src.color;
-    } else {
-      // No mode, no flat — auto-detect, use color as default
-      logoSrc = src.color || src.black || src.white;
-      darkSrc = src.white || src.color;
-      lightSrc = src.black || src.color;
-    }
-  } else if (typeof src === "string") {
-    logoSrc = src;
-  }
-}
-
-const startsWithUrlPrefix = logoSrc && (logoSrc.startsWith("http") || logoSrc.startsWith("/") || logoSrc.startsWith("."));
-const isIcon = logoSrc && !startsWithUrlPrefix && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
-const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode && theme !== "flat";
-const autoId = hasAutoMode ? `rla-logo-${Math.random().toString(36).slice(2, 8)}` : undefined;
----
-
-<a
-  class={classes.root}
-  href={href}
-  aria-label={alt || variant}
-  data-slot="root"
-  {...rest}
->
-  {logoSrc ? (
-    isIcon ? (
-      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
-    ) : hasAutoMode ? (
-      <>
-        <img
-          src={lightSrc}
-          alt={alt || ""}
-          class="size-full block object-contain shrink-0 dark:hidden"
-        />
-        <img
-          src={darkSrc}
-          alt={alt || ""}
-          class="size-full hidden object-contain shrink-0 dark:block"
-        />
-      </>
-    ) : (
-      <img
-        src={logoSrc}
-        alt={alt || ""}
-        class="size-full block object-contain shrink-0"
-      />
-    )
-  ) : (
-    <slot />
-  )}
-</a>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LogoProps } from "../../types"
+import logoThemeDefault, { createLogoTheme } from "../../themes/logo.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const logoTheme = uiConfig.colors ? createLogoTheme() : logoThemeDefault
+
+const logo = scv(logoTheme)
+
+const {
+  variant = "logomark",
+  mode,
+  theme,
+  href = "/",
+  alt,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LogoProps;
+
+let resolvedHref = href;
+if (href === "/") {
+  try {
+    const { getRelativeLocaleUrl } = await import("@rimelight/i18n");
+    resolvedHref = Astro.currentLocale
+      ? getRelativeLocaleUrl(Astro.currentLocale, "/")
+      : getRelativeLocaleUrl("/");
+  } catch {
+    if (Astro.currentLocale) {
+      resolvedHref = `/${Astro.currentLocale}/`;
+    }
+  }
+}
+
+const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
+
+const globalConfig = getUIConfig();
+const rcLogos = globalConfig.logos as Record<string, any>;
+
+let logoSrc: string | null = null;
+let darkSrc: string | null = null;
+let lightSrc: string | null = null;
+
+const logoFiles = import.meta.glob<{ default: any }>("/src/assets/**/*.{svg,png,jpg,jpeg,webp,gif}", { eager: true });
+
+function resolveLogo(pathStr: string | null | undefined): any {
+  if (!pathStr) return null;
+  let lookupPath = pathStr;
+  if (lookupPath.startsWith("./")) {
+    lookupPath = lookupPath.substring(1);
+  } else if (!lookupPath.startsWith("/")) {
+    lookupPath = "/" + lookupPath;
+  }
+  const file = logoFiles[lookupPath];
+  if (file) {
+    return file.default?.src || file.default;
+  }
+  return pathStr;
+}
+
+if (rcLogos && typeof rcLogos === "object") {
+  let src = rcLogos[variant];
+  if (src && typeof src === "object") {
+    if (mode) {
+      logoSrc = resolveLogo(src[mode] || src.color);
+    } else {
+      logoSrc = resolveLogo(src.color || src.black || src.white);
+      darkSrc = resolveLogo(src.white || src.color);
+      lightSrc = resolveLogo(src.black || src.color);
+    }
+  } else if (typeof src === "string") {
+    logoSrc = resolveLogo(src);
+  }
+}
+
+const startsWithUrlPrefix = logoSrc && (logoSrc.startsWith("http") || logoSrc.startsWith("/") || logoSrc.startsWith("."));
+const isIcon = logoSrc && !startsWithUrlPrefix && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
+const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
+---
+
+<a
+  class={classes.root}
+  href={resolvedHref}
+  aria-label={alt || variant}
+  data-slot="root"
+  {...rest}
+>
+  {logoSrc ? (
+    isIcon ? (
+      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
+    ) : hasAutoMode ? (
+      <>
+        <img
+          src={lightSrc}
+          alt={alt || ""}
+          class="size-full block object-contain shrink-0 dark:hidden"
+        />
+        <img
+          src={darkSrc}
+          alt={alt || ""}
+          class="size-full hidden object-contain shrink-0 dark:block"
+        />
+      </>
+    ) : (
+      <img
+        src={logoSrc}
+        alt={alt || ""}
+        class="size-full block object-contain shrink-0"
+      />
+    )
+  ) : (
+    <slot />
+  )}
+</a>

package/src/components/astro/RLAModal.astro

@@ -22,7 +22,7 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as ModalProps
+} = Astro.props as ModalProps & { size?: "sm" | "md" | "lg" | "xl" }
 
 const classes = resolveClasses(modal, {
   size
@@ -36,12 +36,12 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
       class={classes.trigger}
       data-slot="trigger"
       type="button"
-      onclick={`document.getElementById('${modalId}').showmodal()`}
+      data-dialog-show={modalId}
     >
       {triggerLabel}
     </button>
   ) : (
-    <span onclick={`document.getElementById('${modalId}').showmodal()`}>
+    <span data-dialog-show={modalId}>
       <slot name="trigger" />
     </span>
   )}
@@ -59,7 +59,7 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
       class={classes.closeButton}
       data-slot="close-button"
       type="button"
-      onclick={`document.getElementById('${modalId}').close()`}
+      data-dialog-close={modalId}
       aria-label="Close modal"
     >
       <span class="i-lucide-x size-4" aria-hidden="true" />
@@ -81,19 +81,49 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
   </dialog>
 </div>
 
-<script is:inline>
-  document.addEventListener('click', (e) => {
-    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
-      const rect = e.target.getBoundingClientRect();
-      const isInModal = (
-        rect.top <= e.clientY &&
-        e.clientY <= rect.top + rect.height &&
-        rect.left <= e.clientX &&
-        e.clientX <= rect.left + rect.width
-      );
-      if (!isInModal) {
-        e.target.close();
+<script>
+  if (!(window as any).rlaDialogListenerActive) {
+    (window as any).rlaDialogListenerActive = true;
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      const showTrigger = target.closest('[data-dialog-show]');
+      if (showTrigger) {
+        const dialogId = showTrigger.getAttribute('data-dialog-show');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          if (dialog) {
+            if (typeof dialog.showModal === 'function') {
+              dialog.showModal();
+            } else if (typeof (dialog as any).showmodal === 'function') {
+              (dialog as any).showmodal();
+            }
+          }
+        }
+      }
+
+      const closeTrigger = target.closest('[data-dialog-close]');
+      if (closeTrigger) {
+        const dialogId = closeTrigger.getAttribute('data-dialog-close');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          dialog?.close();
+        }
+      }
+
+      if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
+        const rect = target.getBoundingClientRect();
+        const isInModal = (
+          rect.top <= e.clientY &&
+          e.clientY <= rect.top + rect.height &&
+          rect.left <= e.clientX &&
+          e.clientX <= rect.left + rect.width
+        );
+        if (!isInModal) {
+          (target as HTMLDialogElement).close();
+        }
       }
-    }
-  });
+    });
+  }
 </script>