compote-ui 0.80.0 → 0.81.0

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

@@ -1,97 +1,97 @@
-<script lang="ts">
-	import { Popover, usePopoverContext } from '@ark-ui/svelte/popover';
-	import type { PopoverContentProps } from '@ark-ui/svelte/popover';
-	import { Portal } from '@ark-ui/svelte/portal';
-	import { cn } from 'tailwind-variants';
-	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
-	import type { ClassValue } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-	import { getPopoverLabels } from './popover-labels.svelte';
-
-	interface Props extends Omit<PopoverContentProps, 'class' | 'children'> {
-		class?: ClassValue;
-		children: Snippet;
-		showArrow?: boolean;
-	}
-
-	let {
-		class: className,
-		children,
-		showArrow = true,
-		'aria-labelledby': ariaLabelledby,
-		'aria-describedby': ariaDescribedby,
-		...rest
-	}: Props = $props();
-
-	const popover = usePopoverContext();
-	const labels = getPopoverLabels();
-
-	// Explicit labelling wins; otherwise link the Title / Description rendered inside.
-	const labelledby = $derived(
-		ariaLabelledby ??
-			(labels?.hasTitle && !rest['aria-label'] ? popover().getTitleProps().id : undefined)
-	);
-	const describedby = $derived(
-		ariaDescribedby ?? (labels?.hasDescription ? popover().getDescriptionProps().id : undefined)
-	);
-</script>
-
-<Portal>
-	<Popover.Positioner>
-		<Popover.Content
-			{...rest}
-			aria-labelledby={labelledby}
-			aria-describedby={describedby}
-			class={cn(
-				'z-50 w-72 rounded-md border bg-surface-document p-4 shadow-md outline-none [--arrow-background:var(--compote-surface-1)] [--arrow-size:10px]',
-				'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-				'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-				className
-			)}
-			{...releaseFocusOnExitProps}
-		>
-			{#if showArrow}
-				<Popover.Arrow>
-					<Popover.ArrowTip class="border-t border-l border-border" />
-				</Popover.Arrow>
-			{/if}
-			{@render children()}
-		</Popover.Content>
-	</Popover.Positioner>
-</Portal>
-
-<style>
-	:global([data-scope='popover'][data-part='content']) {
-		transform-origin: var(--transform-origin);
-	}
-
-	:global([data-scope='popover'][data-part='content'][data-state='open']) {
-		animation: popover-in 150ms ease-out;
-	}
-
-	:global([data-scope='popover'][data-part='content'][data-state='closed']) {
-		animation: popover-out 100ms ease-in;
-	}
-
-	@keyframes popover-in {
-		from {
-			opacity: 0;
-			transform: scale(0.95);
-		}
-		to {
-			opacity: 1;
-			transform: scale(1);
-		}
-	}
-
-	@keyframes popover-out {
-		from {
-			opacity: 1;
-			transform: scale(1);
-		}
-		to {
-			opacity: 0;
-			transform: scale(0.95);
-		}
-	}
-</style>
+<script lang="ts">
+	import { Popover, usePopoverContext } from '@ark-ui/svelte/popover';
+	import type { PopoverContentProps } from '@ark-ui/svelte/popover';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { cn } from 'tailwind-variants';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
+	import type { ClassValue } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { getPopoverLabels } from './popover-labels.svelte';
+
+	interface Props extends Omit<PopoverContentProps, 'class' | 'children'> {
+		class?: ClassValue;
+		children: Snippet;
+		showArrow?: boolean;
+	}
+
+	let {
+		class: className,
+		children,
+		showArrow = true,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		...rest
+	}: Props = $props();
+
+	const popover = usePopoverContext();
+	const labels = getPopoverLabels();
+
+	// Explicit labelling wins; otherwise link the Title / Description rendered inside.
+	const labelledby = $derived(
+		ariaLabelledby ??
+			(labels?.hasTitle && !rest['aria-label'] ? popover().getTitleProps().id : undefined)
+	);
+	const describedby = $derived(
+		ariaDescribedby ?? (labels?.hasDescription ? popover().getDescriptionProps().id : undefined)
+	);
+</script>
+
+<Portal>
+	<Popover.Positioner>
+		<Popover.Content
+			{...rest}
+			aria-labelledby={labelledby}
+			aria-describedby={describedby}
+			class={cn(
+				'z-50 w-72 rounded-md border bg-surface-document p-4 shadow-md outline-none [--arrow-background:var(--compote-surface-1)] [--arrow-size:10px]',
+				'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+				'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+				className
+			)}
+			{...releaseFocusOnExitProps}
+		>
+			{#if showArrow}
+				<Popover.Arrow>
+					<Popover.ArrowTip class="border-t border-l border-border" />
+				</Popover.Arrow>
+			{/if}
+			{@render children()}
+		</Popover.Content>
+	</Popover.Positioner>
+</Portal>
+
+<style>
+	:global([data-scope='popover'][data-part='content']) {
+		transform-origin: var(--transform-origin);
+	}
+
+	:global([data-scope='popover'][data-part='content'][data-state='open']) {
+		animation: popover-in 150ms ease-out;
+	}
+
+	:global([data-scope='popover'][data-part='content'][data-state='closed']) {
+		animation: popover-out 100ms ease-in;
+	}
+
+	@keyframes popover-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes popover-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+</style>

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

@@ -1,19 +1,19 @@
-<script lang="ts">
-	import { Popover } from '@ark-ui/svelte/popover';
-	import type { PopoverDescriptionBaseProps } from '@ark-ui/svelte/popover';
-	import type { ClassValue } from 'svelte/elements';
-	import { getPopoverLabels } from './popover-labels.svelte';
-
-	interface Props extends PopoverDescriptionBaseProps {
-		class?: ClassValue;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const labels = getPopoverLabels();
-	$effect(() => labels?.registerDescription());
-</script>
-
-<Popover.Description {...rest} class={className ?? 'mt-1 text-sm text-ink-dim'}>
-	{@render children?.()}
-</Popover.Description>
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverDescriptionBaseProps } from '@ark-ui/svelte/popover';
+	import type { ClassValue } from 'svelte/elements';
+	import { getPopoverLabels } from './popover-labels.svelte';
+
+	interface Props extends PopoverDescriptionBaseProps {
+		class?: ClassValue;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const labels = getPopoverLabels();
+	$effect(() => labels?.registerDescription());
+</script>
+
+<Popover.Description {...rest} class={className ?? 'mt-1 text-sm text-ink-dim'}>
+	{@render children?.()}
+</Popover.Description>

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

@@ -1,27 +1,27 @@
-<script lang="ts">
-	import { Popover } from '@ark-ui/svelte/popover';
-	import type { PopoverRootBaseProps } from '@ark-ui/svelte/popover';
-	import type { Snippet } from 'svelte';
-	import { setPopoverLabels } from './popover-labels.svelte';
-
-	interface Props extends PopoverRootBaseProps {
-		open?: boolean;
-		children: Snippet;
-		lazyMount?: boolean;
-		unmountOnExit?: boolean;
-	}
-
-	let {
-		open = $bindable(),
-		children,
-		lazyMount = true,
-		unmountOnExit = true,
-		...restProps
-	}: Props = $props();
-
-	setPopoverLabels();
-</script>
-
-<Popover.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
-	{@render children()}
-</Popover.Root>
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverRootBaseProps } from '@ark-ui/svelte/popover';
+	import type { Snippet } from 'svelte';
+	import { setPopoverLabels } from './popover-labels.svelte';
+
+	interface Props extends PopoverRootBaseProps {
+		open?: boolean;
+		children: Snippet;
+		lazyMount?: boolean;
+		unmountOnExit?: boolean;
+	}
+
+	let {
+		open = $bindable(),
+		children,
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: Props = $props();
+
+	setPopoverLabels();
+</script>
+
+<Popover.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
+	{@render children()}
+</Popover.Root>

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

@@ -1,19 +1,19 @@
-<script lang="ts">
-	import { Popover } from '@ark-ui/svelte/popover';
-	import type { PopoverTitleBaseProps } from '@ark-ui/svelte/popover';
-	import type { ClassValue } from 'svelte/elements';
-	import { getPopoverLabels } from './popover-labels.svelte';
-
-	interface Props extends PopoverTitleBaseProps {
-		class?: ClassValue;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const labels = getPopoverLabels();
-	$effect(() => labels?.registerTitle());
-</script>
-
-<Popover.Title {...rest} class={className ?? 'text-sm font-semibold'}>
-	{@render children?.()}
-</Popover.Title>
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverTitleBaseProps } from '@ark-ui/svelte/popover';
+	import type { ClassValue } from 'svelte/elements';
+	import { getPopoverLabels } from './popover-labels.svelte';
+
+	interface Props extends PopoverTitleBaseProps {
+		class?: ClassValue;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const labels = getPopoverLabels();
+	$effect(() => labels?.registerTitle());
+</script>
+
+<Popover.Title {...rest} class={className ?? 'text-sm font-semibold'}>
+	{@render children?.()}
+</Popover.Title>

package/dist/icons/PhFunnelFill.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-	let { class: className = '', ...restProps } = $props();
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width="1em"
-	height="1em"
-	viewBox="0 0 256 256"
-	class={className}
-	{...restProps}
->
-	<path
-		fill="currentColor"
-		d="m227.81 66.76l-.08.09L160 139.17v55.49a16 16 0 0 1-7.13 13.34l-32 21.34A16 16 0 0 1 96 216v-76.83L28.27 66.85l-.08-.09A16 16 0 0 1 40 40h176a16 16 0 0 1 11.84 26.76Z"
-	/>
-</svg>
-
-<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="m227.81 66.76l-.08.09L160 139.17v55.49a16 16 0 0 1-7.13 13.34l-32 21.34A16 16 0 0 1 96 216v-76.83L28.27 66.85l-.08-.09A16 16 0 0 1 40 40h176a16 16 0 0 1 11.84 26.76Z"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.80.0",
+	"version": "0.81.0",
 	"license": "MIT",
 	"repository": {
 		"type": "git",