luna-plus 0.0.40 → 0.0.43

package/dist/Dropdown/Dropdown.svelte

@@ -29,10 +29,12 @@
   let rootEl = $state<HTMLElement | null>(null);
   let popperEl = $state<HTMLElement | null>(null);
   let adjustedPlacement = $state<DropdownPlacement | null>(null);
+  let horizontalOffset = $state<number | null>(null);
+  let arrowOffset = $state<number | null>(null);
   let showTimer: ReturnType<typeof setTimeout> | null = null;
   let hideTimer: ReturnType<typeof setTimeout> | null = null;
 
-  const dropdownId = `lm-dropdown-${Math.random().toString(36).slice(2, 9)}`;
+  const dropdownId = `ln-dropdown-${Math.random().toString(36).slice(2, 9)}`;
 
   const clearTimers = (): void => {
     if (showTimer) {
@@ -195,28 +197,41 @@
       }
     }
 
-    // 2) Horizontal alignment switch (start/end/center)
+    // 2) Calculate horizontal offset to keep popper within viewport
     const popperWidth = popperRect.width;
     const triggerLeft = triggerRect.left;
     const triggerRight = triggerRect.right;
-    const triggerCenter = triggerRect.left + triggerRect.width / 2;
-
-    const desiredLeft =
-      align === "start"
-        ? triggerLeft
-        : align === "end"
-          ? triggerRight - popperWidth
-          : triggerCenter - popperWidth / 2;
-
-    const overflowLeft = desiredLeft < padding;
-    const overflowRight = desiredLeft + popperWidth > viewportWidth - padding;
-
-    if (overflowLeft && !overflowRight) {
-      align = "start";
-    } else if (overflowRight && !overflowLeft) {
-      align = "end";
+    const triggerWidth = triggerRect.width;
+
+    // Calculate where the popper would be positioned based on alignment
+    let desiredLeft: number;
+    if (align === "start") {
+      desiredLeft = triggerLeft;
+    } else if (align === "end") {
+      desiredLeft = triggerRight - popperWidth;
+    } else {
+      // center
+      desiredLeft = triggerLeft + (triggerWidth - popperWidth) / 2;
+    }
+
+    // Check overflow and calculate offset
+    let newHorizontalOffset = 0;
+    const rightEdge = desiredLeft + popperWidth;
+    const leftEdge = desiredLeft;
+
+    if (rightEdge > viewportWidth - padding) {
+      // Overflows right - shift left
+      newHorizontalOffset = viewportWidth - padding - rightEdge;
+    } else if (leftEdge < padding) {
+      // Overflows left - shift right
+      newHorizontalOffset = padding - leftEdge;
     }
 
+    // Update horizontal offset
+    horizontalOffset = newHorizontalOffset !== 0 ? newHorizontalOffset : null;
+    // Arrow offset is the inverse to point back to trigger center
+    arrowOffset = newHorizontalOffset !== 0 ? -newHorizontalOffset : null;
+
     const nextPlacement = formatPlacement(side, align);
     return nextPlacement === placement ? null : nextPlacement;
   };
@@ -260,11 +275,11 @@
   });
 
   const rootClasses = $derived(
-    `lm-dropdown lm-dropdown--${size}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-dropdown ln-dropdown--${size}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   const dropdownClasses = $derived(
-    `lm-dropdown__popper is-${actualPlacement}${popperClass ? ` ${popperClass}` : ""}`,
+    `ln-dropdown__popper is-${actualPlacement}${popperClass ? ` ${popperClass}` : ""}`,
   );
 
   const maxHeightStyle = $derived(
@@ -279,14 +294,14 @@
 <div
   class={rootClasses}
   bind:this={rootEl}
-  style="--lm-dropdown-offset: {offset}px;"
+  style="--ln-dropdown-offset: {offset}px;"
   role="group"
   tabindex="-1"
   onpointerover={handleHoverEnter}
   onpointerout={handleHoverLeave}
 >
   <div
-    class="lm-dropdown__trigger"
+    class="ln-dropdown__trigger"
     role="button"
     tabindex={disabled ? -1 : 0}
     aria-haspopup="menu"
@@ -308,15 +323,17 @@
       class={dropdownClasses}
       role="menu"
       tabindex="-1"
-      style:--lm-dropdown-max-height={maxHeightStyle}
+      style:--ln-dropdown-max-height={maxHeightStyle}
+      style:--ln-dropdown-h-offset={horizontalOffset ? `${horizontalOffset}px` : undefined}
+      style:--ln-dropdown-arrow-offset={arrowOffset ? `${arrowOffset}px` : undefined}
       in:fly={flyParams}
       out:fly={flyParams}
       bind:this={popperEl}
     >
       {#if showArrow}
-        <div class="lm-dropdown__arrow" aria-hidden="true"></div>
+        <div class="ln-dropdown__arrow" aria-hidden="true"></div>
       {/if}
-      <div class="lm-dropdown__content">
+      <div class="ln-dropdown__content">
         {#if dropdown}
           {@render dropdown()}
         {/if}

package/dist/Dropdown/DropdownItem.svelte

@@ -28,7 +28,7 @@
   };
 
   const classes = $derived(
-    `lm-dropdown-item${disabled ? " is-disabled" : ""}${divided ? " is-divided" : ""}${danger ? " is-danger" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-dropdown-item${disabled ? " is-disabled" : ""}${divided ? " is-divided" : ""}${danger ? " is-danger" : ""}${cls ? ` ${cls}` : ""}`,
   );
 </script>
 
@@ -41,7 +41,7 @@
   onkeydown={handleKeyDown}
 >
   {#if icon}
-    <span class="lm-dropdown-item__icon">
+    <span class="ln-dropdown-item__icon">
       {@render icon()}
     </span>
   {/if}

package/dist/Dropdown/DropdownMenu.svelte

@@ -3,7 +3,7 @@
 
   let { children, class: cls = "" }: DropdownMenuProps = $props();
 
-  const classes = $derived(`lm-dropdown-menu${cls ? ` ${cls}` : ""}`);
+  const classes = $derived(`ln-dropdown-menu${cls ? ` ${cls}` : ""}`);
 </script>
 
 <ul class={classes} role="menu">

package/dist/Empty/Empty.svelte

@@ -11,11 +11,11 @@
 
     let { description = '暂无数据', image, children, actions, class: cls = '', ...attrs }: EmptyProps = $props()
 
-    const classes = $derived(cls ? `lm-empty ${cls}` : 'lm-empty')
+    const classes = $derived(cls ? `ln-empty ${cls}` : 'ln-empty')
 </script>
 
 <div {...attrs} class={classes} aria-live="polite">
-    <div class="lm-empty__image" aria-hidden="true">
+    <div class="ln-empty__image" aria-hidden="true">
         {#if image}
             {@render image()}
         {:else}
@@ -27,7 +27,7 @@
             </svg>
         {/if}
     </div>
-    <div class="lm-empty__description">
+    <div class="ln-empty__description">
         {#if children}
             {@render children()}
         {:else}
@@ -35,6 +35,6 @@
         {/if}
     </div>
     {#if actions}
-        <div class="lm-empty__actions">{@render actions()}</div>
+        <div class="ln-empty__actions">{@render actions()}</div>
     {/if}
 </div>

package/dist/Form/Form.svelte

@@ -59,7 +59,7 @@
 
     setContext(FORM_CONTEXT_KEY, formContext)
 
-    const classes = $derived(`lm-form lm-form--${size}${inline ? ' lm-form--inline' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-form ln-form--${size}${inline ? ' ln-form--inline' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
 
     const clearValidate = (props?: string[]) => clearValidation(props)
 

package/dist/Form/FormItem.svelte

@@ -139,7 +139,7 @@
     })
 
     const classes = $derived(
-        `lm-form-item lm-form-item--${effectiveSize}${messageType ? ` is-${messageType}` : ''}${validating ? ' is-validating' : ''}${inlineMessage ? ' is-inline-message' : ''}${form?.disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`
+        `ln-form-item ln-form-item--${effectiveSize}${messageType ? ` is-${messageType}` : ''}${validating ? ' is-validating' : ''}${inlineMessage ? ' is-inline-message' : ''}${form?.disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`
     )
 
     const labelStyle = $derived(form?.labelWidth ? `width: ${form.labelWidth}` : undefined)
@@ -166,19 +166,19 @@
     {...attrs}
 >
     {#if label}
-        <div class="lm-form-item__label" style={labelStyle}>
+        <div class="ln-form-item__label" style={labelStyle}>
             {label}
         </div>
     {/if}
 
-    <div class="lm-form-item__content">
+    <div class="ln-form-item__content">
         {#if children}
             {@render children()}
         {/if}
 
         {#if showMessage && (message || validating)}
             <div
-                class="lm-form-item__message"
+                class="ln-form-item__message"
                 class:is-inline={inlineMessage}
                 class:is-error={messageType === 'error'}
                 class:is-success={messageType === 'success'}

package/dist/Icon/Icon.svelte

@@ -20,7 +20,7 @@
 
   const sizeValue = $derived(typeof size === "number" ? `${size}px` : size);
 
-  const classes = $derived(cls ? `lm-icon ${cls}` : "lm-icon");
+  const classes = $derived(cls ? `ln-icon ${cls}` : "ln-icon");
 
   // lucide 0.563.0+ 图标格式为 [[tag, attrs], [tag, attrs], ...]
   type IconTuple = [string, Record<string, any>];

package/dist/Image/Image.svelte

@@ -83,26 +83,26 @@
         if (src) status = 'loading'
     })
 
-    const classes = $derived(`lm-image${hasPreview ? ' is-preview' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-image${hasPreview ? ' is-preview' : ''}${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} {...attrs}>
     {#if status === 'loading' && placeholder}
-        <div class="lm-image__placeholder">
+        <div class="ln-image__placeholder">
             {@render placeholder()}
         </div>
     {/if}
 
     {#if status === 'error' && error}
-        <div class="lm-image__error">
+        <div class="ln-image__error">
             {@render error()}
         </div>
     {:else if hasPreview}
-        <button type="button" class="lm-image__wrapper" onclick={openPreview}>
-            <img {src} {alt} class="lm-image__inner" style="object-fit: {fit}" loading={lazy ? 'lazy' : undefined} onload={handleLoad} onerror={handleError} />
+        <button type="button" class="ln-image__wrapper" onclick={openPreview}>
+            <img {src} {alt} class="ln-image__inner" style="object-fit: {fit}" loading={lazy ? 'lazy' : undefined} onload={handleLoad} onerror={handleError} />
         </button>
     {:else}
-        <img {src} {alt} class="lm-image__inner" style="object-fit: {fit}" loading={lazy ? 'lazy' : undefined} onload={handleLoad} onerror={handleError} />
+        <img {src} {alt} class="ln-image__inner" style="object-fit: {fit}" loading={lazy ? 'lazy' : undefined} onload={handleLoad} onerror={handleError} />
     {/if}
 
     {#if children}
@@ -111,24 +111,24 @@
 </div>
 
 {#if showPreview}
-    <div class="lm-image-viewer" role="dialog" aria-modal="true" tabindex="-1" onkeydown={handleKeydown} onclick={hideOnClickModal ? closePreview : undefined}>
-        <div class="lm-image-viewer__mask"></div>
+    <div class="ln-image-viewer" role="dialog" aria-modal="true" tabindex="-1" onkeydown={handleKeydown} onclick={hideOnClickModal ? closePreview : undefined}>
+        <div class="ln-image-viewer__mask"></div>
 
-        <button type="button" class="lm-image-viewer__close" onclick={closePreview} aria-label="Close">
+        <button type="button" class="ln-image-viewer__close" onclick={closePreview} aria-label="Close">
             <Icon icon={X} size={24} color="#fff" />
         </button>
 
         {#if previewSrcList.length > 1}
-            <button type="button" class="lm-image-viewer__prev" onclick={prevImage} aria-label="Previous">
+            <button type="button" class="ln-image-viewer__prev" onclick={prevImage} aria-label="Previous">
                 <Icon icon={ChevronLeft} size={24} color="#fff" />
             </button>
-            <button type="button" class="lm-image-viewer__next" onclick={nextImage} aria-label="Next">
+            <button type="button" class="ln-image-viewer__next" onclick={nextImage} aria-label="Next">
                 <Icon icon={ChevronRight} size={24} color="#fff" />
             </button>
         {/if}
 
-        <div class="lm-image-viewer__canvas">
-            <img src={currentPreviewSrc} alt="" class="lm-image-viewer__img" />
+        <div class="ln-image-viewer__canvas">
+            <img src={currentPreviewSrc} alt="" class="ln-image-viewer__img" />
         </div>
     </div>
 {/if}

package/dist/Input/Input.svelte

@@ -41,7 +41,7 @@
     const suffixCount = $derived((suffix ? 1 : 0) + (showClear ? 1 : 0) + (showPwdToggle ? 1 : 0))
 
     const classes = $derived(
-        `lm-input lm-input--${size}${disabled ? ' is-disabled' : ''}${focused ? ' is-focused' : ''}${prefix ? ' has-prefix' : ''}${suffixCount >= 1 ? ' has-suffix' : ''}${suffixCount >= 2 ? ' has-suffix-2' : ''}${suffixCount >= 3 ? ' has-suffix-3' : ''}${cls ? ` ${cls}` : ''}`
+        `ln-input ln-input--${size}${disabled ? ' is-disabled' : ''}${focused ? ' is-focused' : ''}${prefix ? ' has-prefix' : ''}${suffixCount >= 1 ? ' has-suffix' : ''}${suffixCount >= 2 ? ' has-suffix-2' : ''}${suffixCount >= 3 ? ' has-suffix-3' : ''}${cls ? ` ${cls}` : ''}`
     )
 
     const handleInput = (e: Event & { currentTarget: HTMLInputElement }): void => {
@@ -60,7 +60,7 @@
     }
 
     const handleAnimationStart = (e: AnimationEvent & { currentTarget: HTMLInputElement }): void => {
-        if (e.animationName === 'lm-input-autofill') {
+        if (e.animationName === 'ln-input-autofill') {
             updateAutofillFromNode(e.currentTarget)
         }
     }
@@ -109,7 +109,7 @@
 
 <div class={classes}>
     {#if prefix}
-        <span class="lm-input__prefix">
+        <span class="ln-input__prefix">
             {@render prefix()}
         </span>
     {/if}
@@ -122,7 +122,7 @@
         name={name}
         autocomplete={autocomplete as any}
         type={resolvedType}
-        class="lm-input__inner"
+        class="ln-input__inner"
         {placeholder}
         {disabled}
         {readonly}
@@ -138,11 +138,11 @@
     />
 
     {#if suffix || showClear || showPwdToggle}
-        <span class="lm-input__suffix">
+        <span class="ln-input__suffix">
             {#if showPwdToggle}
                 <button
                     type="button"
-                    class="lm-input__password"
+                    class="ln-input__password"
                     onmousedown={(e: MouseEvent) => {
                         e.preventDefault()
                         handleTogglePassword()
@@ -157,7 +157,7 @@
             {#if showClear}
                 <button
                     type="button"
-                    class="lm-input__clear"
+                    class="ln-input__clear"
                     onmousedown={(e: MouseEvent) => {
                         e.preventDefault()
                         handleClear()

package/dist/InputNumber/InputNumber.svelte

@@ -78,31 +78,31 @@
     const isMaxDisabled = $derived((modelValue ?? 0) >= max)
 
     const classes = $derived(
-        `lm-input-number lm-input-number--${size}${controls ? ' is-controls' : ''}${controlsPosition === 'right' ? ' is-controls-right' : ''}${disabled ? ' is-disabled' : ''}${isFocused ? ' is-focus' : ''}${cls ? ` ${cls}` : ''}`
+        `ln-input-number ln-input-number--${size}${controls ? ' is-controls' : ''}${controlsPosition === 'right' ? ' is-controls-right' : ''}${disabled ? ' is-disabled' : ''}${isFocused ? ' is-focus' : ''}${cls ? ` ${cls}` : ''}`
     )
 </script>
 
 <div class={classes} {...attrs}>
     {#if controls && controlsPosition !== 'right'}
-        <button type="button" class="lm-input-number__decrease" disabled={disabled || isMinDisabled} onclick={decrease} tabindex="-1">
+        <button type="button" class="ln-input-number__decrease" disabled={disabled || isMinDisabled} onclick={decrease} tabindex="-1">
             <Icon icon={Minus} size={14} />
         </button>
     {/if}
 
-    <input type="number" class="lm-input-number__input" value={modelValue} {min} {max} {step} {disabled} {readonly} {placeholder} oninput={handleInput} onfocus={() => isFocused = true} onblur={handleBlur} />
+    <input type="number" class="ln-input-number__input" value={modelValue} {min} {max} {step} {disabled} {readonly} {placeholder} oninput={handleInput} onfocus={() => isFocused = true} onblur={handleBlur} />
 
     {#if controls && controlsPosition !== 'right'}
-        <button type="button" class="lm-input-number__increase" disabled={disabled || isMaxDisabled} onclick={increase} tabindex="-1">
+        <button type="button" class="ln-input-number__increase" disabled={disabled || isMaxDisabled} onclick={increase} tabindex="-1">
             <Icon icon={Plus} size={14} />
         </button>
     {/if}
 
     {#if controls && controlsPosition === 'right'}
-        <div class="lm-input-number__controls">
-            <button type="button" class="lm-input-number__increase" disabled={disabled || isMaxDisabled} onclick={increase} tabindex="-1">
+        <div class="ln-input-number__controls">
+            <button type="button" class="ln-input-number__increase" disabled={disabled || isMaxDisabled} onclick={increase} tabindex="-1">
                 <Icon icon={ChevronUp} size={12} />
             </button>
-            <button type="button" class="lm-input-number__decrease" disabled={disabled || isMinDisabled} onclick={decrease} tabindex="-1">
+            <button type="button" class="ln-input-number__decrease" disabled={disabled || isMinDisabled} onclick={decrease} tabindex="-1">
                 <Icon icon={ChevronDown} size={12} />
             </button>
         </div>

package/dist/InputTag/InputTag.svelte

@@ -39,8 +39,8 @@
 
     const classes = $derived(
         [
-            'lm-input-tag',
-            `lm-input-tag--${size}`,
+            'ln-input-tag',
+            `ln-input-tag--${size}`,
             disabled && 'is-disabled',
             readonly && 'is-readonly',
             focused && 'is-focused',
@@ -136,7 +136,7 @@
 </script>
 
 <div class={classes} onclick={focusInput} {...attrs}>
-    <div class="lm-input-tag__inner">
+    <div class="ln-input-tag__inner">
         {#each modelValue as tag, i (allowDuplicates ? i : tag)}
             <Tag type={tagType} size={tagSize} closable={!disabled && !readonly} onclose={() => removeAt(i)}>
                 {tag}
@@ -145,7 +145,7 @@
 
         <input
             bind:this={inputRef}
-            class="lm-input-tag__input"
+            class="ln-input-tag__input"
             type="text"
             value={inputValue}
             placeholder={modelValue.length === 0 ? placeholder : ''}

package/dist/Link/Link.svelte

@@ -15,7 +15,7 @@
 
     let { href, type = 'default', underline = true, disabled = false, children, onclick, target, rel, class: cls = '', ...attrs }: LinkProps = $props()
 
-    const classes = $derived(`lm-link lm-link--${type}${underline ? ' is-underline' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-link ln-link--${type}${underline ? ' is-underline' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
 
     const handleClick = (e: MouseEvent): void => {
         if (disabled) {

package/dist/Loading/Loading.svelte

@@ -24,11 +24,11 @@
         }
     })
 
-    const classes = $derived(`lm-loading${fullscreen ? ' is-fullscreen' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-loading${fullscreen ? ' is-fullscreen' : ''}${cls ? ` ${cls}` : ''}`)
     const maskStyle = $derived.by(() => {
         if (!background) return undefined
         // 用 CSS 变量覆写默认遮罩背景（theme-chalk 会在 dark 下自动切换变量）
-        return `--lm-loading-mask-bg: ${background}`
+        return `--ln-loading-mask-bg: ${background}`
     })
 </script>
 
@@ -38,17 +38,17 @@
     {/if}
 
     {#if visible}
-        <div class="lm-loading__mask" style={maskStyle} role="status" aria-label="Loading">
-            <div class="lm-loading__spinner">
+        <div class="ln-loading__mask" style={maskStyle} role="status" aria-label="Loading">
+            <div class="ln-loading__spinner">
                 {#if spinner}
                     {@render spinner()}
                 {:else}
-                    <div class="lm-loading__icon">
+                    <div class="ln-loading__icon">
                         <Icon icon={Loader2} size={42} />
                     </div>
                 {/if}
                 {#if text}
-                    <p class="lm-loading__text">{text}</p>
+                    <p class="ln-loading__text">{text}</p>
                 {/if}
             </div>
         </div>

package/dist/Menu/Menu.svelte

@@ -209,7 +209,7 @@
 
   // CSS 类
   const classes = $derived(
-    `lm-menu lm-menu--${mode}${collapsed ? " is-collapsed" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-menu ln-menu--${mode}${collapsed ? " is-collapsed" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   // 箭头图标
@@ -223,7 +223,7 @@
   {@const showSubmenu = shouldShowSubmenu(item)}
   {@const iconSize = depth === 0 ? 18 : 16}
   <li
-    class="lm-menu__item"
+    class="ln-menu__item"
     class:is-active={isActive(item)}
     class:has-active-child={hasActiveChild(item)}
     class:is-disabled={item.disabled}
@@ -233,7 +233,7 @@
     onmouseleave={() => handleMouseLeave(item)}
   >
     <div
-      class="lm-menu__item-content"
+      class="ln-menu__item-content"
       role="menuitem"
       tabindex={item.disabled ? -1 : 0}
       aria-haspopup={hasChildren ? "true" : undefined}
@@ -242,15 +242,15 @@
       onkeydown={(e: KeyboardEvent) => handleKeydown(item, e)}
     >
       {#if item.icon}
-        <span class="lm-menu__item-icon">
+        <span class="ln-menu__item-icon">
           <Icon icon={item.icon} size={iconSize} />
         </span>
       {/if}
-      <span class="lm-menu__item-label">{item.label}</span>
+      <span class="ln-menu__item-label">{item.label}</span>
       {#if hasChildren}
         <button
           type="button"
-          class="lm-menu__item-arrow"
+          class="ln-menu__item-arrow"
           class:is-open={showSubmenu}
           tabindex={mode === "vertical" && !collapsed ? 0 : -1}
           aria-label="Toggle submenu"
@@ -264,7 +264,7 @@
     {#if hasChildren && showSubmenu}
       {#if mode === "horizontal" || collapsed}
         <ul
-          class="lm-menu__popup{depth > 0 ? ' lm-menu__popup--nested' : ''}"
+          class="ln-menu__popup{depth > 0 ? ' ln-menu__popup--nested' : ''}"
           role="menu"
           transition:scale|global={{ duration: 150, start: 0.95, opacity: 0 }}
         >
@@ -274,7 +274,7 @@
         </ul>
       {:else}
         <ul
-          class="lm-menu__submenu"
+          class="ln-menu__submenu"
           role="menu"
           transition:slide|global={{ duration: 200 }}
         >
@@ -288,10 +288,10 @@
 {/snippet}
 
 <nav bind:this={menuRef} class={classes} role="menu" {...attrs}>
-  <ul class="lm-menu__list" role="menubar">
+  <ul class="ln-menu__list" role="menubar">
     {#each items as item (getItemId(item))}
       {#if item.group && (items.indexOf(item) === 0 || items[items.indexOf(item) - 1]?.group !== item.group)}
-        <li class="lm-menu__group" role="presentation">
+        <li class="ln-menu__group" role="presentation">
           {#if !collapsed}{item.group}{/if}
         </li>
       {/if}

package/dist/Message/Message.svelte

@@ -34,7 +34,7 @@
 
   const icon = $derived(icons[type]);
   const classes = $derived(
-    `lm-message lm-message--${type}${center ? " is-center" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-message ln-message--${type}${center ? " is-center" : ""}${cls ? ` ${cls}` : ""}`,
   );
 </script>
 
@@ -45,12 +45,12 @@
   transition:fly={{ y: -20, duration: 250, opacity: 0 }}
   {...attrs}
 >
-  <Icon {icon} class="lm-message__icon" />
-  <span class="lm-message__content">{message}</span>
+  <Icon {icon} class="ln-message__icon" />
+  <span class="ln-message__content">{message}</span>
   {#if showClose}
     <button
       type="button"
-      class="lm-message__close"
+      class="ln-message__close"
       onclick={onclose}
       aria-label="关闭"
     >

package/dist/Message/MessageQueue.svelte

@@ -40,20 +40,20 @@
 {#each messages as message, index (message.id)}
   {#if message.visible}
     <div
-      class="lm-message lm-message--{message.type}"
+      class="ln-message ln-message--{message.type}"
       class:is-center={message.center}
       class:is-closable={message.showClose}
       style="top: {getOffset(index)}px;"
       transition:fly={{ y: -20, duration: 250, opacity: 0 }}
     >
-      <Icon icon={getIcon(message.type)} size={16} class="lm-message__icon" />
-      <div class="lm-message__content">
+      <Icon icon={getIcon(message.type)} size={16} class="ln-message__icon" />
+      <div class="ln-message__content">
         {message.message}
       </div>
       {#if message.showClose}
         <button
           type="button"
-          class="lm-message__close"
+          class="ln-message__close"
           onclick={() => onClose(message.id)}
           aria-label="Close"
         >

package/dist/Message/message.js

@@ -13,7 +13,7 @@ const ensureMounted = () => {
         return;
     if (!host) {
         host = document.createElement('div');
-        host.className = 'lm-message-container';
+        host.className = 'ln-message-container';
         document.body.appendChild(host);
     }
     if (!instance) {