@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLALayoutGrid.astro

@@ -1,395 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LayoutGridProps } from "../../types"
-import layoutGridThemeDefault, { createLayoutGridTheme } from "../../themes/layout-grid.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const layoutGridTheme = uiConfig.colors ? createLayoutGridTheme() : layoutGridThemeDefault
-const layoutGrid = scv(layoutGridTheme)
-
-const {
-  cols = 4,
-  smCols = 4,
-  mdCols = 8,
-  lgCols = 12,
-  xlCols = 12,
-  smBreakpoint = 640,
-  mdBreakpoint = 768,
-  lgBreakpoint = 1024,
-  xlBreakpoint = 1280,
-  gutter = [0.75, 1, 1.5, 1.5, 1.5],
-  margin = [0.75, 1, 1.5, 1.5, 1.5],
-  gridColor = "#ff0000",
-  gridOpacity = 0.1,
-  maxWidth = "1440px",
-  innerMaxWidth = "768px",
-  innerGridColor = "#10b981",
-  innerGridOpacity = 0.1,
-  showInnerBackground = true,
-  showBackground = true,
-  showFullWidth = true,
-  fullWidthGridColor = "#3b82f6",
-  fullWidthGridOpacity = 0.05,
-  showFullWidthBackground = true,
-  zIndex = 1000,
-  shortcut = "meta_shift_g",
-  devOnly = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LayoutGridProps
-
-const isDev = import.meta.env.DEV
-const shouldRender = !devOnly || isDev
-
-const normalizeArray = (val: number | number[] | undefined, defaultVal: number): number[] => {
-  if (val === undefined) return [defaultVal, defaultVal, defaultVal, defaultVal, defaultVal]
-  if (!Array.isArray(val)) return [val, val, val, val, val]
-  const arr = [...val]
-  while (arr.length < 5) {
-    const lastVal = arr[arr.length - 1]
-    arr.push(lastVal !== undefined ? lastVal : defaultVal)
-  }
-  return arr
-}
-
-const gutterArray = normalizeArray(gutter, 1)
-const marginArray = normalizeArray(margin, 1)
-
-const classes = resolveClasses(layoutGrid, {}, useUi("layoutGrid", uiProp), className)
----
-
-{shouldRender && (
-  <rla-layout-grid
-    class={classes.root}
-    data-cols={cols}
-    data-sm-cols={smCols}
-    data-md-cols={mdCols}
-    data-lg-cols={lgCols}
-    data-xl-cols={xlCols}
-    data-sm-breakpoint={smBreakpoint}
-    data-md-breakpoint={mdBreakpoint}
-    data-lg-breakpoint={lgBreakpoint}
-    data-xl-breakpoint={xlBreakpoint}
-    data-gutter={JSON.stringify(gutterArray)}
-    data-margin={JSON.stringify(marginArray)}
-    data-grid-color={gridColor}
-    data-grid-opacity={gridOpacity}
-    data-show-background={showBackground ? "true" : "false"}
-    data-max-width={maxWidth}
-    data-inner-max-width={innerMaxWidth}
-    data-inner-color={innerGridColor}
-    data-inner-opacity={innerGridOpacity}
-    data-show-inner-background={showInnerBackground ? "true" : "false"}
-    data-show-full-width={showFullWidth ? "true" : "false"}
-    data-full-width-color={fullWidthGridColor}
-    data-full-width-opacity={fullWidthGridOpacity}
-    data-show-full-width-background={showFullWidthBackground ? "true" : "false"}
-    data-shortcut={shortcut}
-    {...rest}
-  >
-    <aside class={classes.overlay} data-slot="overlay" style={`z-index: ${zIndex}; display: none;`} id="rla-layout-grid-overlay">
-      <!-- Container holding absolutely-positioned viewport columns -->
-      <div style="position: relative; width: 100%; height: 100%;" data-slot="columns-container"></div>
-      <div data-slot="indicator" style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.85); color: #fff; padding: 6px 12px; border-radius: 6px; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: bold; pointer-events: none; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.5); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px;"></div>
-    </aside>
-  </rla-layout-grid>
-)}
-
-<script>
-  import { defineShortcuts } from "../../utils/shortcuts"
-
-  function hexToRgba(hex: string, alpha: number): string {
-    const cleanHex = hex.replace('#', '')
-    const num = parseInt(cleanHex, 16)
-    const r = (num >> 16) & 255
-    const g = (num >> 8) & 255
-    const b = num & 255
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`
-  }
-
-  class RLALayoutGrid extends HTMLElement {
-    private isVisible = false
-    private gridElement: HTMLElement | null = null
-    private columnsContainer: HTMLElement | null = null
-    private indicatorElement: HTMLElement | null = null
-    private resizeObserver: ResizeObserver | null = null
-    private shortcutsCleanup: (() => void) | null = null
-    private currentBreakpoint: 'base' | 'sm' | 'md' | 'lg' | 'xl' = 'base'
-
-    constructor() {
-      super()
-      this.handleResize = this.handleResize.bind(this)
-    }
-
-    connectedCallback() {
-      this.style.display = 'contents'
-      this.gridElement = this.querySelector('[data-slot="overlay"], #rla-layout-grid-overlay') as HTMLElement
-      this.columnsContainer = this.querySelector('[data-slot="columns-container"]') as HTMLElement
-      this.indicatorElement = this.querySelector('[data-slot="indicator"]') as HTMLElement
-
-      // Restore visibility state from localStorage
-      this.isVisible = localStorage.getItem('rla-grid-visible') === 'true'
-      if (this.gridElement) {
-        this.gridElement.style.display = this.isVisible ? 'block' : 'none'
-      }
-
-      // Initialize ResizeObserver to monitor viewport changes
-      this.resizeObserver = new ResizeObserver(this.handleResize)
-      this.resizeObserver.observe(document.documentElement)
-
-      // Initialize grid
-      this.updateGrid()
-
-      // Set up shortcuts using the library system
-      const shortcutKey = this.dataset.shortcut || 'meta_shift_g'
-      this.shortcutsCleanup = defineShortcuts({
-        [shortcutKey]: {
-          handler: (e) => {
-            e.preventDefault()
-            this.toggleGrid()
-          },
-          label: "Toggle Layout Grid",
-          description: "Show or hide the development layout grid guide overlay",
-          category: "development"
-        }
-      })
-    }
-
-    disconnectedCallback() {
-      this.resizeObserver?.disconnect()
-      if (this.shortcutsCleanup) {
-        this.shortcutsCleanup()
-        this.shortcutsCleanup = null
-      }
-    }
-
-    private handleResize() {
-      const width = document.documentElement.clientWidth
-      const smBreakpoint = parseInt(this.dataset.smBreakpoint || '640')
-      const mdBreakpoint = parseInt(this.dataset.mdBreakpoint || '768')
-      const lgBreakpoint = parseInt(this.dataset.lgBreakpoint || '1024')
-      const xlBreakpoint = parseInt(this.dataset.xlBreakpoint || '1280')
-
-      let newBreakpoint: 'base' | 'sm' | 'md' | 'lg' | 'xl' = 'base'
-
-      if (width >= xlBreakpoint) {
-        newBreakpoint = 'xl'
-      } else if (width >= lgBreakpoint) {
-        newBreakpoint = 'lg'
-      } else if (width >= mdBreakpoint) {
-        newBreakpoint = 'md'
-      } else if (width >= smBreakpoint) {
-        newBreakpoint = 'sm'
-      }
-
-      this.currentBreakpoint = newBreakpoint
-      this.updateGrid()
-    }
-
-    private updateGrid() {
-      if (!this.columnsContainer) return
-
-      const width = document.documentElement.clientWidth
-      const smBreakpoint = parseInt(this.dataset.smBreakpoint || '640')
-      const mdBreakpoint = parseInt(this.dataset.mdBreakpoint || '768')
-      const lgBreakpoint = parseInt(this.dataset.lgBreakpoint || '1024')
-      const xlBreakpoint = parseInt(this.dataset.xlBreakpoint || '1280')
-
-      let breakpointIndex = 0
-      let colCount = parseInt(this.dataset.cols || '4')
-      let breakpointThreshold = 0
-
-      switch (this.currentBreakpoint) {
-        case 'xl':
-          breakpointIndex = 4
-          colCount = parseInt(this.dataset.xlCols || '12')
-          breakpointThreshold = xlBreakpoint
-          break
-        case 'lg':
-          breakpointIndex = 3
-          colCount = parseInt(this.dataset.lgCols || '12')
-          breakpointThreshold = lgBreakpoint
-          break
-        case 'md':
-          breakpointIndex = 2
-          colCount = parseInt(this.dataset.mdCols || '8')
-          breakpointThreshold = mdBreakpoint
-          break
-        case 'sm':
-          breakpointIndex = 1
-          colCount = parseInt(this.dataset.smCols || '4')
-          breakpointThreshold = smBreakpoint
-          break
-        default:
-          breakpointIndex = 0
-          colCount = parseInt(this.dataset.cols || '4')
-          breakpointThreshold = 0
-          break
-      }
-
-      const gutterArray = JSON.parse(this.dataset.gutter || '[1,1,1,1,1]')
-      const marginArray = JSON.parse(this.dataset.margin || '[1,1,1,1,1]')
-
-      const gutterValue = gutterArray[breakpointIndex] ?? gutterArray[gutterArray.length - 1]
-      const marginValue = marginArray[breakpointIndex] ?? marginArray[marginArray.length - 1]
-
-      const gridColor = this.dataset.gridColor || '#ff0000'
-      const gridOpacity = parseFloat(this.dataset.gridOpacity || '0.1')
-      const showBackground = this.dataset.showBackground === 'true'
-
-      const showFullWidth = this.dataset.showFullWidth !== 'false'
-      const fullWidthColor = this.dataset.fullWidthColor || '#3b82f6'
-      const fullWidthOpacity = parseFloat(this.dataset.fullWidthOpacity || '0.05')
-      const showFullWidthBackground = this.dataset.showFullWidthBackground === 'true'
-
-      // Convert rem spacings to pixels dynamically based on root font size
-      const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
-      const marginPx = marginValue * rootFontSize
-      const gutterPx = gutterValue * rootFontSize
-
-      // Calculate max width boundaries
-      const maxWidthVal = this.dataset.maxWidth || '1440px'
-      let maxWidthPx = width
-      if (!maxWidthVal.includes('vw')) {
-        maxWidthPx = parseInt(maxWidthVal)
-      }
-
-      const innerMaxWidthVal = this.dataset.innerMaxWidth || '768px'
-      let innerMaxWidthPx = width
-      if (!innerMaxWidthVal.includes('vw')) {
-        innerMaxWidthPx = parseInt(innerMaxWidthVal)
-      }
-      const innerGridColor = this.dataset.innerColor || '#10b981'
-      const innerGridOpacity = parseFloat(this.dataset.innerOpacity || '0.1')
-      const showInnerBackground = this.dataset.showInnerBackground === 'true'
-
-      // Calculate grid properties based on container width or screen width
-      const activeWidth = width > maxWidthPx ? maxWidthPx : width
-      const innerWidth = activeWidth - 2 * marginPx
-      const colWidth = (innerWidth - (colCount - 1) * gutterPx) / colCount
-
-      // Center container boundaries (where we switch colors)
-      const containerLeft = (width - maxWidthPx) / 2
-      const containerRight = (width + maxWidthPx) / 2
-
-      // Clear container
-      this.columnsContainer.innerHTML = ''
-
-      // Set CSS custom properties on the host element and document root
-      this.style.setProperty('--rla-grid-cols', colCount.toString())
-      this.style.setProperty('--rla-grid-gap', `${gutterPx}px`)
-      this.style.setProperty('--rla-grid-margin', `${marginPx}px`)
-      this.style.setProperty('--rla-grid-max-width', maxWidthVal)
-
-      document.documentElement.style.setProperty('--rla-grid-cols', colCount.toString())
-      document.documentElement.style.setProperty('--rla-grid-gap', `${gutterPx}px`)
-      document.documentElement.style.setProperty('--rla-grid-gutter', `${gutterPx}px`)
-      document.documentElement.style.setProperty('--rla-grid-col-width', `${colWidth}px`)
-      document.documentElement.style.setProperty('--rla-grid-margin', `${marginPx}px`)
-      document.documentElement.style.setProperty('--rla-grid-max-width', maxWidthVal)
-
-      const containerStartX = width > maxWidthPx ? containerLeft + marginPx : marginPx
-      const step = colWidth + gutterPx
-
-      // Calculate total columns including outer ones
-      let totalCols = colCount
-      if (width > maxWidthPx && showFullWidth) {
-        let leftX = marginPx
-        while (leftX + colWidth < containerLeft) {
-          totalCols++
-          leftX += step
-        }
-        let rightX = width - marginPx - colWidth
-        while (rightX > containerRight) {
-          totalCols++
-          rightX -= step
-        }
-      }
-
-      if (this.indicatorElement) {
-        this.indicatorElement.innerHTML = `<span style="color: #3b82f6;">${this.currentBreakpoint.toUpperCase()} (${breakpointThreshold}px)</span> <span style="opacity: 0.35;">|</span> <span>${width}px</span> <span style="opacity: 0.35;">|</span> <span style="color: #ef4444;">${totalCols} Cols</span>`
-      }
-
-
-
-      // Create centered CSS Grid container using the exact same classes as the page container
-      const gridWrapper = document.createElement('div')
-      gridWrapper.className = "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl gap-xs sm:gap-md md:gap-xl lg:gap-xl h-full box-border grid"
-      gridWrapper.style.gridTemplateColumns = 'repeat(var(--rla-grid-cols), 1fr)'
-
-      const innerLeft = (width - innerMaxWidthPx) / 2
-      const innerRight = (width + innerMaxWidthPx) / 2
-
-      // Add container columns
-      for (let i = 0; i < colCount; i++) {
-        const colX = containerStartX + i * step
-        const colRight = colX + colWidth
-        const isInner = (colX >= innerLeft - 1) && (colRight <= innerRight + 1)
-
-        const col = document.createElement('div')
-        col.className = 'grid-column'
-        const color = isInner ? innerGridColor : gridColor
-        const opacity = isInner ? innerGridOpacity : gridOpacity
-        const bg = isInner ? showInnerBackground : showBackground
-
-        Object.assign(col.style, {
-          height: '100%',
-          borderInline: `1px solid ${color}`,
-          boxSizing: 'border-box',
-          backgroundColor: bg ? hexToRgba(color, opacity) : 'transparent'
-        })
-        gridWrapper.appendChild(col)
-      }
-
-      this.columnsContainer.appendChild(gridWrapper)
-
-      // If screen is wider than container, draw outer columns using absolute positioning
-      if (width > maxWidthPx && showFullWidth) {
-        const drawOuterColumn = (x: number) => {
-          const col = document.createElement('div')
-          col.className = 'rla-outer-column'
-          Object.assign(col.style, {
-            position: 'absolute',
-            top: '0',
-            left: `${x}px`,
-            width: `${colWidth}px`,
-            height: '100%',
-            borderInline: `1px solid ${fullWidthColor}`,
-            boxSizing: 'border-box',
-            backgroundColor: showFullWidthBackground ? hexToRgba(fullWidthColor, fullWidthOpacity) : 'transparent'
-          })
-          this.columnsContainer!.appendChild(col)
-        }
-
-        // Draw left columns starting from the viewport edge and going right
-        let leftX = marginPx
-        while (leftX + colWidth < containerLeft) {
-          drawOuterColumn(leftX)
-          leftX += step
-        }
-
-        // Draw right columns starting from the viewport edge and going left
-        let rightX = width - marginPx - colWidth
-        while (rightX > containerRight) {
-          drawOuterColumn(rightX)
-          rightX -= step
-        }
-      }
-    }
-
-    toggleGrid() {
-      this.isVisible = !this.isVisible
-      localStorage.setItem('rla-grid-visible', this.isVisible ? 'true' : 'false')
-      if (this.gridElement) {
-        this.gridElement.style.display = this.isVisible ? 'block' : 'none'
-      }
-    }
-  }
-
-  if (!customElements.get('rla-layout-grid')) {
-    customElements.define('rla-layout-grid', RLALayoutGrid)
-  }
-</script>

package/src/components/astro/RLALink.astro

@@ -1,42 +0,0 @@
----
-import type { LinkProps } from "../../types"
-
-const {
-  to,
-  href,
-  external,
-  ariaLabel,
-  externalIcon,
-  target,
-  rel,
-  trailingIcon,
-  noExternalIcon,
-  class: className,
-  ...rest
-} = Astro.props as LinkProps & { noExternalIcon?: boolean }
-
-const linkHref = href || (typeof to === 'string' ? to : undefined);
-
-const isExternal = !!(external || (linkHref && (linkHref.startsWith('http://') || linkHref.startsWith('https://') || linkHref.startsWith('//'))));
-
-const linkTarget = target || (isExternal ? "_blank" : undefined);
-const linkRel = rel || (isExternal ? "noopener noreferrer" : undefined);
-
-const showExternalIcon = isExternal && !noExternalIcon && !trailingIcon ? (externalIcon || "i-lucide-external-link") : trailingIcon;
----
-<a
-  href={linkHref}
-  target={linkTarget}
-  rel={linkRel}
-  aria-label={ariaLabel}
-  class={className}
-  {...rest}
->
-  <slot />
-  {showExternalIcon && (
-    <span class={showExternalIcon} aria-hidden="true" />
-  )}
-  {isExternal && !ariaLabel && (
-    <span class="sr-only"> (opens in a new tab)</span>
-  )}
-</a>

package/src/components/astro/RLALinkGroup.astro

@@ -1,100 +0,0 @@
----
-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/RLAListbox.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ListboxProps } from "../../types"
-import listboxThemeDefault, { createListboxTheme } from "../../themes/listbox.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const listboxTheme = uiConfig.colors ? createListboxTheme() : listboxThemeDefault
-
-const listbox = scv(listboxTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ListboxProps
-
-const classes = resolveClasses(listbox, {}, useUi("listbox", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLALocaleSelector.astro

@@ -1,131 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LocaleSelectorProps } from "../../types"
-import localeSelectorThemeDefault, { createLocaleSelectorTheme } from "../../themes/locale-selector.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n"
-import RLASelect from "./RLASelect.astro"
-
-const uiConfig = getUIConfig()
-const localeSelectorTheme = uiConfig.colors ? createLocaleSelectorTheme() : localeSelectorThemeDefault
-
-const localeSelector = scv(localeSelectorTheme)
-
-const {
-    locales,
-    variant = "default",
-    size = "md",
-    ui: uiProp,
-    class: className,
-    ...rest
-} = Astro.props as LocaleSelectorProps;
-
-const classes = resolveClasses(localeSelector, {
-    variant,
-    size
-}, useUi("localeSelector", uiProp), className);
-
-const currentLocale = Astro.currentLocale ?? 'en';
-
-const processedLocales = locales && locales.length > 0
-    ? locales.map(item => typeof item === 'string' ? { code: item, label: item } : item)
-    : [...new Map(getRelativeLocaleUrlList().map(url => {
-        const locale = url.split('/')[1] || 'en';
-        return [locale, { code: locale, label: locale }];
-    })).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) => {
-    const basePath = Astro.url.pathname.replace(/^\/[^/]+/, '') || '/';
-    const 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 || "";
-
-// Prefix utility classes in classes.select with `!` to cleanly override conflicting styles in RLASelect's base trigger
-// Also remove `pr-` classes which were meant for absolute positioned native select icons
-const overrideTriggerClass = classes.select
-    ? classes.select
-        .split(" ")
-        .map(cls => {
-            if (!cls) return "";
-            if (cls.startsWith("pr-") || cls.startsWith("!pr-")) return ""; // Strip padding-right
-            if (cls.includes(":")) {
-                const parts = cls.split(":");
-                const state = parts.slice(0, -1).join(":");
-                const baseCls = parts[parts.length - 1];
-                return `${state}:!${baseCls}`;
-            }
-            return `!${cls}`;
-        })
-        .filter(Boolean)
-        .join(" ")
-    : "";
-
-const gapClass = size === "sm" ? "gap-1.5" : size === "lg" ? "gap-3" : "gap-2";
-
-const selectUi = {
-    root: "!w-fit !inline-flex",
-    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)]"
-};
----
-
-<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>
-</rla-locale-selector>
-
-<script>
-    class RLALocaleSelector extends HTMLElement {
-        connectedCallback() {
-            this.style.display = 'contents';
-            this.addEventListener('change', (event) => {
-                const target = event.target as HTMLInputElement;
-                if (target && target.hasAttribute('data-select-hidden-input')) {
-                    const targetUrl = target.value;
-                    if (targetUrl) {
-                        window.location.href = targetUrl;
-                    }
-                }
-            });
-        }
-    }
-
-    if (!customElements.get('rla-locale-selector')) {
-        customElements.define('rla-locale-selector', RLALocaleSelector);
-    }
-</script>