@rimelight/ui 0.0.45 → 0.0.47

package/src/components/link/RLALink.astro

@@ -25,7 +25,7 @@ const {
 const attrs = resolveLinkAttrs(Astro.props)
 
 const classes = raw
-  ? { root: (Astro.props.class as string) || "", leadingIcon: "", label: "", trailingIcon: "" }
+  ? { root: (Astro.props["class"] as string) || "", leadingIcon: "", label: "", trailingIcon: "" }
   : (linkTheme({
   theme,
         ...(active !== undefined ? { active } : {}),
@@ -34,7 +34,7 @@ const classes = raw
 ---
 
 <a
-  class={classes.root}
+  class={classes["root"]}
   data-slot="root"
   href={attrs.href}
   target={attrs.target}
@@ -48,21 +48,21 @@ const classes = raw
 >
   <slot name="leading">
     {leadingIcon && (
-      <span class={classes.leadingIcon} data-slot="leading-icon">
+      <span class={classes["leadingIcon"]} data-slot="leading-icon">
         <RLAIcon name={leadingIcon} size="sm" aria-hidden="true" />
       </span>
     )}
   </slot>
 
   {label !== undefined && label !== null ? (
-    <span class={classes.label} data-slot="label">{label}</span>
+    <span class={classes["label"]} data-slot="label">{label}</span>
   ) : (
     <slot />
   )}
 
   <slot name="trailing">
     {attrs.showTrailingIcon && (
-      <span class={classes.trailingIcon} data-slot="trailing-icon">
+      <span class={classes["trailingIcon"]} data-slot="trailing-icon">
         <RLAIcon
           name={attrs.showTrailingIcon}
           size="sm"

package/src/components/link/RLSLink.tsx

@@ -53,7 +53,7 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
 
   return (
     <a
-      class={classes().root}
+      class={classes()["root"]}
       data-slot="root"
       href={attrs().href}
       target={attrs().target}
@@ -67,7 +67,7 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
       {props.leading ? (
         props.leading
       ) : props.leadingIcon ? (
-        <span class={classes().leadingIcon} data-slot="leading-icon">
+        <span class={classes()["leadingIcon"]} data-slot="leading-icon">
           <RLSIcon name={props.leadingIcon} size="sm" aria-hidden="true" />
         </span>
       ) : null}
@@ -75,7 +75,7 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
       {props.children !== undefined && props.children !== null ? (
         props.children
       ) : props.label !== undefined && props.label !== null ? (
-        <span class={classes().label} data-slot="label">
+        <span class={classes()["label"]} data-slot="label">
           {props.label}
         </span>
       ) : null}
@@ -83,7 +83,7 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
       {props.trailing ? (
         props.trailing
       ) : attrs().showTrailingIcon ? (
-        <span class={classes().trailingIcon} data-slot="trailing-icon">
+        <span class={classes()["trailingIcon"]} data-slot="trailing-icon">
           <RLSIcon name={attrs().showTrailingIcon!} size="sm" aria-hidden="true" />
         </span>
       ) : null}

package/src/components/locale-selector/RLALocaleSelector.astro

@@ -1,102 +1,109 @@
----
-import type { LocaleSelectorProps } from "./locale-selector"
-import { localeSelectorTheme } from "./locale-selector.theme"
-import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n"
-import RLASelect from "../select/RLASelect.astro"
-
-const {
-  locales,
-  currentLocale: currentLocaleProp,
-  size = "md",
-  theme,
-  ...rest
-} = Astro.props as LocaleSelectorProps;
-
-const classes = localeSelectorTheme(Astro.props);
-
-// Resolve the active locale: explicit prop → Astro.currentLocale → 'en'
-const currentLocale = currentLocaleProp ?? Astro.currentLocale ?? 'en';
-
-// Normalise locales: accept strings, LocaleItem without href, or LocaleItem with href.
-// When no locales are supplied, fall back to Astro i18n auto-detection.
-const processedLocales = locales && locales.length > 0
-    ? locales.map(item => typeof item === 'string' ? { code: item, label: item, href: undefined } : item)
-    : [...new Map(getRelativeLocaleUrlList().map(url => {
-        const locale = url.split('/')[1] || 'en';
-        return [locale, { code: locale, label: locale, href: undefined }];
-    })).values()];
-
-function getLocaleDisplayName(localeCode: string): string {
-    try {
-        const formatter = new Intl.DisplayNames([localeCode], { type: 'language' });
-        const nativeName = formatter.of(localeCode);
-
-        return nativeName
-            ? nativeName.charAt(0).toUpperCase() + nativeName.slice(1)
-            : localeCode.toUpperCase();
-    } catch (e) {
-        return localeCode.toUpperCase();
-    }
-}
-
-const items = processedLocales.map((item) => {
-    // If the caller supplied an explicit href, use it directly.
-    // Otherwise fall back to Astro's getRelativeLocaleUrl, preserving the
-    // current path and query string.
-    let targetUrl: string;
-    if (item.href !== undefined && item.href !== null) {
-        targetUrl = item.href + Astro.url.search;
-    } else {
-        const basePath = Astro.url.pathname.replace(/^\/[^/]+/, '') || '/';
-        targetUrl = getRelativeLocaleUrl(item.code, basePath) + Astro.url.search;
-    }
-
-    return {
-        label: item.label !== item.code ? item.label : getLocaleDisplayName(item.code),
-        value: targetUrl,
-        code: item.code
-    };
-});
-
-const currentLocaleUrl = items.find(item => item.code === currentLocale)?.value || "";
----
-
-<rla-locale-selector data-theme={theme} {...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}
-                theme={theme}
-            />
-        </div>
-    </div>
-</rla-locale-selector>
-
-<script>
-    class RLALocaleSelector extends HTMLElement {
-        connectedCallback() {
-            this.style.display = 'contents';
-            this.addEventListener('change', (event) => {
-                const target = event.target as HTMLSelectElement;
-                if (target && target.tagName === 'SELECT') {
-                    const targetUrl = target.value;
-                    if (targetUrl) {
-                        window.location.href = targetUrl;
-                    }
-                }
-            });
-        }
-    }
-
-    if (!customElements.get('rla-locale-selector')) {
-        customElements.define('rla-locale-selector', RLALocaleSelector);
-    }
-</script>
+---
+import type { LocaleSelectorProps, LocaleItem } from "./locale-selector"
+import { localeSelectorTheme } from "./locale-selector.theme"
+import RLASelect from "../select/RLASelect.astro"
+
+const {
+  locales = [],
+  currentLocale = "en",
+  size = "md",
+  theme,
+  ...rest
+} = Astro.props as LocaleSelectorProps;
+
+const classes = localeSelectorTheme(Astro.props);
+
+function getLocaleDisplayName(localeCode: string): string {
+  try {
+    const formatter = new Intl.DisplayNames([localeCode], { type: 'language' });
+    const nativeName = formatter.of(localeCode);
+    return nativeName
+      ? nativeName.charAt(0).toUpperCase() + nativeName.slice(1)
+      : localeCode.toUpperCase();
+  } catch {
+    return localeCode.toUpperCase();
+  }
+}
+
+// Normalize locales: string or LocaleItem
+const processedLocales: LocaleItem[] = locales.map(item =>
+  typeof item === 'string'
+    ? { code: item, label: getLocaleDisplayName(item) }
+    : { ...item, label: item.label || getLocaleDisplayName(item.code) }
+);
+
+const items = processedLocales.map((item) => {
+  let targetUrl: string;
+  if (item.href !== undefined && item.href !== null) {
+    targetUrl = item.href + (item.href.includes("?") ? "" : Astro.url.search);
+  } else {
+    // Derive the known locale codes from the props list so we can detect
+    // whether the first URL segment is a locale prefix or a real path segment.
+    const knownCodes = new Set(processedLocales.map((l) => l.code));
+
+    const pathname = Astro.url.pathname;
+    const segments = pathname.split("/").filter(Boolean);
+    const firstIsLocale = segments.length > 0 && knownCodes.has(segments[0]!);
+
+    if (firstIsLocale) {
+      // Replace existing locale prefix with the target locale.
+      segments[0] = item.code;
+      targetUrl = `/${segments.join("/")}${pathname.endsWith("/") ? "/" : ""}${Astro.url.search}`;
+    } else if (segments.length > 0) {
+      // No locale prefix in the current URL — prepend the target locale.
+      targetUrl = `/${item.code}/${segments.join("/")}${pathname.endsWith("/") ? "/" : ""}${Astro.url.search}`;
+    } else {
+      // Root path.
+      targetUrl = `/${item.code}/${Astro.url.search}`;
+    }
+  }
+
+  return {
+    label: item.label,
+    value: targetUrl,
+    code: item.code
+  };
+});
+
+const currentLocaleUrl = items.find(item => item.code === currentLocale)?.value || "";
+---
+
+<rla-locale-selector data-theme={theme} {...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}
+                theme={theme}
+            />
+        </div>
+    </div>
+</rla-locale-selector>
+
+<script>
+    class RLALocaleSelector extends HTMLElement {
+        connectedCallback() {
+            this.style.display = 'contents';
+            this.addEventListener('change', (event) => {
+                const target = event.target as HTMLSelectElement;
+                if (target && target.tagName === 'SELECT') {
+                    const targetUrl = target.value;
+                    if (targetUrl) {
+                        window.location.href = targetUrl;
+                    }
+                }
+            });
+        }
+    }
+
+    if (!customElements.get('rla-locale-selector')) {
+        customElements.define('rla-locale-selector', RLALocaleSelector);
+    }
+</script>

package/src/components/locale-selector/locale-selector.ts

@@ -4,13 +4,8 @@ export interface LocaleItem {
   /**
    * The URL to navigate to when this locale is selected.
    *
-   * Supply this to make the component fully routing-agnostic: it will use `href` directly and will
-   * not call any Astro i18n APIs. The caller is responsible for constructing URLs using whatever
-   * strategy their project uses — `getRelativeLocaleUrl`, `@rimelight/i18n`, a custom helper, or a
-   * plain string.
-   *
-   * When omitted the component falls back to computing the URL via Astro's built-in
-   * `getRelativeLocaleUrl` helper (requires Astro i18n to be configured).
+   * Supply this to make the component fully routing-agnostic: it will use `href` directly. When
+   * omitted, the component falls back to updating the first URL segment to match the locale code.
    */
   href?: string
 }

package/src/components/logo/RLALogo.astro

@@ -1,102 +1,88 @@
----
-import type { LogoProps } from "./logo"
-import { logoTheme } from "./logo.theme"
-import uiConfig from "virtual:rimelight/ui"
-
-const {
-  variant = "logomark",
-  mode,
-  href = "/",
-  alt,
-  ...rest
-} = Astro.props as LogoProps;
-
-let resolvedHref = href;
-if (href === "/") {
-  try {
-    const { getRelativeLocaleUrl } = await import("astro:i18n");
-    resolvedHref = Astro.currentLocale
-      ? getRelativeLocaleUrl(Astro.currentLocale, "/")
-      : getRelativeLocaleUrl("/");
-  } catch {
-    if (Astro.currentLocale) {
-      resolvedHref = `/${Astro.currentLocale}/`;
-    }
-  }
-}
-
-const classes = logoTheme(Astro.props);
-
-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;
-}
-
-const logoVariant = uiConfig.logos?.[variant];
-if (logoVariant && typeof logoVariant === "object") {
-  if (mode) {
-    logoSrc = resolveLogo(logoVariant[mode] || logoVariant.color);
-  } else {
-    logoSrc = resolveLogo(logoVariant.color || logoVariant.black || logoVariant.white);
-    darkSrc = resolveLogo(logoVariant.white || logoVariant.color);
-    lightSrc = resolveLogo(logoVariant.black || logoVariant.color);
-  }
-} else if (typeof logoVariant === "string") {
-  logoSrc = resolveLogo(logoVariant);
-}
-
-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>
+---
+import type { LogoProps } from "./logo"
+import { logoTheme } from "./logo.theme"
+import uiConfig from "virtual:rimelight/ui"
+
+const {
+  variant = "logomark",
+  mode,
+  href = "/",
+  alt,
+  ...rest
+} = Astro.props as LogoProps;
+
+const classes = logoTheme(Astro.props);
+
+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;
+}
+
+const logoVariant = uiConfig.logos?.[variant];
+if (logoVariant && typeof logoVariant === "object") {
+  if (mode) {
+    logoSrc = resolveLogo(logoVariant[mode] || logoVariant.color);
+  } else {
+    logoSrc = resolveLogo(logoVariant.color || logoVariant.black || logoVariant.white);
+    darkSrc = resolveLogo(logoVariant.white || logoVariant.color);
+    lightSrc = resolveLogo(logoVariant.black || logoVariant.color);
+  }
+} else if (typeof logoVariant === "string") {
+  logoSrc = resolveLogo(logoVariant);
+}
+
+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={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>

package/src/components/navigation-menu/RLANavigationMenu.astro

@@ -29,11 +29,11 @@ await Promise.all(
       {items.map((item, i) => {
         const hasChildren = item.children && item.children.length > 0
 
-        const itemPath = (item.href ?? item.to ?? "#") as string
+        const itemPath = (item["href"] ?? item["to"] ?? "#") as string
         const normalizedPath = itemPath.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
         const currentPath = Astro.url.pathname.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
 
-        const isActive = item.active ?? (
+        const isActive = item["active"] ?? (
           normalizedPath !== '' && normalizedPath !== '/'
             ? currentPath.startsWith(normalizedPath)
             : currentPath === '/'
@@ -56,7 +56,7 @@ await Promise.all(
               </button>
             ) : (
               <a
-                href={typeof item.href === "string" ? item.href : (typeof item.to === "string" ? item.to : "#")}
+                href={typeof item["href"] === "string" ? item["href"] : (typeof item["to"] === "string" ? item["to"] : "#")}
                 class={classes.link}
                 data-slot="link"
                 aria-current={isActive ? "page" : undefined}
@@ -81,12 +81,12 @@ await Promise.all(
                     {item.children!.map(child => (
                       <li>
                         <a
-                          href={typeof child.href === "string" ? child.href : (typeof child.to === "string" ? child.to : "#")}
+                          href={typeof child["href"] === "string" ? child["href"] : (typeof child["to"] === "string" ? child["to"] : "#")}
                           class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accented hover:text-highlighted transition-colors"
                         >
-                          {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted"} />}
+                          {child["icon"] && <span class={child["icon"] + " mt-0.5 size-4 shrink-0 text-muted"} />}
                           <div>
-                            <div class="font-medium leading-none">{child.label}</div>
+                            <div class="font-medium leading-none">{child["label"]}</div>
                             {child.description && (
                               <p class="mt-1 text-xs text-muted line-clamp-2">{child.description}</p>
                             )}

package/src/components/popover/RLAPopover.astro

@@ -198,7 +198,7 @@ const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
    */
   function setupPopovers() {
     document.querySelectorAll<HTMLElement>('[data-slot="popover-container"]').forEach(container => {
-      const mode = container.dataset.mode || 'both';
+      const mode = container.dataset["mode"] || 'both';
       const popoverId = container.querySelector<HTMLElement>('[data-slot="content"]')?.id;
       if (!popoverId) return;
 
@@ -248,7 +248,7 @@ const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
         const ph = panel.offsetHeight;
         if (pw === 0 || ph === 0) return; // closed or not yet rendered
 
-        const parts = (container.dataset.placement || 'bottom').split('-');
+        const parts = (container.dataset["placement"] || 'bottom').split('-');
         const vert = parts[0];            // top | bottom
         const horiz = parts[1] || 'center'; // start | end | center
         const gap = 8;

package/src/components/scroll-area/RLAScrollArea.astro

@@ -66,7 +66,7 @@ const heightStyle = height
     const viewport = area.querySelector("[data-scroll-viewport]") as HTMLElement | null;
     if (!viewport) return;
 
-    const hideDelay = parseInt((area as HTMLElement).dataset.hideDelay ?? "600", 10);
+    const hideDelay = parseInt((area as HTMLElement).dataset["hideDelay"] ?? "600", 10);
 
     const vBar = area.querySelector("[data-scroll-bar='vertical']") as HTMLElement | null;
     const hBar = area.querySelector("[data-scroll-bar='horizontal']") as HTMLElement | null;

package/src/components/scroll-to-top/RLAScrollToTop.astro

@@ -69,12 +69,12 @@ const classes = scrollToTopTheme(Astro.props)
       if (!button || !innerElement) return;
 
       const id = ++RLAScrollToTop.instanceCounter;
-      const threshold = Number(this.dataset.threshold) || 200;
-      const color = this.dataset.color || 'primary';
-      const progressWidth = Number(this.dataset.progressWidth) || 6;
+      const threshold = Number(this.dataset["threshold"]) || 200;
+      const color = this.dataset["color"] || 'primary';
+      const progressWidth = Number(this.dataset["progressWidth"]) || 6;
       const gaugeBorderWidth = progressWidth * 0.5;
 
-      innerElement.dataset.rlaInstance = String(id);
+      innerElement.dataset["rlaInstance"] = String(id);
 
       button.addEventListener('click', scrollToTop);
 

package/src/components/search/RLASearch.astro

@@ -112,12 +112,12 @@ const emptyId = `search-empty-${uniqueId}`
 
     connectedCallback() {
       this.style.display = 'contents';
-      const triggerId = this.dataset.triggerId;
-      const modalId = this.dataset.modalId;
-      const inputId = this.dataset.inputId;
-      const resultsId = this.dataset.resultsId;
-      const emptyId = this.dataset.emptyId;
-      const endpoint = this.dataset.endpoint;
+      const triggerId = this.dataset["triggerId"];
+      const modalId = this.dataset["modalId"];
+      const inputId = this.dataset["inputId"];
+      const resultsId = this.dataset["resultsId"];
+      const emptyId = this.dataset["emptyId"];
+      const endpoint = this.dataset["endpoint"];
 
       const trigger = this.querySelector(`#${triggerId}`);
       const modal = this.querySelector(`#${modalId}`) as HTMLElement | null;

package/src/components/shortcuts/RLAShortcuts.astro

@@ -70,8 +70,8 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
       const body = dialog.querySelector('.rla-shortcuts-body');
       const closeBtn = dialog.querySelector('.rla-shortcuts-close');
 
-      const resolvedCategories = JSON.parse(dialog.dataset.categories || '{}');
-      const categoryOrder = JSON.parse(dialog.dataset.categoryOrder || '[]');
+      const resolvedCategories = JSON.parse(dialog.dataset["categories"] || '{}');
+      const categoryOrder = JSON.parse(dialog.dataset["categoryOrder"] || '[]');
 
       let escapeCleanup: (() => void) | null = null;
 

package/src/components/sidebar/RLASidebar.astro

@@ -65,7 +65,7 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
       <!-- Body -->
       <div class={classes.content} data-slot="content">
         <slot>
-          <Astro.self items={items} t={t} _depth={1} ui={Astro.props.ui} />
+          <Astro.self items={items} t={t} _depth={1} ui={Astro.props["ui"]} />
         </slot>
       </div>
 

package/src/components/splitter/RLASplitter.astro

@@ -85,7 +85,7 @@ await Promise.all(
       const container = this.querySelector("[data-resizable]") as HTMLElement | null;
       if (!container) return;
 
-      const direction = container.dataset.direction ?? "horizontal";
+      const direction = container.dataset["direction"] ?? "horizontal";
       const isHorizontal = direction === "horizontal";
 
       const panels = Array.from(