luna-plus 0.0.40 → 0.0.43

package/dist/Select/Select.svelte

@@ -27,7 +27,7 @@
   let searchQuery = $state("");
   let rootEl: HTMLDivElement | null = $state(null);
   let inputEl: HTMLInputElement | null = $state(null);
-  const dropdownId = `lm-select-dropdown-${Math.random().toString(36).slice(2, 9)}`;
+  const dropdownId = `ln-select-dropdown-${Math.random().toString(36).slice(2, 9)}`;
 
   const selectedValues = $derived.by((): (string | number)[] => {
     if (multiple) return Array.isArray(modelValue) ? modelValue : [];
@@ -150,13 +150,13 @@
   });
 
   const classes = $derived(
-    `lm-select lm-select--${size}${visible ? " is-focus" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-select ln-select--${size}${visible ? " is-focus" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
   );
 </script>
 
 <div class={classes} bind:this={rootEl} {...attrs}>
   <div
-    class="lm-select__trigger"
+    class="ln-select__trigger"
     role="combobox"
     tabindex={disabled ? -1 : 0}
     aria-controls={dropdownId}
@@ -169,7 +169,7 @@
     {#if filterable && visible}
       <input
         bind:this={inputEl}
-        class="lm-select__input"
+        class="ln-select__input"
         type="text"
         bind:value={searchQuery}
         {placeholder}
@@ -177,16 +177,16 @@
         onkeydown={(e: KeyboardEvent) => e.key === "Escape" && close()}
       />
     {:else}
-      <span class="lm-select__value" class:is-placeholder={!hasValue}>
+      <span class="ln-select__value" class:is-placeholder={!hasValue}>
         {hasValue ? displayLabel : placeholder}
       </span>
     {/if}
 
-    <span class="lm-select__suffix">
+    <span class="ln-select__suffix">
       {#if clearable && hasValue && !disabled}
         <button
           type="button"
-          class="lm-select__clear"
+          class="ln-select__clear"
           onclick={handleClear}
           aria-label="清空"
         >
@@ -196,7 +196,7 @@
         <Icon
           icon={ChevronDown}
           size={14}
-          class="lm-select__arrow{visible ? ' is-reverse' : ''}"
+          class="ln-select__arrow{visible ? ' is-reverse' : ''}"
         />
       {/if}
     </span>
@@ -205,21 +205,21 @@
   {#if visible}
     <div
       id={dropdownId}
-      class="lm-select__dropdown"
+      class="ln-select__dropdown"
       role="listbox"
       transition:dropdownTransition
     >
       {#if showMenuArrow}
-        <div class="lm-select__menu-arrow" aria-hidden="true"></div>
+        <div class="ln-select__menu-arrow" aria-hidden="true"></div>
       {/if}
-      <div class="lm-select__menu-content">
+      <div class="ln-select__menu-content">
         {#if children}
           {@render children()}
         {:else if filteredOptions.length > 0}
           {#each filteredOptions as option (option.value)}
             <button
               type="button"
-              class="lm-select__option{isSelected(option.value)
+              class="ln-select__option{isSelected(option.value)
                 ? ' is-selected'
                 : ''}"
               role="option"
@@ -237,7 +237,7 @@
             </button>
           {/each}
         {:else}
-          <div class="lm-select__empty">无匹配数据</div>
+          <div class="ln-select__empty">无匹配数据</div>
         {/if}
       </div>
     </div>

package/dist/Skeleton/Skeleton.svelte

@@ -25,7 +25,7 @@
         shouldShow = loading
     })
 
-    const classes = $derived(`lm-skeleton${animated ? ' is-animated' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-skeleton${animated ? ' is-animated' : ''}${cls ? ` ${cls}` : ''}`)
     const rowIndices = $derived(Array.from({ length: rows }, (_, i) => i))
 </script>
 
@@ -35,7 +35,7 @@
             {@render template()}
         {:else}
             {#each rowIndices as i (i)}
-                <div class="lm-skeleton__item lm-skeleton__p" class:is-first={i === 0} class:is-last={i === rows - 1}></div>
+                <div class="ln-skeleton__item ln-skeleton__p" class:is-first={i === 0} class:is-last={i === rows - 1}></div>
             {/each}
         {/if}
     </div>

package/dist/Skeleton/SkeletonItem.svelte

@@ -8,7 +8,7 @@
 
     let { variant = 'text', class: cls = '', ...attrs }: SkeletonItemProps = $props()
 
-    const classes = $derived(`lm-skeleton__item lm-skeleton__${variant}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-skeleton__item ln-skeleton__${variant}${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} {...attrs}></div>

package/dist/Slider/Slider.svelte

@@ -65,7 +65,7 @@
   });
 
   const classes = $derived(
-    `lm-slider${vertical ? " is-vertical" : ""}${disabled ? " is-disabled" : ""}${isDragging ? " is-dragging" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-slider${vertical ? " is-vertical" : ""}${disabled ? " is-disabled" : ""}${isDragging ? " is-dragging" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   /** 计算百分比 */
@@ -235,7 +235,7 @@
 <div {...attrs} class={classes}>
   <div
     bind:this={trackRef}
-    class="lm-slider__track"
+    class="ln-slider__track"
     role="presentation"
     onclick={handleTrackClick}
   >
@@ -243,7 +243,7 @@
       {@const percentages = percentage as [number, number]}
       {@const [startPercent, endPercent] = percentages}
       <div
-        class="lm-slider__fill"
+        class="ln-slider__fill"
         style={vertical
           ? `bottom: ${startPercent}%; height: ${endPercent - startPercent}%`
           : `left: ${startPercent}%; width: ${endPercent - startPercent}%`}
@@ -253,7 +253,7 @@
         {@const thumbPercent = percentages[thumbIndex]}
         {@const thumbValue = (currentValue as [number, number])[thumbIndex]}
         <div
-          class="lm-slider__thumb"
+          class="ln-slider__thumb"
           class:is-active={activeThumb === thumbIndex}
           style={vertical
             ? `bottom: ${thumbPercent}%`
@@ -279,7 +279,7 @@
             disabled={!showTooltip}
             style="width: 100%; height: 100%; display: block;"
           >
-            <div class="lm-slider__thumb-inner"></div>
+            <div class="ln-slider__thumb-inner"></div>
           </Tooltip>
         </div>
       {/each}
@@ -287,12 +287,12 @@
       {@const fillPercent = percentage as number}
       {@const currentVal = currentValue as number}
       <div
-        class="lm-slider__fill"
+        class="ln-slider__fill"
         style={vertical ? `height: ${fillPercent}%` : `width: ${fillPercent}%`}
       ></div>
 
       <div
-        class="lm-slider__thumb"
+        class="ln-slider__thumb"
         class:is-active={isDragging}
         style={vertical ? `bottom: ${fillPercent}%` : `left: ${fillPercent}%`}
         role="slider"
@@ -312,23 +312,23 @@
           disabled={!showTooltip}
           style="width: 100%; height: 100%; display: block;"
         >
-          <div class="lm-slider__thumb-inner"></div>
+          <div class="ln-slider__thumb-inner"></div>
         </Tooltip>
       </div>
     {/if}
   </div>
 
   {#if markPositions.length > 0}
-    <div class="lm-slider__marks">
+    <div class="ln-slider__marks">
       {#each markPositions as mark (mark.value)}
         <div
-          class="lm-slider__mark"
+          class="ln-slider__mark"
           style={vertical
             ? `bottom: ${mark.position}%`
             : `left: ${mark.position}%`}
         >
-          <div class="lm-slider__mark-point"></div>
-          <div class="lm-slider__mark-label">
+          <div class="ln-slider__mark-point"></div>
+          <div class="ln-slider__mark-label">
             {#if typeof mark.label === "string"}
               {mark.label}
             {:else}

package/dist/Space/Space.svelte

@@ -71,16 +71,16 @@
   );
 
   const classes = $derived(
-    `lm-space lm-space--${direction}${wrap ? " is-wrap" : ""}${fill ? " is-fill" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-space ln-space--${direction}${wrap ? " is-wrap" : ""}${fill ? " is-fill" : ""}${cls ? ` ${cls}` : ""}`,
   );
 </script>
 
 <div
   class={classes}
-  style:--lm-space-gap={gapValue}
-  style:--lm-space-align={alignValue}
-  style:--lm-space-justify={justifyValue}
-  style:--lm-space-fill-ratio={fillRatio}
+  style:--ln-space-gap={gapValue}
+  style:--ln-space-align={alignValue}
+  style:--ln-space-justify={justifyValue}
+  style:--ln-space-fill-ratio={fillRatio}
   {...attrs}
 >
   {#if children}

package/dist/Statistic/Countdown.svelte

@@ -68,12 +68,12 @@
         stopTimer()
     })
 
-    const classes = $derived(`lm-statistic lm-countdown${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-statistic ln-countdown${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} {...attrs}>
     {#if title}
-        <div class="lm-statistic__title">
+        <div class="ln-statistic__title">
             {#if typeof title === 'string'}
                 {title}
             {:else}
@@ -82,9 +82,9 @@
         </div>
     {/if}
 
-    <div class="lm-statistic__content" style={valueStyle}>
+    <div class="ln-statistic__content" style={valueStyle}>
         {#if prefix}
-            <span class="lm-statistic__prefix">
+            <span class="ln-statistic__prefix">
                 {#if typeof prefix === 'string'}
                     {prefix}
                 {:else}
@@ -93,10 +93,10 @@
             </span>
         {/if}
 
-        <span class="lm-statistic__value">{formatTime}</span>
+        <span class="ln-statistic__value">{formatTime}</span>
 
         {#if suffix}
-            <span class="lm-statistic__suffix">
+            <span class="ln-statistic__suffix">
                 {#if typeof suffix === 'string'}
                     {suffix}
                 {:else}

package/dist/Statistic/Statistic.svelte

@@ -23,12 +23,12 @@
         return parts.join(decimalSeparator)
     })
 
-    const classes = $derived(`lm-statistic${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-statistic${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} {...attrs}>
     {#if title}
-        <div class="lm-statistic__title">
+        <div class="ln-statistic__title">
             {#if typeof title === 'string'}
                 {title}
             {:else}
@@ -37,9 +37,9 @@
         </div>
     {/if}
 
-    <div class="lm-statistic__content" style={valueStyle}>
+    <div class="ln-statistic__content" style={valueStyle}>
         {#if prefix}
-            <span class="lm-statistic__prefix">
+            <span class="ln-statistic__prefix">
                 {#if typeof prefix === 'string'}
                     {prefix}
                 {:else}
@@ -48,10 +48,10 @@
             </span>
         {/if}
 
-        <span class="lm-statistic__value">{formatValue}</span>
+        <span class="ln-statistic__value">{formatValue}</span>
 
         {#if suffix}
-            <span class="lm-statistic__suffix">
+            <span class="ln-statistic__suffix">
                 {#if typeof suffix === 'string'}
                     {suffix}
                 {:else}

package/dist/Steps/Step.svelte

@@ -25,12 +25,12 @@
     const isFinish = $derived(currentStatus === 'finish' || currentStatus === 'success')
     const isError = $derived(currentStatus === 'error')
 
-    const classes = $derived(`lm-step is-${currentStatus}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-step is-${currentStatus}${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} {...attrs}>
-    <div class="lm-step__head">
-        <div class="lm-step__icon">
+    <div class="ln-step__head">
+        <div class="ln-step__icon">
             {#if icon}
                 {@render icon()}
             {:else if isFinish}
@@ -38,18 +38,18 @@
             {:else if isError}
                 <Icon icon={X} size={14} />
             {:else}
-                <span class="lm-step__icon-inner">{index + 1}</span>
+                <span class="ln-step__icon-inner">{index + 1}</span>
             {/if}
         </div>
-        <div class="lm-step__line"></div>
+        <div class="ln-step__line"></div>
     </div>
 
-    <div class="lm-step__main">
+    <div class="ln-step__main">
         {#if title}
-            <div class="lm-step__title">{title}</div>
+            <div class="ln-step__title">{title}</div>
         {/if}
         {#if description && !isSimple}
-            <div class="lm-step__description">{description}</div>
+            <div class="ln-step__description">{description}</div>
         {/if}
         {#if children}
             {@render children()}

package/dist/Steps/Steps.svelte

@@ -50,7 +50,7 @@
 
     setContext(STEPS_CONTEXT_KEY, context)
 
-    const classes = $derived(`lm-steps lm-steps--${direction}${simple ? ' lm-steps--simple' : ''}${alignCenter ? ' is-center' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-steps ln-steps--${direction}${simple ? ' ln-steps--simple' : ''}${alignCenter ? ' is-center' : ''}${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} {...attrs}>

package/dist/Switch/Switch.svelte

@@ -42,7 +42,7 @@
     }: SwitchProps = $props()
 
     const classes = $derived(
-        `lm-switch lm-switch--${size}` +
+        `ln-switch ln-switch--${size}` +
             `${modelValue ? ' is-active' : ''}` +
             `${disabled ? ' is-disabled' : ''}` +
             `${loading ? ' is-loading' : ''}` +
@@ -90,28 +90,28 @@
     onkeydown={handleKeydown}
     {...attrs}
 >
-    <span class="lm-switch__track" aria-hidden="true">
+    <span class="ln-switch__track" aria-hidden="true">
         {#if iconLeft}
-            <span class="lm-switch__icon lm-switch__icon--left" aria-hidden="true">
+            <span class="ln-switch__icon ln-switch__icon--left" aria-hidden="true">
                 <Icon icon={iconLeft} size="100%" />
             </span>
         {/if}
 
-        <span class="lm-switch__thumb" aria-hidden="true">
+        <span class="ln-switch__thumb" aria-hidden="true">
             {#if loading}
-                <Icon icon={Loader} class="lm-switch__loading" size={14} />
+                <Icon icon={Loader} class="ln-switch__loading" size={14} />
             {/if}
         </span>
 
         {#if iconRight}
-            <span class="lm-switch__icon lm-switch__icon--right" aria-hidden="true">
+            <span class="ln-switch__icon ln-switch__icon--right" aria-hidden="true">
                 <Icon icon={iconRight} size="100%" />
             </span>
         {/if}
     </span>
 
     {#if labelText}
-        <span class="lm-switch__label" class:is-loading={loading} aria-live={loading ? 'polite' : undefined}>
+        <span class="ln-switch__label" class:is-loading={loading} aria-live={loading ? 'polite' : undefined}>
             {labelText}
         </span>
     {/if}

package/dist/Table/Table.svelte

@@ -391,9 +391,9 @@
 
   // Get row class
   const getRowClass = (row: any, index: number): string => {
-    const classes: string[] = ["lm-table__row"];
+    const classes: string[] = ["ln-table__row"];
     if (stripe && index % 2 === 1) {
-      classes.push("lm-table__row--striped");
+      classes.push("ln-table__row--striped");
     }
     if (highlightCurrentRow && currentRowKeyState === getRowKey(row, index)) {
       classes.push("is-current");
@@ -430,7 +430,7 @@
     rowIndex: number,
     colIndex: number,
   ): string => {
-    const classes: string[] = ["lm-table__cell"];
+    const classes: string[] = ["ln-table__cell"];
     if (column.type === "selection") {
       classes.push("is-center");
     }
@@ -451,7 +451,7 @@
 
   // Get header cell class
   const getHeaderCellClass = (column: TableColumn, index: number): string => {
-    const classes: string[] = ["lm-table__cell", "lm-table__header-cell"];
+    const classes: string[] = ["ln-table__cell", "ln-table__header-cell"];
     if (column.type === "selection") {
       classes.push("is-center");
     }
@@ -529,7 +529,7 @@
     
     if (!shouldShowOverflowTooltip(column)) return;
     const cellContent = target.querySelector(
-      ".lm-table__cell-text",
+      ".ln-table__cell-text",
     ) as HTMLElement;
 
     if (!cellContent || !checkOverflow(cellContent)) return;
@@ -662,7 +662,7 @@
 
   // Table classes
   const tableClasses = $derived(
-    `lm-table${border ? " lm-table--border" : ""}${stripe ? " lm-table--striped" : ""}${size !== "default" ? ` lm-table--${size}` : ""}${fit ? " lm-table--fit" : ""}${highlightCurrentRow ? " lm-table--highlight-current-row" : ""}${loading ? " is-loading" : ""}${flexible ? " lm-table--flexible" : ""}${scrollbarAlwaysOn ? " lm-table--scrollbar-always-on" : ""}`,
+    `ln-table${border ? " ln-table--border" : ""}${stripe ? " ln-table--striped" : ""}${size !== "default" ? ` ln-table--${size}` : ""}${fit ? " ln-table--fit" : ""}${highlightCurrentRow ? " ln-table--highlight-current-row" : ""}${loading ? " is-loading" : ""}${flexible ? " ln-table--flexible" : ""}${scrollbarAlwaysOn ? " ln-table--scrollbar-always-on" : ""}`,
   );
 
   const innerWrapperStyle = $derived.by(() => {
@@ -679,7 +679,7 @@
   });
 
   const tableElementClasses = $derived(
-    `lm-table__table${cls ? ` ${cls}` : ""}`,
+    `ln-table__table${cls ? ` ${cls}` : ""}`,
   );
 
   const effectiveTableLayout = $derived(
@@ -698,7 +698,7 @@
 
 <div bind:this={tableRef} class={tableClasses}>
   <Loading visible={loading} lock={false}>
-    <div class="lm-table__inner-wrapper" style={innerWrapperStyle} onscroll={handleScroll}>
+    <div class="ln-table__inner-wrapper" style={innerWrapperStyle} onscroll={handleScroll}>
       <table
         {...attrs}
         class={tableElementClasses}
@@ -713,8 +713,8 @@
           {/each}
         </colgroup>
         {#if showHeader}
-          <thead class="lm-table__header">
-            <tr class="lm-table__row">
+          <thead class="ln-table__header">
+            <tr class="ln-table__row">
               {#each columns as column, colIndex}
                 <th
                   class={getHeaderCellClass(column, colIndex)}
@@ -724,7 +724,7 @@
                   }}
                   oncontextmenu={(e) => handleHeaderContextmenu(column, e)}
                 >
-                  <div class="lm-table__cell-wrapper">
+                  <div class="ln-table__cell-wrapper">
                     {#if column.type === "selection"}
                       <Checkbox
                         checked={isAllSelected}
@@ -738,21 +738,21 @@
                         $index: colIndex,
                       })}
                     {:else}
-                      <span class="lm-table__header-text"
+                      <span class="ln-table__header-text"
                         >{column.label || ""}</span
                       >
                     {/if}
                     {#if column.sortable}
-                      <span class="lm-table__sort-caret">
+                      <span class="ln-table__sort-caret">
                         <Icon
                           icon={ChevronUp}
                           size={12}
-                          class={`lm-table__sort-icon lm-table__sort-icon--asc${sortState.prop === column.prop && sortState.order === "ascending" ? " is-active" : ""}`}
+                          class={`ln-table__sort-icon ln-table__sort-icon--asc${sortState.prop === column.prop && sortState.order === "ascending" ? " is-active" : ""}`}
                         />
                         <Icon
                           icon={ChevronDown}
                           size={12}
-                          class={`lm-table__sort-icon lm-table__sort-icon--desc${sortState.prop === column.prop && sortState.order === "descending" ? " is-active" : ""}`}
+                          class={`ln-table__sort-icon ln-table__sort-icon--desc${sortState.prop === column.prop && sortState.order === "descending" ? " is-active" : ""}`}
                         />
                       </span>
                     {/if}
@@ -762,18 +762,18 @@
             </tr>
           </thead>
         {/if}
-        <tbody class="lm-table__body">
+        <tbody class="ln-table__body">
           {#if sortedData.length === 0}
-            <tr class="lm-table__row lm-table__empty-row">
+            <tr class="ln-table__row ln-table__empty-row">
               <td
-                class="lm-table__cell lm-table__empty-cell"
+                class="ln-table__cell ln-table__empty-cell"
                 colspan={columns.length}
               >
-                <div class="lm-table__empty">
+                <div class="ln-table__empty">
                   {#if empty}
                     {@render empty()}
                   {:else}
-                    <span class="lm-table__empty-text">{emptyText}</span>
+                    <span class="ln-table__empty-text">{emptyText}</span>
                   {/if}
                 </div>
               </td>
@@ -808,7 +808,7 @@
                         handleCellMouseLeaveInternal(e, row, column)}
                     >
                       <div
-                        class="lm-table__cell-wrapper"
+                        class="ln-table__cell-wrapper"
                         class:has-overflow-tooltip={shouldShowOverflowTooltip(column)}
                       >
                         {#if column.type === "selection"}
@@ -822,7 +822,7 @@
                             size="small"
                           />
                         {:else if column.type === "index"}
-                          <span class="lm-table__cell-text"
+                          <span class="ln-table__cell-text"
                             >{getIndexValue(column, rowIndex)}</span
                           >
                         {:else if column.type === "actions"}
@@ -857,7 +857,7 @@
                         {:else if column.cellComponent}
                           {@const CellComp = column.cellComponent}
                           <span
-                            class="lm-table__cell-text"
+                            class="ln-table__cell-text"
                             class:is-ellipsis={shouldShowOverflowTooltip(column)}
                           >
                             <CellComp
@@ -868,7 +868,7 @@
                           </span>
                         {:else}
                           <span
-                            class="lm-table__cell-text"
+                            class="ln-table__cell-text"
                             class:is-ellipsis={shouldShowOverflowTooltip(column)}
                           >
                             {formatCellValue(row, column, rowIndex)}
@@ -883,12 +883,12 @@
           {/if}
         </tbody>
         {#if showSummary && sortedData.length > 0}
-          <tfoot class="lm-table__footer">
-            <tr class="lm-table__row">
+          <tfoot class="ln-table__footer">
+            <tr class="ln-table__row">
               {#each columns as column, colIndex}
-                <td class="lm-table__cell lm-table__summary-cell">
-                  <div class="lm-table__cell-wrapper">
-                    <span class="lm-table__cell-text">
+                <td class="ln-table__cell ln-table__summary-cell">
+                  <div class="ln-table__cell-wrapper">
+                    <span class="ln-table__cell-text">
                       {summaryData[colIndex] ?? ""}
                     </span>
                   </div>
@@ -899,7 +899,7 @@
         {/if}
       </table>
       {#if append}
-        <div class="lm-table__append-wrapper">
+        <div class="ln-table__append-wrapper">
           {@render append()}
         </div>
       {/if}
@@ -909,13 +909,13 @@
   <!-- Tooltip -->
   {#if tooltipVisible && hoveredTooltipCell}
     <div
-      class="lm-table__tooltip is-{tooltipOptions?.placement || 'top'} {tooltipEffect === 'light' ? 'is-light' : ''}"
+      class="ln-table__tooltip is-{tooltipOptions?.placement || 'top'} {tooltipEffect === 'light' ? 'is-light' : ''}"
       style="top: {tooltipPosition.top}px; left: {tooltipPosition.left}px; transform: {tooltipPosition.transform};"
       role="tooltip"
     >
       {hoveredTooltipCell.content}
       {#if tooltipOptions?.showArrow !== false}
-        <div class="lm-tooltip__arrow"></div>
+        <div class="ln-tooltip__arrow"></div>
       {/if}
     </div>
   {/if}

package/dist/Tabs/TabPane.svelte

@@ -27,7 +27,7 @@
 
     const isActive = $derived(tabs?.active === name)
 
-    const classes = $derived(`lm-tab-pane${isActive ? ' is-active' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-tab-pane${isActive ? ' is-active' : ''}${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} role="tabpanel" aria-hidden={!isActive || undefined} {...attrs}>