compote-ui 0.13.1 → 0.15.0

package/dist/components/button/button.variants.d.ts

@@ -13,7 +13,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         'icon-sm': string;
         'icon-lg': string;
     };
-}, undefined, "focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+}, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", {
     variant: {
         default: string;
         outline: string;
@@ -41,6 +41,6 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         'icon-sm': string;
         'icon-lg': string;
     };
-}, undefined, "focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
+}, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof button>['variant'];
 export type ButtonSize = VariantProps<typeof button>['size'];

package/dist/components/button/button.variants.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const button = tv({
-    base: 'focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    base: 'inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50',
     variants: {
         variant: {
             default: 'bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80',

package/dist/components/button/link-button.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { button, type ButtonVariant, type ButtonSize } from './button.variants';
+
+	type Props = Omit<HTMLAnchorAttributes, 'class'> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		class?: string;
+	};
+
+	let { variant, size, class: className, children, ...rest }: Props = $props();
+</script>
+
+<a class={button({ variant, size, class: className })} {...rest}>
+	{@render children?.()}
+</a>

package/dist/components/button/link-button.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type ButtonVariant, type ButtonSize } from './button.variants';
+type Props = Omit<HTMLAnchorAttributes, 'class'> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    class?: string;
+};
+declare const LinkButton: import("svelte").Component<Props, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('p-6 pt-0', className)} {...rest}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardContent: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type CardContent = ReturnType<typeof CardContent>;
+export default CardContent;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLParagraphElement> = $props();
+</script>
+
+<p class={cn('text-sm text-ink-dim', className)} {...rest}>
+	{@render children?.()}
+</p>

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardDescription: import("svelte").Component<HTMLAttributes<HTMLParagraphElement>, {}, "">;
+type CardDescription = ReturnType<typeof CardDescription>;
+export default CardDescription;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('flex items-center p-6 pt-0', className)} {...rest}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardFooter: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('flex flex-col gap-1.5 pb-4', className)} {...rest}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardHeader: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLHeadingElement> = $props();
+</script>
+
+<h3 class={cn('text-lg font-semibold', className)} {...rest}>
+	{@render children?.()}
+</h3>

package/dist/components/card/card-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardTitle: import("svelte").Component<HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/card/card.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('rounded-xl border border-border bg-surface-1 text-ink', className)} {...rest}>
+	{@render children?.()}
+</div>

package/dist/components/card/card.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const Card: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/card/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from './card.svelte';
+export { default as Header } from './card-header.svelte';
+export { default as Title } from './card-title.svelte';
+export { default as Description } from './card-description.svelte';
+export { default as Content } from './card-content.svelte';
+export { default as Footer } from './card-footer.svelte';

package/dist/components/card/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './card.svelte';
+export { default as Header } from './card-header.svelte';
+export { default as Title } from './card-title.svelte';
+export { default as Description } from './card-description.svelte';
+export { default as Content } from './card-content.svelte';
+export { default as Footer } from './card-footer.svelte';

package/dist/components/carousel/{carousel.svelte.d.ts → carousel backup.svelte.d.ts }

@@ -1,4 +1,3 @@
-import { Carousel } from '@ark-ui/svelte/carousel';
 import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
 interface ImageItem {
     id?: string | number;
@@ -14,6 +13,6 @@ interface Props extends Omit<CarouselRootProps, 'slideCount'> {
     selectedIds?: (string | number)[];
     onSetStar?: (id: string | number) => void;
 }
-declare const Carousel: import("svelte").Component<Props, {}, "selectedIds">;
-type Carousel = ReturnType<typeof Carousel>;
-export default Carousel;
+declare const Carouselbackup: import("svelte").Component<Props, {}, "selectedIds">;
+type Carouselbackup = ReturnType<typeof Carouselbackup>;
+export default Carouselbackup;

package/dist/components/carousel/carousel-control.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselControlProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselControlProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Control
+	class={cn(
+		'flex items-center gap-2 data-[justify=center]:justify-center data-[orientation=vertical]:flex-col',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Control>

package/dist/components/carousel/carousel-control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselControlProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselControlProps & {
+    children?: Snippet;
+};
+declare const CarouselControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselControl = ReturnType<typeof CarouselControl>;
+export default CarouselControl;

package/dist/components/carousel/carousel-indicator-group.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselIndicatorGroupProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselIndicatorGroupProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.IndicatorGroup
+	class={cn('flex justify-center gap-2 data-[orientation=vertical]:flex-col', className)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.IndicatorGroup>

package/dist/components/carousel/carousel-indicator-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselIndicatorGroupProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselIndicatorGroupProps & {
+    children?: Snippet;
+};
+declare const CarouselIndicatorGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselIndicatorGroup = ReturnType<typeof CarouselIndicatorGroup>;
+export default CarouselIndicatorGroup;

package/dist/components/carousel/carousel-indicator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselIndicatorProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		thumbnail = false,
+		...rest
+	}: CarouselIndicatorProps & { children?: Snippet; thumbnail?: boolean } = $props();
+</script>
+
+<Carousel.Indicator
+	class={cn(
+		thumbnail
+			? 'h-14 w-14 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent opacity-60 transition-all data-current:border-primary data-current:opacity-100 [&_img]:h-full [&_img]:w-full [&_img]:object-cover'
+			: 'size-2 cursor-pointer rounded-full border-0 bg-surface-3 p-0 data-current:bg-primary',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Indicator>

package/dist/components/carousel/carousel-indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CarouselIndicatorProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselIndicatorProps & {
+    children?: Snippet;
+    thumbnail?: boolean;
+};
+declare const CarouselIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselIndicator = ReturnType<typeof CarouselIndicator>;
+export default CarouselIndicator;

package/dist/components/carousel/carousel-item-group.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselItemGroupProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselItemGroupProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.ItemGroup
+	class={cn(
+		'flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.ItemGroup>

package/dist/components/carousel/carousel-item-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselItemGroupProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselItemGroupProps & {
+    children?: Snippet;
+};
+declare const CarouselItemGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselItemGroup = ReturnType<typeof CarouselItemGroup>;
+export default CarouselItemGroup;

package/dist/components/carousel/carousel-item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselItemProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselItemProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Item class={cn('min-w-0 flex-[0_0_100%]', className)} {...rest}>
+	{@render children?.()}
+</Carousel.Item>

package/dist/components/carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselItemProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselItemProps & {
+    children?: Snippet;
+};
+declare const CarouselItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/components/carousel/carousel-next-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import PhArrowRight from '../../icons/PhArrowRight.svelte';
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselNextTriggerProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselNextTriggerProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.NextTrigger
+	class={cn(
+		'inline-flex size-9 items-center justify-center rounded-md border bg-surface-1 shadow-sm hover:bg-surface-2 active:bg-surface-3 disabled:opacity-50',
+		className
+	)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhArrowRight class="size-4" />
+	{/if}
+</Carousel.NextTrigger>

package/dist/components/carousel/carousel-next-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselNextTriggerProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselNextTriggerProps & {
+    children?: Snippet;
+};
+declare const CarouselNextTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselNextTrigger = ReturnType<typeof CarouselNextTrigger>;
+export default CarouselNextTrigger;

package/dist/components/carousel/carousel-prev-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import PhArrowLeft from '../../icons/PhArrowLeft.svelte';
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselPrevTriggerProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselPrevTriggerProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.PrevTrigger
+	class={cn(
+		'inline-flex size-9 items-center justify-center rounded-md border bg-surface-1 shadow-sm hover:bg-surface-2 active:bg-surface-3 disabled:opacity-50',
+		className
+	)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhArrowLeft class="size-4" />
+	{/if}
+</Carousel.PrevTrigger>

package/dist/components/carousel/carousel-prev-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselPrevTriggerProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselPrevTriggerProps & {
+    children?: Snippet;
+};
+declare const CarouselPrevTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselPrevTrigger = ReturnType<typeof CarouselPrevTrigger>;
+export default CarouselPrevTrigger;

package/dist/components/carousel/carousel-root.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselRootProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Root
+	class={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', className)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Root>

package/dist/components/carousel/carousel-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselRootProps & {
+    children?: Snippet;
+};
+declare const CarouselRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselRoot = ReturnType<typeof CarouselRoot>;
+export default CarouselRoot;

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Root } from './carousel-root.svelte';
+export { default as Control } from './carousel-control.svelte';
+export { default as PrevTrigger } from './carousel-prev-trigger.svelte';
+export { default as NextTrigger } from './carousel-next-trigger.svelte';
+export { default as ItemGroup } from './carousel-item-group.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as IndicatorGroup } from './carousel-indicator-group.svelte';
+export { default as Indicator } from './carousel-indicator.svelte';

package/dist/components/carousel/index.js

@@ -0,0 +1,8 @@
+export { default as Root } from './carousel-root.svelte';
+export { default as Control } from './carousel-control.svelte';
+export { default as PrevTrigger } from './carousel-prev-trigger.svelte';
+export { default as NextTrigger } from './carousel-next-trigger.svelte';
+export { default as ItemGroup } from './carousel-item-group.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as IndicatorGroup } from './carousel-indicator-group.svelte';
+export { default as Indicator } from './carousel-indicator.svelte';

package/dist/components/checkbox/checkbox.svelte

@@ -15,7 +15,7 @@
 	<Checkbox.Control
 		class="{children
 			? 'mt-0.5'
-			: ''} data-focus-visible:outline-ring flex size-5 shrink-0 items-center justify-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
+			: ''} flex size-5 shrink-0 items-center justify-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
 	>
 		<Checkbox.Indicator>
 			<PhCheck class="size-3.5 text-ink-inverse" />

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export { default as Button } from './components/button/button.svelte';
+export { default as LinkButton } from './components/button/link-button.svelte';
+export * as Card from './components/card';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export type { ProcessImageOptions, CropRegion } from './utils/image-processing';
-export { default as Carousel } from './components/carousel/carousel.svelte';
+export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';

package/dist/index.js

@@ -1,7 +1,9 @@
 // Reexport your entry components here
 export { default as Button } from './components/button/button.svelte';
+export { default as LinkButton } from './components/button/link-button.svelte';
+export * as Card from './components/card';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
-export { default as Carousel } from './components/carousel/carousel.svelte';
+export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';

package/dist/theme.css

@@ -35,8 +35,12 @@
 	--compote-ring: var(--compote-primary);
 }
 
-.dark  { color-scheme: dark; }
-.light { color-scheme: light; }
+.dark {
+	color-scheme: dark;
+}
+.light {
+	color-scheme: light;
+}
 
 @theme inline {
 	--color-ink: var(--compote-ink);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.13.1",
+	"version": "0.15.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -35,18 +35,18 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.3",
+		"@eslint/compat": "^2.0.4",
 		"@eslint/js": "^10.0.1",
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/kit": "^2.56.1",
 		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@sveltejs/vite-plugin-svelte": "6.2.4",
 		"@tailwindcss/vite": "^4.1.18",
 		"@types/node": "^22",
-		"eslint": "^10.0.3",
+		"eslint": "^10.2.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.2",
+		"eslint-plugin-svelte": "^3.17.0",
 		"globals": "^17.4.0",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.4.1",