@starwind-ui/core 1.15.4 → 1.16.0

package/dist/src/components/sidebar/SidebarMenuItem.astro

@@ -13,9 +13,9 @@ const { class: className, ...rest } = Astro.props;
 
 <li
   class={sidebarMenuItem({ class: className })}
-  data-slot="sidebar-menu-item"
   data-sidebar="menu-item"
   {...rest}
+  data-slot="sidebar-menu-item"
 >
   <slot />
 </li>

package/dist/src/components/sidebar/SidebarMenuSkeleton.astro

@@ -27,9 +27,9 @@ const skeletonWidth = width || `${Math.floor(Math.random() * 40) + 50}%`;
 
 <div
   class={sidebarMenuSkeleton({ class: className })}
-  data-slot="sidebar-menu-skeleton"
   data-sidebar="menu-skeleton"
   {...rest}
+  data-slot="sidebar-menu-skeleton"
 >
   {showIcon && <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
   <Skeleton

package/dist/src/components/sidebar/SidebarMenuSub.astro

@@ -16,9 +16,9 @@ const { class: className, ...rest } = Astro.props;
 
 <ul
   class={sidebarMenuSub({ class: className })}
-  data-slot="sidebar-menu-sub"
   data-sidebar="menu-sub"
   {...rest}
+  data-slot="sidebar-menu-sub"
 >
   <slot />
 </ul>

package/dist/src/components/sidebar/SidebarMenuSubButton.astro

@@ -39,11 +39,11 @@ const { size, isActive = false, class: className, ...rest } = Astro.props;
 
 <a
   class={sidebarMenuSubButton({ size, class: className })}
-  data-slot="sidebar-menu-sub-button"
   data-sidebar="menu-sub-button"
   data-size={size || "md"}
   data-active={isActive}
   {...rest}
+  data-slot="sidebar-menu-sub-button"
 >
   <slot />
 </a>

package/dist/src/components/sidebar/SidebarMenuSubItem.astro

@@ -8,9 +8,9 @@ const { class: className, ...rest } = Astro.props;
 
 <li
   class:list={["group/menu-sub-item relative", className]}
-  data-slot="sidebar-menu-sub-item"
   data-sidebar="menu-sub-item"
   {...rest}
+  data-slot="sidebar-menu-sub-item"
 >
   <slot />
 </li>

package/dist/src/components/sidebar/SidebarProvider.astro

@@ -45,12 +45,12 @@ const mergedStyle = {
 
 <div
   class={sidebarProvider({ class: className })}
-  data-slot="sidebar-provider"
   data-state={defaultOpen ? "expanded" : "collapsed"}
   data-mobile-open="false"
   data-keyboard-shortcut={keyboardShortcut}
   style={mergedStyle}
   {...rest}
+  data-slot="sidebar-provider"
 >
   <slot />
 </div>

package/dist/src/components/sidebar/SidebarRail.astro

@@ -28,11 +28,11 @@ const { class: className, ...rest } = Astro.props;
 <button
   type="button"
   class={sidebarRail({ class: className })}
-  data-slot="sidebar-rail"
   data-sidebar="rail"
   aria-label="Toggle Sidebar"
   tabindex="-1"
-  {...rest}></button>
+  {...rest}
+  data-slot="sidebar-rail"></button>
 
 <script>
   class SidebarRailHandler {

package/dist/src/components/sidebar/SidebarSeparator.astro

@@ -16,7 +16,7 @@ const { orientation = "horizontal", class: className, ...rest } = Astro.props;
 <Separator
   orientation={orientation}
   class={sidebarSeparator({ class: className })}
-  data-slot="sidebar-separator"
   data-sidebar="separator"
   {...rest}
+  data-slot="sidebar-separator"
 />

package/dist/src/components/sidebar/SidebarTrigger.astro

@@ -18,10 +18,10 @@ const { class: className, size = "icon-sm", variant = "ghost", ...rest } = Astro
   variant={variant}
   size={size}
   class={sidebarTrigger({ class: className })}
-  data-slot="sidebar-trigger"
   data-sidebar="trigger"
   aria-label="Toggle Sidebar"
   {...rest}
+  data-slot="sidebar-trigger"
 >
   <slot name="icon">
     <PanelLeft />

package/dist/src/components/skeleton/Skeleton.astro

@@ -11,4 +11,4 @@ export const skeleton = tv({
 });
 ---
 
-<div class={skeleton({ class: className })} data-slot="skeleton" {...rest}></div>
+<div class={skeleton({ class: className })} {...rest} data-slot="skeleton"></div>

package/dist/src/components/slider/Slider.astro

@@ -101,7 +101,6 @@ const rangeEnd = isRange ? getPercentage(Math.max(...values)) : getPercentage(va
 
 <div
   class={root({ class: className })}
-  data-slot="slider"
   data-orientation={orientation}
   data-disabled={disabled ? "" : undefined}
   role="group"
@@ -111,6 +110,7 @@ const rangeEnd = isRange ? getPercentage(Math.max(...values)) : getPercentage(va
   data-step={step}
   data-large-step={largeStep}
   {...rest}
+  data-slot="slider"
 >
   <div class={control()} data-slot="slider-control" data-orientation={orientation}>
     <div class={track()} data-slot="slider-track" data-orientation={orientation}>

package/dist/src/components/spinner/Spinner.astro

@@ -16,6 +16,6 @@ const { class: className, ...rest } = Astro.props;
   role="status"
   aria-label="Loading"
   class={spinner({ class: className })}
-  data-slot="spinner"
   {...rest}
+  data-slot="spinner"
 />

package/dist/src/components/switch/Switch.astro

@@ -110,8 +110,8 @@ export const switchLabel = tv({
       "--width": `calc((var(--spacing) * ${sizeMultiplier} * 2) + (var(--padding) * 3))`,
       "--border-offset": "1px",
     }}
-    data-slot="switch-button"
     {...rest}
+    data-slot="switch-button"
   >
     <span
       class={switchToggle({ size })}

package/dist/src/components/table/Table.astro

@@ -12,7 +12,7 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <div data-slot="table-container" class="relative w-full overflow-x-auto">
-  <table data-slot="table" class={table({ class: className })} {...rest} role="table">
+  <table role="table" class={table({ class: className })} {...rest} data-slot="table">
     <slot />
   </table>
 </div>

package/dist/src/components/table/TableBody.astro

@@ -11,6 +11,6 @@ export const tableBody = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<tbody data-slot="table-body" class={tableBody({ class: className })} {...rest}>
+<tbody class={tableBody({ class: className })} {...rest} data-slot="table-body">
   <slot />
 </tbody>

package/dist/src/components/table/TableCaption.astro

@@ -11,6 +11,6 @@ export const tableCaption = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<caption data-slot="table-caption" class={tableCaption({ class: className })} {...rest}>
+<caption class={tableCaption({ class: className })} {...rest} data-slot="table-caption">
   <slot />
 </caption>

package/dist/src/components/table/TableCell.astro

@@ -11,6 +11,6 @@ export const tableCell = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<td data-slot="table-cell" class={tableCell({ class: className })} {...rest}>
+<td class={tableCell({ class: className })} {...rest} data-slot="table-cell">
   <slot />
 </td>

package/dist/src/components/table/TableFoot.astro

@@ -11,6 +11,6 @@ export const tableFoot = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<tfoot data-slot="table-foot" class={tableFoot({ class: className })} {...rest}>
+<tfoot class={tableFoot({ class: className })} {...rest} data-slot="table-foot">
   <slot />
 </tfoot>

package/dist/src/components/table/TableHead.astro

@@ -11,6 +11,6 @@ export const tableHead = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<th data-slot="table-head" class={tableHead({ class: className })} {...rest} role="columnheader">
+<th role="columnheader" class={tableHead({ class: className })} {...rest} data-slot="table-head">
   <slot />
 </th>

package/dist/src/components/table/TableHeader.astro

@@ -11,6 +11,6 @@ export const tableHeader = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<thead data-slot="table-header" class={tableHeader({ class: className })} {...rest}>
+<thead class={tableHeader({ class: className })} {...rest} data-slot="table-header">
   <slot />
 </thead>

package/dist/src/components/table/TableRow.astro

@@ -11,6 +11,6 @@ export const tableRow = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<tr data-slot="table-row" class={tableRow({ class: className })} {...rest} role="row">
+<tr role="row" class={tableRow({ class: className })} {...rest} data-slot="table-row">
   <slot />
 </tr>

package/dist/src/components/tabs/Tabs.astro

@@ -16,8 +16,8 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
   class={tabs({ class: className })}
   data-default-value={defaultValue}
   data-sync-key={syncKey}
-  data-slot="tabs"
   {...rest}
+  data-slot="tabs"
 >
   <slot />
 </div>

package/dist/src/components/tabs/TabsContent.astro

@@ -15,7 +15,6 @@ const { value, class: className, ...rest } = Astro.props;
 
 <div
   class={tabsContent({ class: className })}
-  data-slot="tabs-content"
   data-tabs-content
   data-value={value}
   data-state="inactive"
@@ -23,6 +22,7 @@ const { value, class: className, ...rest } = Astro.props;
   tabindex="0"
   hidden
   {...rest}
+  data-slot="tabs-content"
 >
   <slot />
 </div>

package/dist/src/components/tabs/TabsList.astro

@@ -13,10 +13,10 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class={tabsList({ class: className })}
-  data-slot="tabs-list"
   data-tabs-list
   role="tablist"
   {...rest}
+  data-slot="tabs-list"
 >
   <slot />
 </div>

package/dist/src/components/tabs/TabsTrigger.astro

@@ -22,13 +22,13 @@ const { value, class: className, ...rest } = Astro.props;
 
 <button
   class={tabsTrigger({ class: className })}
-  data-slot="tabs-trigger"
   data-tabs-trigger
   data-value={value}
   data-state="inactive"
   role="tab"
   aria-selected="false"
   {...rest}
+  data-slot="tabs-trigger"
 >
   <slot />
 </button>

package/dist/src/components/textarea/Textarea.astro

@@ -26,4 +26,4 @@ export const textarea = tv({
 const { size, class: className, ...rest } = Astro.props;
 ---
 
-<textarea class={textarea({ size, class: className })} data-slot="textarea" {...rest}></textarea>
+<textarea class={textarea({ size, class: className })} {...rest} data-slot="textarea"></textarea>

package/dist/src/components/theme-toggle/ThemeToggle.astro

@@ -75,8 +75,8 @@ const {
   variant={variant}
   size={size}
   aria-label={ariaLabel}
-  data-slot="theme-toggle"
   {...rest}
+  data-slot="theme-toggle"
 >
   <slot>
     <span class="size-5" data-theme-icon-wrapper>

package/dist/src/components/toast/ToastDescription.astro

@@ -13,9 +13,9 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class={toastDescription({ class: className })}
-  data-slot="toast-description"
   data-toast-description
   {...rest}
+  data-slot="toast-description"
 >
   <slot />
 </div>

package/dist/src/components/toast/ToastItem.astro

@@ -30,12 +30,12 @@ const { class: className, variant = "default", ...rest } = Astro.props;
 
 <div
   class={toastItem({ variant, class: className })}
-  data-slot="toast"
   data-variant={variant}
   data-state="open"
   role="dialog"
   aria-modal="false"
   {...rest}
+  data-slot="toast"
 >
   <div
     class="starwind-toast-content grid gap-1 transition-opacity duration-200 data-behind:opacity-0 data-expanded:opacity-100"

package/dist/src/components/toast/Toaster.astro

@@ -45,7 +45,6 @@ const {
 
 <div
   class={toastViewport({ class: className })}
-  data-slot="toast-viewport"
   data-position={position}
   data-limit={limit}
   data-duration={duration}
@@ -57,6 +56,7 @@ const {
   tabindex={-1}
   style={`--gap: ${gap}; --peek: ${peek};`}
   {...rest}
+  data-slot="toast-viewport"
 >
   <!-- Hidden templates for each variant - JS will clone these -->
   <slot>

package/dist/src/components/toggle/Toggle.astro

@@ -50,11 +50,11 @@ const dataState = defaultPressed ? "on" : "off";
 <button
   type="button"
   class={toggle({ variant, size, class: `starwind-toggle ${className || ""}` })}
-  data-slot="toggle"
   data-state={dataState}
   data-sync-group={syncGroup}
   aria-pressed={defaultPressed}
   {...rest}
+  data-slot="toggle"
 >
   <slot />
 </button>