luna-plus 0.0.39 → 0.0.42

package/dist/Affix/Affix.svelte

@@ -75,7 +75,7 @@
         window.removeEventListener('resize', updateFixed)
     })
 
-    const classes = $derived(`lm-affix${fixed ? ' is-fixed' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-affix${fixed ? ' is-fixed' : ''}${cls ? ` ${cls}` : ''}`)
 
     const affixStyle = $derived.by(() => {
         if (!fixed) return undefined

package/dist/Alert/Alert.svelte

@@ -44,7 +44,7 @@
   let timer: ReturnType<typeof setTimeout> | null = null;
 
   const classes = $derived(
-    `lm-alert lm-alert--${type}${!visible ? " is-hidden" : ""}${center ? " is-center" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-alert ln-alert--${type}${!visible ? " is-hidden" : ""}${center ? " is-center" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   const handleClose = (): void => {
@@ -65,16 +65,16 @@
 {#if visible}
   <div {...attrs} class={classes} role="alert">
     {#if showIcon}
-      <div class="lm-alert__icon">
+      <div class="ln-alert__icon">
         <Icon icon={ICON_MAP[type]} size={20} />
       </div>
     {/if}
-    <div class="lm-alert__content">
+    <div class="ln-alert__content">
       {#if title}
-        <div class="lm-alert__title">{title}</div>
+        <div class="ln-alert__title">{title}</div>
       {/if}
       {#if children}
-        <div class="lm-alert__description">
+        <div class="ln-alert__description">
           {@render children()}
         </div>
       {/if}
@@ -82,7 +82,7 @@
     {#if closable}
       <button
         type="button"
-        class="lm-alert__close"
+        class="ln-alert__close"
         onclick={handleClose}
         aria-label="Close"
       >

package/dist/Autocomplete/Autocomplete.svelte

@@ -105,11 +105,11 @@
         return () => document.removeEventListener('click', handleClickOutside)
     })
 
-    const classes = $derived(['lm-autocomplete', disabled && 'is-disabled', size !== 'default' && `lm-autocomplete--${size}`, cls].filter(Boolean).join(' '))
+    const classes = $derived(['ln-autocomplete', disabled && 'is-disabled', size !== 'default' && `ln-autocomplete--${size}`, cls].filter(Boolean).join(' '))
 </script>
 
 <div bind:this={inputRef} class={classes} {...attrs}>
-    <div class="lm-autocomplete__input" class:is-focus={visible}>
+    <div class="ln-autocomplete__input" class:is-focus={visible}>
         <input
             type="text"
             value={modelValue}
@@ -124,30 +124,30 @@
             onkeydown={handleKeydown}
         />
         {#if loading}
-            <span class="lm-autocomplete__loading" aria-label="加载中">
+            <span class="ln-autocomplete__loading" aria-label="加载中">
                 <Icon icon={Loader2} size={14} />
             </span>
         {:else if clearable && modelValue && !disabled}
-            <button type="button" class="lm-autocomplete__clear" onclick={handleClear} aria-label="清除">
+            <button type="button" class="ln-autocomplete__clear" onclick={handleClear} aria-label="清除">
                 <Icon icon={X} size={14} />
             </button>
         {:else}
-            <span class="lm-autocomplete__arrow" class:is-open={visible} aria-hidden="true">
+            <span class="ln-autocomplete__arrow" class:is-open={visible} aria-hidden="true">
                 <Icon icon={ChevronDown} size={14} />
             </span>
         {/if}
     </div>
 
     {#if visible && suggestions.length > 0}
-        <div class="lm-autocomplete__dropdown" role="listbox" id="autocomplete-listbox">
+        <div class="ln-autocomplete__dropdown" role="listbox" id="autocomplete-listbox">
             {#if showMenuArrow}
-                <div class="lm-autocomplete__menu-arrow" aria-hidden="true"></div>
+                <div class="ln-autocomplete__menu-arrow" aria-hidden="true"></div>
             {/if}
 
-            <ul class="lm-autocomplete__menu" role="group">
+            <ul class="ln-autocomplete__menu" role="group">
                 {#each suggestions as item, index (item[valueKey])}
                     <li
-                        class="lm-autocomplete__item"
+                        class="ln-autocomplete__item"
                         class:is-highlighted={index === highlightIndex}
                         role="option"
                         aria-selected={index === highlightIndex}

package/dist/Avatar/Avatar.svelte

@@ -53,11 +53,11 @@
 
   const sizeClass = $derived(
     typeof normalizedSize === "number"
-      ? "lm-avatar--custom"
-      : `lm-avatar--${normalizedSize}`,
+      ? "ln-avatar--custom"
+      : `ln-avatar--${normalizedSize}`,
   );
   const classes = $derived(
-    `lm-avatar ${sizeClass} lm-avatar--${shape}${cls ? ` ${cls}` : ""}`,
+    `ln-avatar ${sizeClass} ln-avatar--${shape}${cls ? ` ${cls}` : ""}`,
   );
 
   const styleAttr = $derived.by(() => {
@@ -79,14 +79,14 @@
 <span {...attrs} class={classes} style={styleAttr} aria-label={alt} role="img">
   {#if src && !hasError}
     <img
-      class="lm-avatar__img"
+      class="ln-avatar__img"
       {src}
       {alt}
       style={`object-fit:${fit};`}
       onerror={handleError}
     />
   {:else}
-    <span class="lm-avatar__placeholder">
+    <span class="ln-avatar__placeholder">
       {#if children}
         {@render children()}
       {:else}

package/dist/Backtop/Backtop.svelte

@@ -45,7 +45,7 @@
         scrollEl.removeEventListener('scroll', handleScroll)
     })
 
-    const classes = $derived(`lm-backtop${visible ? ' is-visible' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-backtop${visible ? ' is-visible' : ''}${cls ? ` ${cls}` : ''}`)
     const style = $derived(`right: ${right}px; bottom: ${bottom}px`)
 </script>
 

package/dist/Badge/Badge.svelte

@@ -22,12 +22,12 @@
     ...attrs
   }: BadgeProps = $props();
 
-  const classes = $derived(cls ? `lm-badge ${cls}` : "lm-badge");
+  const classes = $derived(cls ? `ln-badge ${cls}` : "ln-badge");
 
   const contentClasses = $derived(
     isDot
-      ? `lm-badge__content lm-badge__content--${type} is-dot`
-      : `lm-badge__content lm-badge__content--${type}`,
+      ? `ln-badge__content ln-badge__content--${type} is-dot`
+      : `ln-badge__content ln-badge__content--${type}`,
   );
 
   const displayValue = $derived.by(() => {
@@ -52,7 +52,7 @@
 </script>
 
 <div {...attrs} class={classes}>
-  <div class="lm-badge__base">
+  <div class="ln-badge__base">
     {#if children}
       {@render children()}
     {/if}

package/dist/Breadcrumb/Breadcrumb.svelte

@@ -30,7 +30,7 @@
     },
   });
 
-  const classes = $derived(`lm-breadcrumb${cls ? ` ${cls}` : ""}`);
+  const classes = $derived(`ln-breadcrumb${cls ? ` ${cls}` : ""}`);
 </script>
 
 <ul class={classes} {...attrs}>
@@ -38,25 +38,25 @@
     {@render children()}
   {:else if items}
     {#each items as item, index}
-      <li class="lm-breadcrumb__item">
+      <li class="ln-breadcrumb__item">
         {#if item.href}
-          <a href={item.href} class="lm-breadcrumb__link">
+          <a href={item.href} class="ln-breadcrumb__link">
             {#if item.icon}
-              <Icon icon={item.icon} class="lm-breadcrumb__icon" />
+              <Icon icon={item.icon} class="ln-breadcrumb__icon" />
             {/if}
             {item.label}
           </a>
         {:else}
-          <span class="lm-breadcrumb__text">
+          <span class="ln-breadcrumb__text">
             {#if item.icon}
-              <Icon icon={item.icon} class="lm-breadcrumb__icon" />
+              <Icon icon={item.icon} class="ln-breadcrumb__icon" />
             {/if}
             {item.label}
           </span>
         {/if}
       </li>
       {#if index < items.length - 1}
-        <li class="lm-breadcrumb__separator">{separator}</li>
+        <li class="ln-breadcrumb__separator">{separator}</li>
       {/if}
     {/each}
   {/if}

package/dist/Breadcrumb/BreadcrumbItem.svelte

@@ -29,23 +29,23 @@
   const separator = $derived(context?.separator ?? "/");
   const link = $derived(href || to);
 
-  const classes = $derived(`lm-breadcrumb__item${cls ? ` ${cls}` : ""}`);
+  const classes = $derived(`ln-breadcrumb__item${cls ? ` ${cls}` : ""}`);
 </script>
 
 <li class={classes} {...attrs}>
   {#if link}
-    <a href={link} class="lm-breadcrumb__link">
+    <a href={link} class="ln-breadcrumb__link">
       {#if icon}
-        <Icon {icon} class="lm-breadcrumb__icon" />
+        <Icon {icon} class="ln-breadcrumb__icon" />
       {/if}
       {#if children}
         {@render children()}
       {/if}
     </a>
   {:else}
-    <span class="lm-breadcrumb__text">
+    <span class="ln-breadcrumb__text">
       {#if icon}
-        <Icon {icon} class="lm-breadcrumb__icon" />
+        <Icon {icon} class="ln-breadcrumb__icon" />
       {/if}
       {#if children}
         {@render children()}
@@ -53,4 +53,4 @@
     </span>
   {/if}
 </li>
-<li class="lm-breadcrumb__separator">{separator}</li>
+<li class="ln-breadcrumb__separator">{separator}</li>

package/dist/Button/Button.svelte

@@ -23,7 +23,7 @@
     }: ButtonProps = $props()
 
     const classes = $derived(
-        `lm-button lm-button--${type} lm-button--${size}${disabled ? ' is-disabled' : ''}${loading ? ' is-loading' : ''}${plain ? ' is-plain' : ''}${round ? ' is-round' : ''}${circle ? ' is-circle' : ''}${cls ? ` ${cls}` : ''}`
+        `ln-button ln-button--${type} ln-button--${size}${disabled ? ' is-disabled' : ''}${loading ? ' is-loading' : ''}${plain ? ' is-plain' : ''}${round ? ' is-round' : ''}${circle ? ' is-circle' : ''}${cls ? ` ${cls}` : ''}`
     )
 
     const handleClick = (e: MouseEvent): void => {
@@ -50,7 +50,7 @@
     onclick={handleClick}
 >
     {#if loading}
-        <span class="lm-button__loading" aria-hidden="true">
+        <span class="ln-button__loading" aria-hidden="true">
             <Icon icon={LoaderCircle} size={16} />
         </span>
     {/if}

package/dist/Calendar/Calendar.svelte

@@ -60,43 +60,43 @@
         currentDate = new Date(t)
     }
 
-    const classes = $derived(`lm-calendar${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-calendar${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} {...attrs}>
-    <div class="lm-calendar__header">
-        <div class="lm-calendar__nav">
-            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year - 1, month, 1))} aria-label="上一年">
+    <div class="ln-calendar__header">
+        <div class="ln-calendar__nav">
+            <button class="ln-calendar__btn" onclick={() => (currentDate = new Date(year - 1, month, 1))} aria-label="上一年">
                 <Icon icon={ChevronsLeft} size={16} />
             </button>
-            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year, month - 1, 1))} aria-label="上个月">
+            <button class="ln-calendar__btn" onclick={() => (currentDate = new Date(year, month - 1, 1))} aria-label="上个月">
                 <Icon icon={ChevronLeft} size={14} />
             </button>
         </div>
-        <div class="lm-calendar__title">
+        <div class="ln-calendar__title">
             {year}年 {month + 1}月
         </div>
-        <div class="lm-calendar__nav">
-            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year, month + 1, 1))} aria-label="下个月">
+        <div class="ln-calendar__nav">
+            <button class="ln-calendar__btn" onclick={() => (currentDate = new Date(year, month + 1, 1))} aria-label="下个月">
                 <Icon icon={ChevronRight} size={14} />
             </button>
-            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year + 1, month, 1))} aria-label="下一年">
+            <button class="ln-calendar__btn" onclick={() => (currentDate = new Date(year + 1, month, 1))} aria-label="下一年">
                 <Icon icon={ChevronsRight} size={16} />
             </button>
         </div>
     </div>
 
-    <div class="lm-calendar__body">
-        <div class="lm-calendar__weekdays">
+    <div class="ln-calendar__body">
+        <div class="ln-calendar__weekdays">
             {#each weekDays as day}
-                <div class="lm-calendar__weekday">{day}</div>
+                <div class="ln-calendar__weekday">{day}</div>
             {/each}
         </div>
-        <div class="lm-calendar__days" role="grid">
+        <div class="ln-calendar__days" role="grid">
             {#each calendarDays as day}
                 <button
                     type="button"
-                    class="lm-calendar__day"
+                    class="ln-calendar__day"
                     class:is-other-month={day.month !== 'current'}
                     class:is-today={isToday(day.fullDate)}
                     class:is-selected={isSelected(day.fullDate)}
@@ -109,7 +109,7 @@
         </div>
     </div>
 
-    <div class="lm-calendar__footer">
-        <button class="lm-calendar__today" onclick={goToToday}>今天</button>
+    <div class="ln-calendar__footer">
+        <button class="ln-calendar__today" onclick={goToToday}>今天</button>
     </div>
 </div>

package/dist/Card/Card.svelte

@@ -23,10 +23,10 @@
     }: CardProps = $props()
 
     const shadowClass = $derived(shadow !== 'always' ? ` is-${shadow}-shadow` : '')
-    const cardClasses = $derived(`lm-card${shadowClass}${cls ? ` ${cls}` : ''}`)
-    const headerClasses = $derived(`lm-card__header${headerClass ? ` ${headerClass}` : ''}`)
-    const bodyClasses = $derived(`lm-card__body${bodyClass ? ` ${bodyClass}` : ''}`)
-    const footerClasses = $derived(`lm-card__footer${footerClass ? ` ${footerClass}` : ''}`)
+    const cardClasses = $derived(`ln-card${shadowClass}${cls ? ` ${cls}` : ''}`)
+    const headerClasses = $derived(`ln-card__header${headerClass ? ` ${headerClass}` : ''}`)
+    const bodyClasses = $derived(`ln-card__body${bodyClass ? ` ${bodyClass}` : ''}`)
+    const footerClasses = $derived(`ln-card__footer${footerClass ? ` ${footerClass}` : ''}`)
     const bodyStyleText = $derived(styleToString(bodyStyle))
 </script>
 

package/dist/Carousel/Carousel.svelte

@@ -138,7 +138,7 @@
     arrow === "always" || (arrow === "hover" && isHovering),
   );
   const classes = $derived(
-    `lm-carousel lm-carousel--${direction}${indicatorPosition === "outside" ? " lm-carousel--indicator-outside" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-carousel ln-carousel--${direction}${indicatorPosition === "outside" ? " ln-carousel--indicator-outside" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   /** 指示器索引数组（缓存避免重复创建） */
@@ -155,7 +155,7 @@
   {...attrs}
 >
   <div
-    class="lm-carousel__container"
+    class="ln-carousel__container"
     style="transform:{direction === 'horizontal'
       ? `translateX(-${activeIndex * 100}%)`
       : `translateY(-${activeIndex * 100}%)`}"
@@ -168,7 +168,7 @@
   {#if showArrow && itemCount > 1}
     <button
       type="button"
-      class="lm-carousel__arrow lm-carousel__arrow--prev"
+      class="ln-carousel__arrow ln-carousel__arrow--prev"
       onclick={prev}
       aria-label="Previous slide"
     >
@@ -179,7 +179,7 @@
     </button>
     <button
       type="button"
-      class="lm-carousel__arrow lm-carousel__arrow--next"
+      class="ln-carousel__arrow ln-carousel__arrow--next"
       onclick={next}
       aria-label="Next slide"
     >
@@ -191,11 +191,11 @@
   {/if}
 
   {#if indicatorPosition !== "none" && itemCount > 1}
-    <div class="lm-carousel__indicators">
+    <div class="ln-carousel__indicators">
       {#each indicatorIndices as i (i)}
         <button
           type="button"
-          class="lm-carousel__indicator{activeIndex === i ? ' is-active' : ''}"
+          class="ln-carousel__indicator{activeIndex === i ? ' is-active' : ''}"
           onclick={() => handleIndicator(i, "click")}
           onmouseenter={() => handleIndicator(i, "hover")}
           aria-label="Go to slide {i + 1}"

package/dist/Carousel/CarouselItem.svelte

@@ -31,7 +31,7 @@
 
   const isActive = $derived(itemIndex === carousel?.activeIndex);
   const classes = $derived(
-    `lm-carousel__item${isActive ? " is-active" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-carousel__item${isActive ? " is-active" : ""}${cls ? ` ${cls}` : ""}`,
   );
 </script>
 

package/dist/Cascader/Cascader.svelte

@@ -139,9 +139,9 @@
 
   const classes = $derived(
     [
-      "lm-cascader",
+      "ln-cascader",
       disabled && "is-disabled",
-      size !== "default" && `lm-cascader--${size}`,
+      size !== "default" && `ln-cascader--${size}`,
       cls,
     ]
       .filter(Boolean)
@@ -151,7 +151,7 @@
 
 <div bind:this={inputRef} class={classes} {...attrs}>
   <div
-    class="lm-cascader__input"
+    class="ln-cascader__input"
     class:is-focus={visible}
     role="combobox"
     tabindex={disabled ? -1 : 0}
@@ -161,20 +161,20 @@
     onclick={handleToggle}
     onkeydown={handleKeydown}
   >
-    <span class="lm-cascader__value" class:is-placeholder={!displayValue}>
+    <span class="ln-cascader__value" class:is-placeholder={!displayValue}>
       {displayValue || placeholder}
     </span>
     {#if clearable && modelValue.length > 0 && !disabled}
       <button
         type="button"
-        class="lm-cascader__clear"
+        class="ln-cascader__clear"
         onclick={handleClear}
         aria-label="清除"
       >
         <Icon icon={X} size={14} />
       </button>
     {:else}
-      <span class="lm-cascader__arrow" class:is-open={visible}>
+      <span class="ln-cascader__arrow" class:is-open={visible}>
         <Icon icon={ChevronDown} size={14} />
       </span>
     {/if}
@@ -182,19 +182,19 @@
 
   {#if visible}
     <div
-      class="lm-cascader__dropdown"
+      class="ln-cascader__dropdown"
       role="listbox"
       id="cascader-dropdown"
       transition:dropdownTransition
     >
       {#if showMenuArrow}
-        <div class="lm-cascader__menu-arrow" aria-hidden="true"></div>
+        <div class="ln-cascader__menu-arrow" aria-hidden="true"></div>
       {/if}
       {#each menus as menu, level}
-        <ul class="lm-cascader__menu" role="group">
+        <ul class="ln-cascader__menu" role="group">
           {#each menu as option (option.value)}
             <li
-              class="lm-cascader__option"
+              class="ln-cascader__option"
               class:is-active={isActive(option, level)}
               class:is-disabled={option.disabled}
               role="option"
@@ -202,8 +202,8 @@
               onmousedown={() => handleOptionClick(option, level)}
               onmouseenter={() => handleOptionHover(option, level)}
             >
-              <span class="lm-cascader__option-label">{option.label}</span>
-              <span class="lm-cascader__option-suffix" aria-hidden="true">
+              <span class="ln-cascader__option-label">{option.label}</span>
+              <span class="ln-cascader__option-suffix" aria-hidden="true">
                 {#if option.children?.length}
                   <Icon icon={ChevronRight} size={14} />
                 {:else if isActive(option, level) && level === menus.length - 1}

package/dist/Checkbox/Checkbox.svelte

@@ -19,7 +19,7 @@
 
     let inputRef: HTMLInputElement | null = $state(null)
 
-    const classes = $derived(`lm-checkbox lm-checkbox--${size}${checked ? ' is-checked' : ''}${disabled ? ' is-disabled' : ''}${indeterminate ? ' is-indeterminate' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-checkbox ln-checkbox--${size}${checked ? ' is-checked' : ''}${disabled ? ' is-disabled' : ''}${indeterminate ? ' is-indeterminate' : ''}${cls ? ` ${cls}` : ''}`)
 
     const handleChange = (e: Event): void => {
         checked = (e.currentTarget as HTMLInputElement).checked
@@ -32,9 +32,9 @@
 </script>
 
 <label class={classes}>
-    <span class="lm-checkbox__input">
-        <input bind:this={inputRef} bind:checked {...attrs} type="checkbox" class="lm-checkbox__original" {value} {disabled} onchange={handleChange} />
-        <span class="lm-checkbox__inner">
+    <span class="ln-checkbox__input">
+        <input bind:this={inputRef} bind:checked {...attrs} type="checkbox" class="ln-checkbox__original" {value} {disabled} onchange={handleChange} />
+        <span class="ln-checkbox__inner">
             {#if checked}
                 <Icon icon={Check} size={12} />
             {:else if indeterminate}
@@ -44,7 +44,7 @@
     </span>
 
     {#if children || label}
-        <span class="lm-checkbox__label">
+        <span class="ln-checkbox__label">
             {#if children}
                 {@render children()}
             {:else if label}

package/dist/Checkbox/CheckboxGroup.svelte

@@ -21,7 +21,7 @@
   }: CheckboxGroupProps = $props();
 
   const classes = $derived(
-    `lm-checkbox-group lm-checkbox-group--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-checkbox-group ln-checkbox-group--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   const toggle = (value: string | number): void => {

package/dist/Collapse/Collapse.svelte

@@ -52,7 +52,7 @@
 
   setContext(COLLAPSE_CONTEXT_KEY, context);
 
-  const classes = $derived(cls ? `lm-collapse ${cls}` : "lm-collapse");
+  const classes = $derived(cls ? `ln-collapse ${cls}` : "ln-collapse");
 </script>
 
 <div class={classes} role="tablist" {...attrs}>

package/dist/Collapse/CollapseItem.svelte

@@ -124,13 +124,13 @@
   };
 
   const classes = $derived(
-    `lm-collapse-item lm-collapse__item${isActive ? " is-active" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-collapse-item ln-collapse__item${isActive ? " is-active" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
   );
 </script>
 
 <div class={classes} {...attrs}>
   <div
-    class="lm-collapse-item__header lm-collapse__header"
+    class="ln-collapse-item__header ln-collapse__header"
     role="tab"
     tabindex={disabled ? -1 : 0}
     aria-expanded={isActive}
@@ -138,7 +138,7 @@
     onclick={handleClick}
     onkeydown={handleKeydown}
   >
-    <span class="lm-collapse-item__title lm-collapse__title">
+    <span class="ln-collapse-item__title ln-collapse__title">
       {#if typeof title === "string"}
         {title}
       {:else if title}
@@ -146,7 +146,7 @@
       {/if}
     </span>
     <span
-      class="lm-collapse-item__arrow lm-collapse__arrow"
+      class="ln-collapse-item__arrow ln-collapse__arrow"
       class:is-active={isActive}
     >
       <Icon icon={ChevronRight} size={16} />
@@ -154,7 +154,7 @@
   </div>
 
   <div
-    class="lm-collapse-item__wrap lm-collapse__wrap"
+    class="ln-collapse-item__wrap ln-collapse__wrap"
     class:is-active={isActive}
     class:is-disabled={disabled}
     role="tabpanel"
@@ -164,7 +164,7 @@
     style:overflow="hidden"
   >
     <div
-      class="lm-collapse-item__content lm-collapse__content"
+      class="ln-collapse-item__content ln-collapse__content"
       bind:this={contentEl}
     >
       {#if children}