@rimelight/ui 0.0.35 → 0.0.37

package/src/components/astro/RLAPopover.astro

@@ -21,16 +21,110 @@ const {
 const classes = resolveClasses(popover, {
   placement
 }, useUi("popover", uiProp), className)
-const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
 ---
-<div class={classes.root} data-slot="popover-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger">
+<div class={classes.root} data-slot="popover-container" data-placement={placement} {...rest}>
+  <div class={`${classes.trigger} popover-trigger`} data-slot="trigger">
     <slot name="trigger">
-      {triggerLabel && <button type="button" class="cursor-pointer" popovertarget={popoverId}>{triggerLabel}</button>}
+      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
     </slot>
   </div>
 
-  <div id={popoverId} popover class={classes.content} data-slot="content">
+  <div class={`${classes.content} popover-content hidden`} data-slot="content">
     <slot />
   </div>
 </div>
+
+<script>
+  function initPopovers() {
+    document.querySelectorAll('[data-slot="popover-container"]').forEach(container => {
+      const el = container as any;
+      if (el.dataset && el.dataset.popoverInitialized) return;
+      if (el.dataset) el.dataset.popoverInitialized = "true";
+
+      const trigger = container.querySelector('.popover-trigger');
+      const content = container.querySelector('.popover-content') as HTMLElement;
+
+      if (!trigger || !content) return;
+
+      trigger.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const isOpen = !content.classList.contains('hidden');
+        
+        document.querySelectorAll('.popover-content').forEach(otherContent => {
+          const other = otherContent as HTMLElement;
+          if (other !== content && !other.classList.contains('hidden')) {
+            other.classList.add('hidden');
+            other.style.left = '';
+            other.style.right = '';
+            other.style.transform = '';
+            other.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+          }
+        });
+
+        if (isOpen) {
+          content.classList.add('hidden');
+          content.style.left = '';
+          content.style.right = '';
+          content.style.transform = '';
+          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+        } else {
+          content.classList.remove('hidden');
+
+          // Reset styles to measure original computed bounds
+          content.style.left = '';
+          content.style.right = '';
+          content.style.transform = '';
+
+          const rect = content.getBoundingClientRect();
+          const viewportWidth = window.innerWidth;
+          const placement = container.getAttribute('data-placement') || 'bottom';
+          
+          let shift = 0;
+          const safetyMargin = 24;
+          if (rect.right > viewportWidth - safetyMargin) {
+            shift = (viewportWidth - safetyMargin) - rect.right;
+          } else if (rect.left < safetyMargin) {
+            shift = safetyMargin - rect.left;
+          }
+
+          if (shift !== 0) {
+            const isCentered = (placement === 'top' || placement === 'bottom') && 
+                               !content.classList.contains('right-0') && 
+                               !content.classList.contains('left-0');
+            if (isCentered) {
+              content.style.transform = `translateX(calc(-50% + ${shift}px))`;
+            } else {
+              content.style.transform = `translateX(${shift}px)`;
+            }
+          }
+
+          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: true } }));
+        }
+      });
+
+      content.addEventListener('click', (e) => {
+        e.stopPropagation();
+      });
+    });
+  }
+
+  const win = window as any;
+  if (!win.hasGlobalPopoverListener) {
+    win.hasGlobalPopoverListener = true;
+    document.addEventListener('click', () => {
+      document.querySelectorAll('.popover-content').forEach(content => {
+        const c = content as HTMLElement;
+        if (!c.classList.contains('hidden')) {
+          c.classList.add('hidden');
+          c.style.left = '';
+          c.style.right = '';
+          c.style.transform = '';
+          c.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+        }
+      });
+    });
+  }
+
+  document.addEventListener('astro:page-load', initPopovers);
+  initPopovers();
+</script>

package/src/components/astro/RLAScrollToTop.astro

@@ -64,9 +64,7 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
 </rla-scroll-to-top>
 
 <script>
-  function onClick() {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
+  import { trackScroll, scrollToTop } from "../../utils/scroll"
 
   class RLAScrollToTop extends HTMLElement {
     private cleanupScroll: (() => void) | null = null;
@@ -95,12 +93,12 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
         return this.styleEl;
       };
 
-      const updateStyles = () => {
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
-        const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
+      innerElement.dataset.rlaInstance = String(id);
+
+      button.addEventListener('click', scrollToTop);
 
-        if (scrollTop > threshold) {
+      const unsubscribe = trackScroll({ threshold }, (state) => {
+        if (state.isVisible) {
           innerElement.classList.add('visible');
         } else {
           innerElement.classList.remove('visible');
@@ -113,23 +111,16 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
             background-color: #000;
           }
           .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-progress {
-            --gauge-progress: ${scrollPercentage};
+            --gauge-progress: ${state.scrollPercentage};
             --gauge-stroke-width: ${gaugeBorderWidth}px;
             --gauge-color: var(--color-${color}-500);
           }
         `;
-      };
-
-      innerElement.dataset.rlaInstance = String(id);
-
-      button.addEventListener('click', onClick);
-
-      window.addEventListener('scroll', updateStyles, { passive: true });
-      updateStyles();
+      });
 
       this.cleanupScroll = () => {
-        button.removeEventListener('click', onClick);
-        window.removeEventListener('scroll', updateStyles);
+        button.removeEventListener('click', scrollToTop);
+        unsubscribe();
         if (this.styleEl) {
           this.styleEl.remove();
           this.styleEl = null;

package/src/components/astro/RLASelect.astro

@@ -51,7 +51,7 @@ const initialLabel = selectedItem ? selectedItem.label : ""
         data-select-trigger
       >
         <span data-select-value>{initialLabel || placeholder}</span>
-        <span class="i-lucide-chevron-down opacity-50" />
+        <span class="i-lucide-chevron-down ml-2 size-4 opacity-50" />
       </button>
 
       <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
@@ -78,61 +78,66 @@ const initialLabel = selectedItem ? selectedItem.label : ""
 <script>
   class RLASelect extends HTMLElement {
     private selectCleanup: (() => void) | null = null;
+    private initTimeout: any = null;
 
     connectedCallback() {
       this.style.display = 'contents';
-      const wrapper = this.querySelector("[data-select-wrapper]") as HTMLElement | null;
-      if (!wrapper) return;
-
-      const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
-      const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
-      const items = wrapper.querySelectorAll<HTMLElement>("[data-select-item]");
-      const valueSpan = wrapper.querySelector("[data-select-value]");
-      const hiddenInput = this.querySelector("[data-select-hidden-input]") as HTMLInputElement | null;
-
-      if (!trigger || !dropdown) return;
-
-      const onTriggerClick = (e: MouseEvent) => {
-        e.stopPropagation();
-        dropdown.classList.toggle("hidden");
-      };
-      trigger.addEventListener("click", onTriggerClick);
-
-      const itemCleanups: (() => void)[] = [];
-      items.forEach(item => {
-        const onItemClick = (e: MouseEvent) => {
+      this.initTimeout = setTimeout(() => {
+        const wrapper = this.querySelector("[data-select-wrapper]") as HTMLElement | null;
+        if (!wrapper) return;
+
+        const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
+        const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
+        const items = wrapper.querySelectorAll<HTMLElement>("[data-select-item]");
+        const valueSpan = wrapper.querySelector("[data-select-value]");
+        const hiddenInput = this.querySelector("[data-select-hidden-input]") as HTMLInputElement | null;
+
+        if (!trigger || !dropdown) return;
+
+        const onTriggerClick = (e: MouseEvent) => {
           e.stopPropagation();
-          const val = (item as HTMLElement).dataset.value || "";
-          const label = (item as HTMLElement).dataset.label || "";
-          
-          if (hiddenInput) {
-            hiddenInput.value = val;
-            hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
-          }
-          if (valueSpan) valueSpan.textContent = label;
-          
-          items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
-          item.querySelector("[data-check-icon]")?.classList.remove("hidden");
-          
+          dropdown.classList.toggle("hidden");
+        };
+        trigger.addEventListener("click", onTriggerClick);
+
+        const itemCleanups: (() => void)[] = [];
+        items.forEach(item => {
+          const onItemClick = (e: MouseEvent) => {
+            e.stopPropagation();
+            const val = (item as HTMLElement).dataset.value || "";
+            const label = (item as HTMLElement).dataset.label || "";
+            if (hiddenInput) {
+              hiddenInput.value = val;
+              hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+            }
+            if (valueSpan) valueSpan.textContent = label;
+            
+            items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
+            item.querySelector("[data-check-icon]")?.classList.remove("hidden");
+            
+            dropdown.classList.add("hidden");
+          };
+          item.addEventListener("click", onItemClick);
+          itemCleanups.push(() => item.removeEventListener("click", onItemClick));
+        });
+
+        const onDocumentClick = () => {
           dropdown.classList.add("hidden");
         };
-        item.addEventListener("click", onItemClick);
-        itemCleanups.push(() => item.removeEventListener("click", onItemClick));
-      });
-
-      const onDocumentClick = () => {
-        dropdown.classList.add("hidden");
-      };
-      document.addEventListener("click", onDocumentClick);
-
-      this.selectCleanup = () => {
-        trigger.removeEventListener("click", onTriggerClick);
-        itemCleanups.forEach(fn => fn());
-        document.removeEventListener("click", onDocumentClick);
-      };
+        document.addEventListener("click", onDocumentClick);
+
+        this.selectCleanup = () => {
+          trigger.removeEventListener("click", onTriggerClick);
+          itemCleanups.forEach(fn => fn());
+          document.removeEventListener("click", onDocumentClick);
+        };
+      }, 0);
     }
 
     disconnectedCallback() {
+      if (this.initTimeout) {
+        clearTimeout(this.initTimeout);
+      }
       if (this.selectCleanup) {
         this.selectCleanup();
         this.selectCleanup = null;

package/src/components/astro/RLASidebar.astro

@@ -41,7 +41,7 @@ function normalizeBadge(badge: any) {
     const v = badge.variant.toLowerCase()
     if (v === "tip" || v === "success") { color = "success"; variant = "soft" }
     else if (v === "caution" || v === "warning") { color = "warning"; variant = "soft" }
-    else if (v === "danger") { color = "danger"; variant = "soft" }
+    else if (v === "error") { color = "error"; variant = "soft" }
     else if (v === "note" || v === "default") { color = "primary"; variant = "soft" }
   }
   return { text: badge.text || "", color, variant: variant as "solid" | "outline" | "soft", class: badge.class || "" }

package/src/components/astro/RLATableOfContents.astro

@@ -15,6 +15,7 @@ const {
   tableOfContents: tableOfContentsConfig,
   ui: uiProp,
   class: className,
+  collapsible = false,
   containerSelector = ".markdown-content",
   ...rest
 } = Astro.props as TableOfContentsProps
@@ -36,32 +37,62 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
 ---
 
 {tableOfContentsConfig !== false && filteredHeadings.length > 0 && (
-  <div class={classes.root} data-slot="root" data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
-    <div class={classes.container} data-slot="container">
-      <h4 class={classes.title} data-slot="title">On this page</h4>
-      <ul class:list={[classes.list, "mt-2xl flex flex-col gap-3xs"]} data-slot="list">
-        {filteredHeadings.map(heading => (
-          <li
-            class:list={[
-              classes.item,
-              heading.depth === 2 && "pl-3xs",
-              heading.depth === 3 && "pl-6",
-              heading.depth >= 4 && "pl-9"
-            ]}
-            data-slot="item"
-          >
-            <a
-              href={`#${heading.slug}`}
-              class:list={["toc-link", classes.link]}
-              data-slot="link"
+  collapsible ? (
+    <details class:list={[className]} data-rla-toc-collapsible data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
+      <summary class="flex items-center justify-between gap-3 px-4 h-10 text-sm font-medium text-foreground cursor-pointer select-none hover:bg-muted/40 transition-colors list-none">
+        <span class="flex items-center gap-2">
+          <span class="i-lucide-list size-4 text-primary shrink-0" />
+          <span>On this page</span>
+        </span>
+        <span class="rla-toc-chevron i-lucide-chevron-down size-4 text-muted-foreground shrink-0 transition-transform duration-200" />
+      </summary>
+      <div class="px-4 pt-3 max-h-[40vh] overflow-y-auto border-t border-border/50 bg-background">
+        <ul class="flex flex-col gap-0.5 pb-8">
+          {filteredHeadings.map(heading => (
+            <li class:list={[heading.depth === 3 && "pl-4"]}>
+              <a
+                href={`#${heading.slug}`}
+                class:list={[
+                  "toc-link block py-1.5 text-sm transition-colors hover:text-primary no-underline",
+                  heading.depth === 2 ? "text-foreground font-medium" : "text-muted-foreground"
+                ]}
+                data-rla-toc-link
+              >
+                {heading.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </details>
+  ) : (
+    <div class={classes.root} data-slot="root" data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
+      <div class={classes.container} data-slot="container">
+        <h4 class={classes.title} data-slot="title">On this page</h4>
+        <ul class:list={[classes.list, "mt-2xl flex flex-col gap-3xs"]} data-slot="list">
+          {filteredHeadings.map(heading => (
+            <li
+              class:list={[
+                classes.item,
+                heading.depth === 2 && "pl-3xs",
+                heading.depth === 3 && "pl-6",
+                heading.depth >= 4 && "pl-9"
+              ]}
+              data-slot="item"
             >
-              <span class={classes.linkText} data-slot="link-text">{heading.text}</span>
-            </a>
-          </li>
-        ))}
-      </ul>
+              <a
+                href={`#${heading.slug}`}
+                class:list={["toc-link", classes.link]}
+                data-slot="link"
+              >
+                <span class={classes.linkText} data-slot="link-text">{heading.text}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
-  </div>
+  )
 )}
 
 <style is:global>
@@ -73,10 +104,23 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
 
 <script is:inline>
   (function() {
-    var root = document.querySelector('[data-container-selector]');
-    if (!root) return;
+    // ── Collapsible TOC behaviour (chevron + close-on-link-click) ──
+    function initCollapsibleTocs() {
+      document.querySelectorAll('[data-rla-toc-collapsible]').forEach(function(details) {
+        var chevron = details.querySelector('.rla-toc-chevron');
+        details.addEventListener('toggle', function() {
+          if (chevron) chevron.style.transform = details.open ? 'rotate(180deg)' : '';
+        });
+        details.querySelectorAll('[data-rla-toc-link]').forEach(function(link) {
+          link.addEventListener('click', function() { details.open = false; });
+        });
+      });
+    }
 
+    // ── Active-heading tracker (desktop sidebar) ──
     function updateActiveHeading() {
+      var root = document.querySelector('[data-slot="root"][data-container-selector]');
+      if (!root) return;
       var links = root.querySelectorAll(".toc-link");
       if (links.length === 0) return;
 
@@ -102,8 +146,13 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
       }
     }
 
+    initCollapsibleTocs();
     updateActiveHeading();
+
     window.addEventListener("scroll", updateActiveHeading, { passive: true });
-    document.addEventListener("astro:after-swap", updateActiveHeading);
+    document.addEventListener("astro:after-swap", function() {
+      initCollapsibleTocs();
+      updateActiveHeading();
+    });
   })();
 </script>

package/src/components/astro/RLAThemeSelector.astro

@@ -28,6 +28,7 @@ const classes = resolveClasses(themeSelector, {
             size={size}
             class:list={["theme-toggle-button", classes.root]}
             variant="ghost"
+            square
             aria-label="Toggle theme"
     >
         <span class:list={[classes.sun]} />

package/src/components/astro/RLAToast.astro

@@ -24,12 +24,12 @@ const {
 } = Astro.props as ToastProps
 
 const classes = resolveClasses(toast, {
-  variant: (variant === "success" || variant === "destructive") ? variant : "default"
+  variant: ["success", "error", "warning", "info"].includes(variant ?? "") ? variant : "default"
 }, useUi("toast", uiProp), className)
 
 const variantIcons: Record<string, string> = {
   default: "i-lucide-bell",
-  destructive: "i-lucide-alert-circle",
+  error: "i-lucide-alert-circle",
   success: "i-lucide-check-circle-2",
   warning: "i-lucide-alert-triangle",
   info: "i-lucide-info",

package/src/components/vue/RLVScrollToTop.vue

@@ -3,8 +3,8 @@ import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { ScrollToTopProps } from "../../types/components/scroll-to-top"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
-import { useScrollToTop } from "../../composables/useScrollToTop"
-import { computed, onMounted, onUnmounted, watch, useAttrs } from "vue"
+import { trackScroll, scrollToTop as scrollToTopFn } from "../../utils"
+import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from "vue"
 
 const attrs = useAttrs()
 const scrollToTop = scv(scrollToTopTheme)
@@ -21,13 +21,8 @@ const {
 
 const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
 
-const {
-  isVisible,
-  scrollPercentage,
-  scrollToTop: scrollToTopFn
-} = useScrollToTop({
-  threshold
-})
+const isVisible = ref(false)
+const scrollPercentage = ref(0)
 
 const instanceId = `rla-vue-${Math.random().toString(36).slice(2, 8)}`
 const gaugeBorderWidth = progressWidth * 0.5
@@ -49,16 +44,23 @@ function updateCssVars() {
 
 watch(scrollPercentage, updateCssVars)
 
+let unsubscribe: (() => void) | null = null
+
 onMounted(() => {
   const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute("content") ?? ""
   styleEl = document.createElement("style")
   if (nonce) styleEl.setAttribute("nonce", nonce)
   document.head.appendChild(styleEl)
-  updateCssVars()
+
+  unsubscribe = trackScroll({ threshold }, (state) => {
+    isVisible.value = state.isVisible
+    scrollPercentage.value = state.scrollPercentage
+  })
 })
 
 onUnmounted(() => {
   if (styleEl) styleEl.remove()
+  unsubscribe?.()
 })
 </script>
 

package/src/components/vue/RLVToast.vue

@@ -22,7 +22,7 @@ const resolvedClasses = computed(() =>
 
 const variantIcons: Record<string, string> = {
   default: "i-lucide-bell",
-  destructive: "i-lucide-alert-circle",
+  error: "i-lucide-alert-circle",
   success: "i-lucide-check-circle-2",
   warning: "i-lucide-alert-triangle",
   info: "i-lucide-info"

package/src/components/vue/RLVToaster.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
-import { useToast } from "../../composables/useToast"
+import { ref, onMounted, onUnmounted } from "vue"
+import { toastsStore, removeToast } from "../../utils"
 import RLVToast from "./RLVToast.vue"
 
-const { toasts, remove } = useToast()
+const toasts = ref(toastsStore.get())
+let unsubscribe: (() => void) | null = null
+
+onMounted(() => {
+  unsubscribe = toastsStore.subscribe((val) => {
+    toasts.value = val
+  })
+})
+
+onUnmounted(() => {
+  unsubscribe?.()
+})
 </script>
 
 <template>
@@ -22,7 +34,7 @@ const { toasts, remove } = useToast()
         :key="toast.id"
         v-bind="toast"
         class="pointer-events-auto"
-        @close="remove"
+        @close="removeToast"
       />
     </TransitionGroup>
   </div>

package/src/config/index.ts

@@ -1,2 +1 @@
 export * from "./site.config"
-export * from "./security"

package/src/integrations/index.ts

@@ -1,3 +1,2 @@
-export * from "./sri"
 export { ui } from "./ui"
 export type { UIOptions, UIConfigOverrides } from "./ui"

package/src/integrations/ui.ts

@@ -1,7 +1,7 @@
 import type { AstroIntegration } from "astro"
 import UnoCSS from "unocss/astro"
 import vue from "@astrojs/vue"
-import defu from "defu"
+import { merge } from "../utils/merge"
 import { defaultUIConfig } from "../themes"
 import type { ComponentTheme } from "../utils/defineTheme"
 import rimelightUiPreset, {
@@ -11,7 +11,6 @@ import rimelightUiPreset, {
   type RimelightPresetOptions
 } from "../presets"
 import { extractAllMeta } from "../docs/extractAll"
-import virtual from "vite-plugin-virtual"
 
 export interface CategoryConfig {
   label: string
@@ -44,8 +43,8 @@ export interface UIOptions {
       }
   >
   /**
-   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
-   * wins).
+   * Global UI overrides applied to all components. Merged with defaults via our custom recursive
+   * merge utility (first arg wins).
    */
   ui?: UIConfigOverrides
   /**
@@ -106,7 +105,7 @@ export interface UIOptions {
  *   })
  */
 export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
+  const resolvedUI = merge(options.ui ?? {}, defaultUIConfig)
   const coreColors = [
     "primary",
     "secondary",
@@ -149,22 +148,24 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
         },
         plugins: [
           {
-            name: "vite-plugin-rimelight-ui-config",
+            name: "vite-plugin-rimelight-ui-virtual",
             enforce: "pre",
             resolveId(id: string) {
-              if (id === virtualModuleId) return resolvedVirtualModuleId
+              if (id === virtualModuleId || id === "virtual:rimelight-ui-docs-meta") {
+                return "\0" + id
+              }
               return null
             },
             load(id: string) {
               if (id === resolvedVirtualModuleId) {
                 return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
               }
+              if (id === "\0virtual:rimelight-ui-docs-meta") {
+                return `export default ${JSON.stringify(docsMeta)}`
+              }
               return null
             }
-          },
-          virtual({
-            "virtual:rimelight-ui-docs-meta": `export default ${JSON.stringify(docsMeta)}`
-          })
+          }
         ]
       }
     })

package/src/themes/link-group.theme.ts

@@ -5,7 +5,7 @@ export const createLinkGroupTheme = () =>
     slots: ["root", "title", "list", "item", "link"],
     base: {
       root: "flex flex-col gap-4",
-      title: "font-bold text-sm uppercase tracking-wider text-neutral-500 pl-2.5",
+      title: "font-bold text-sm uppercase tracking-wider text-neutral-500",
       list: "flex flex-col gap-2",
       item: "",
       link: "text-sm text-muted-foreground hover:text-accent-foreground transition-colors"

package/src/themes/locale-selector.theme.ts

@@ -5,7 +5,7 @@ export const createLocaleSelectorTheme = () =>
     base: {
       root: "inline-flex flex-col gap-1.5",
       label: "text-xs font-semibold text-muted select-none",
-      wrapper: "relative inline-block w-full",
+      wrapper: "relative inline-block",
       select:
         "w-full appearance-none font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-emerald-500/40 cursor-pointer pr-10",
       option: "bg-neutral-900 text-white selection:bg-neutral-800",