@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.1.0

package/dist/lib/components/ui/calendar/calendar-month-select.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		className
+	)}
+>
+	<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pe-1 ps-2 text-sm font-medium [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.MonthSelect>
+</span>

package/dist/lib/components/ui/calendar/calendar-month-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from "bits-ui";
+declare const CalendarMonthSelect: import("svelte").Component<Omit<Omit<CalendarPrimitive.MonthSelectProps, "child">, "children">, {}, "ref">;
+type CalendarMonthSelect = ReturnType<typeof CalendarMonthSelect>;
+export default CalendarMonthSelect;

package/dist/lib/components/ui/calendar/calendar-month.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/calendar/calendar-month.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const CalendarMonth: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type CalendarMonth = ReturnType<typeof CalendarMonth>;
+export default CalendarMonth;

package/dist/lib/components/ui/calendar/calendar-months.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
+	import { cn, type WithElementRef } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/calendar/calendar-months.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../utils.js";
 declare const CalendarMonths: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CalendarMonths = ReturnType<typeof CalendarMonths>;
 export default CalendarMonths;

package/dist/lib/components/ui/calendar/calendar-nav.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+>
+	{@render children?.()}
+</nav>

package/dist/lib/components/ui/calendar/calendar-nav.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const CalendarNav: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type CalendarNav = ReturnType<typeof CalendarNav>;
+export default CalendarNav;

package/dist/lib/components/ui/calendar/calendar-next-button.svelte

@@ -1,28 +1,31 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from '../button/index';
-	import { cn } from "../../../utils";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { buttonVariants, type ButtonVariant } from "../button/index.js";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "ghost",
 		...restProps
-	}: CalendarPrimitive.NextButtonProps = $props();
+	}: CalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight />
+	<ChevronRightIcon class="size-4" />
 {/snippet}
 
 <CalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant }),
+		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
-	{...restProps}
 	children={children || Fallback}
+	{...restProps}
 />

package/dist/lib/components/ui/calendar/calendar-next-button.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Calendar as CalendarPrimitive } from "bits-ui";
-declare const CalendarNextButton: import("svelte").Component<CalendarPrimitive.NextButtonProps, {}, "ref">;
+import { type ButtonVariant } from "../button/index.js";
+type $$ComponentProps = CalendarPrimitive.NextButtonProps & {
+    variant?: ButtonVariant;
+};
+declare const CalendarNextButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type CalendarNextButton = ReturnType<typeof CalendarNextButton>;
 export default CalendarNextButton;

package/dist/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -1,28 +1,31 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from '../button/index';
-	import { cn } from "../../../utils";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants, type ButtonVariant } from "../button/index.js";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "ghost",
 		...restProps
-	}: CalendarPrimitive.PrevButtonProps = $props();
+	}: CalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft />
+	<ChevronLeftIcon class="size-4" />
 {/snippet}
 
 <CalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant }),
+		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
-	{...restProps}
 	children={children || Fallback}
+	{...restProps}
 />

package/dist/lib/components/ui/calendar/calendar-prev-button.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Calendar as CalendarPrimitive } from "bits-ui";
-declare const CalendarPrevButton: import("svelte").Component<CalendarPrimitive.PrevButtonProps, {}, "ref">;
+import { type ButtonVariant } from "../button/index.js";
+type $$ComponentProps = CalendarPrimitive.PrevButtonProps & {
+    variant?: ButtonVariant;
+};
+declare const CalendarPrevButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type CalendarPrevButton = ReturnType<typeof CalendarPrevButton>;
 export default CalendarPrevButton;

package/dist/lib/components/ui/calendar/calendar-year-select.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		className
+	)}
+>
+	<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pe-1 ps-2 text-sm font-medium [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.YearSelect>
+</span>

package/dist/lib/components/ui/calendar/calendar-year-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from "bits-ui";
+declare const CalendarYearSelect: import("svelte").Component<Omit<Omit<CalendarPrimitive.YearSelectProps, "child">, "children">, {}, "ref">;
+type CalendarYearSelect = ReturnType<typeof CalendarYearSelect>;
+export default CalendarYearSelect;

package/dist/lib/components/ui/calendar/calendar.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import * as Calendar from "./index.js";
-	import { cn } from "../../../utils";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import type { ButtonVariant } from "../button/button.svelte";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -9,8 +12,31 @@
 		placeholder = $bindable(),
 		class: className,
 		weekdayFormat = "short",
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
 		...restProps
-	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: CalendarPrimitive.MonthSelectProps["months"];
+		years?: CalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
+	});
 </script>
 
 <!--
@@ -22,39 +48,67 @@ get along, so we shut typescript up by casting `value` to `never`.
 	bind:ref
 	bind:placeholder
 	{weekdayFormat}
-	class={cn("p-3", className)}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Header>
-			<Calendar.PrevButton />
-			<Calendar.Heading />
-			<Calendar.NextButton />
-		</Calendar.Header>
 		<Calendar.Months>
-			{#each months as month (month)}
-				<Calendar.Grid>
-					<Calendar.GridHead>
-						<Calendar.GridRow class="flex">
-							{#each weekdays as weekday (weekday)}
-								<Calendar.HeadCell>
-									{weekday.slice(0, 2)}
-								</Calendar.HeadCell>
-							{/each}
-						</Calendar.GridRow>
-					</Calendar.GridHead>
-					<Calendar.GridBody>
-						{#each month.weeks as weekDates (weekDates)}
-							<Calendar.GridRow class="mt-2 w-full">
-								{#each weekDates as date (date)}
-									<Calendar.Cell {date} month={month.value}>
-										<Calendar.Day />
-									</Calendar.Cell>
+			<Calendar.Nav>
+				<Calendar.PrevButton variant={buttonVariant} />
+				<Calendar.NextButton variant={buttonVariant} />
+			</Calendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<Calendar.Month>
+					<Calendar.Header>
+						<Calendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</Calendar.Header>
+					<Calendar.Grid>
+						<Calendar.GridHead>
+							<Calendar.GridRow class="select-none">
+								{#each weekdays as weekday (weekday)}
+									<Calendar.HeadCell>
+										{weekday.slice(0, 2)}
+									</Calendar.HeadCell>
 								{/each}
 							</Calendar.GridRow>
-						{/each}
-					</Calendar.GridBody>
-				</Calendar.Grid>
+						</Calendar.GridHead>
+						<Calendar.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<Calendar.GridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<Calendar.Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<Calendar.Day />
+											{/if}
+										</Calendar.Cell>
+									{/each}
+								</Calendar.GridRow>
+							{/each}
+						</Calendar.GridBody>
+					</Calendar.Grid>
+				</Calendar.Month>
 			{/each}
 		</Calendar.Months>
 	{/snippet}

package/dist/lib/components/ui/calendar/calendar.svelte.d.ts

@@ -1,5 +1,21 @@
-import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { Calendar as CalendarPrimitive } from "bits-ui";
 import * as Calendar from "./index.js";
-declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "placeholder" | "ref" | "value">;
+import { type WithoutChildrenOrChild } from "../../utils.js";
+import type { ButtonVariant } from "../button/button.svelte";
+import { type DateValue } from "@internationalized/date";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+    months?: CalendarPrimitive.MonthSelectProps["months"];
+    years?: CalendarPrimitive.YearSelectProps["years"];
+    monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+    yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+    day?: Snippet<[{
+        day: DateValue;
+        outsideMonth: boolean;
+    }]>;
+};
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder" | "ref">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/lib/components/ui/calendar/index.d.ts

@@ -11,4 +11,9 @@ import GridHead from "./calendar-grid-head.svelte";
 import HeadCell from "./calendar-head-cell.svelte";
 import NextButton from "./calendar-next-button.svelte";
 import PrevButton from "./calendar-prev-button.svelte";
-export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Root as Calendar, };
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, Root as Calendar, };

package/dist/lib/components/ui/calendar/index.js

@@ -11,6 +11,11 @@ import GridHead from "./calendar-grid-head.svelte";
 import HeadCell from "./calendar-head-cell.svelte";
 import NextButton from "./calendar-next-button.svelte";
 import PrevButton from "./calendar-prev-button.svelte";
-export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, 
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, 
 //
 Root as Calendar, };

package/dist/lib/components/ui/card/card-action.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/card/card-action.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const CardAction: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardAction = ReturnType<typeof CardAction>;
+export default CardAction;

package/dist/lib/components/ui/card/card-content.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
+	import { cn, type WithElementRef } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/lib/components/ui/card/card-content.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../utils.js";
 declare const CardContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CardContent = ReturnType<typeof CardContent>;
 export default CardContent;

package/dist/lib/components/ui/card/card-description.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
+	import { cn, type WithElementRef } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
-<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </p>

package/dist/lib/components/ui/card/card-description.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../utils.js";
 declare const CardDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
 type CardDescription = ReturnType<typeof CardDescription>;
 export default CardDescription;

package/dist/lib/components/ui/card/card-footer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/lib/components/ui/card/card-footer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const CardFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CardFooter = ReturnType<typeof CardFooter>;

package/dist/lib/components/ui/card/card-header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,14 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/lib/components/ui/card/card-header.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const CardHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CardHeader = ReturnType<typeof CardHeader>;

package/dist/lib/components/ui/card/card-title.svelte

@@ -1,24 +1,19 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
+	import { cn, type WithElementRef } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 3,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	role="heading"
-	aria-level={level}
 	bind:this={ref}
-	class={cn("font-semibold leading-none tracking-tight", className)}
+	data-slot="card-title"
+	class={cn("font-semibold leading-none", className)}
 	{...restProps}
 >
 	{@render children?.()}