@dryui/ui 0.3.0 → 0.4.1

package/dist/toggle-group/toggle-group-root.svelte

@@ -23,6 +23,8 @@
 		...rest
 	}: Props = $props();
 
+	const selectedSet = $derived(new Set(value));
+
 	setToggleGroupCtx({
 		get type() {
 			return type;
@@ -35,9 +37,9 @@
 		},
 		toggle(itemValue: string) {
 			if (type === 'single') {
-				value = value.includes(itemValue) ? [] : [itemValue];
+				value = selectedSet.has(itemValue) ? [] : [itemValue];
 			} else {
-				value = value.includes(itemValue)
+				value = selectedSet.has(itemValue)
 					? value.filter((v) => v !== itemValue)
 					: [...value, itemValue];
 			}
@@ -46,7 +48,7 @@
 			return orientation;
 		},
 		isSelected(itemValue: string) {
-			return value.includes(itemValue);
+			return selectedSet.has(itemValue);
 		}
 	});
 </script>

package/dist/toggle-group/toggle-group-root.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	type?: 'single' | 'multiple';
-	value?: string[];
-	disabled?: boolean;
-	orientation?: 'horizontal' | 'vertical';
-	size?: 'sm' | 'md' | 'lg';
-	children: Snippet;
+    type?: 'single' | 'multiple';
+    value?: string[];
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
 }
-declare const ToggleGroupRoot: import('svelte').Component<Props, {}, 'value'>;
+declare const ToggleGroupRoot: import("svelte").Component<Props, {}, "value">;
 type ToggleGroupRoot = ReturnType<typeof ToggleGroupRoot>;
 export default ToggleGroupRoot;

package/dist/toolbar/toolbar-button.svelte

@@ -1,59 +1,16 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 
 	interface Props extends HTMLButtonAttributes {
 		disabled?: boolean;
 		children: Snippet;
 	}
 
-	let { disabled = false, class: className, children, ...rest }: Props = $props();
+	let { disabled = false, children, ...rest }: Props = $props();
 </script>
 
-<button
-	type="button"
-	{disabled}
-	data-part="button"
-	data-disabled={disabled || undefined}
-	tabindex={-1}
-	class={className}
-	{...rest}
->
+<Button variant="trigger" size="sm" type="button" tabindex={-1} {disabled} {...rest}>
 	{@render children()}
-</button>
-
-<style>
-	[data-part='button'] {
-		display: inline-grid;
-		place-items: center;
-		padding: var(--dry-space-2) var(--dry-space-3);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-strong);
-		background: transparent;
-		border: none;
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-part='button']:hover:not([data-disabled]) {
-		background: var(--dry-color-fill-hover);
-	}
-
-	[data-part='button']:active:not([data-disabled]) {
-		transform: translateY(1px);
-	}
-
-	[data-part='button']:focus-visible {
-		outline: 2px solid var(--dry-color-stroke-focus);
-		outline-offset: -2px;
-	}
-
-	[data-part='button'][data-disabled] {
-		color: var(--dry-color-text-disabled);
-		cursor: not-allowed;
-	}
-</style>
+</Button>

package/dist/toolbar/toolbar-button.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends HTMLButtonAttributes {
-	disabled?: boolean;
-	children: Snippet;
+    disabled?: boolean;
+    children: Snippet;
 }
-declare const ToolbarButton: import('svelte').Component<Props, {}, ''>;
+declare const ToolbarButton: import("svelte").Component<Props, {}, "">;
 type ToolbarButton = ReturnType<typeof ToolbarButton>;
 export default ToolbarButton;

package/dist/toolbar/toolbar-link.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 interface Props extends HTMLAnchorAttributes {
-	href: string;
-	children: Snippet;
+    href: string;
+    children: Snippet;
 }
-declare const ToolbarLink: import('svelte').Component<Props, {}, ''>;
+declare const ToolbarLink: import("svelte").Component<Props, {}, "">;
 type ToolbarLink = ReturnType<typeof ToolbarLink>;
 export default ToolbarLink;

package/dist/toolbar/toolbar-root.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	orientation?: 'horizontal' | 'vertical';
-	children: Snippet;
+    orientation?: 'horizontal' | 'vertical';
+    children: Snippet;
 }
-declare const ToolbarRoot: import('svelte').Component<Props, {}, ''>;
+declare const ToolbarRoot: import("svelte").Component<Props, {}, "">;
 type ToolbarRoot = ReturnType<typeof ToolbarRoot>;
 export default ToolbarRoot;

package/dist/toolbar/toolbar-separator.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {}
-declare const ToolbarSeparator: import('svelte').Component<Props, {}, ''>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+}
+declare const ToolbarSeparator: import("svelte").Component<Props, {}, "">;
 type ToolbarSeparator = ReturnType<typeof ToolbarSeparator>;
 export default ToolbarSeparator;

package/dist/tooltip/tooltip-content.svelte.d.ts

@@ -1,22 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import { type Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	placement?:
-		| 'top'
-		| 'top-start'
-		| 'top-end'
-		| 'bottom'
-		| 'bottom-start'
-		| 'bottom-end'
-		| 'left'
-		| 'left-start'
-		| 'left-end'
-		| 'right'
-		| 'right-start'
-		| 'right-end';
-	offset?: number;
-	children: Snippet;
+    placement?: Placement;
+    offset?: number;
+    children: Snippet;
 }
-declare const TooltipContent: import('svelte').Component<Props, {}, ''>;
+declare const TooltipContent: import("svelte").Component<Props, {}, "">;
 type TooltipContent = ReturnType<typeof TooltipContent>;
 export default TooltipContent;

package/dist/tooltip/tooltip-root.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 interface Props {
-	openDelay?: number;
-	closeDelay?: number;
-	children: Snippet;
+    openDelay?: number;
+    closeDelay?: number;
+    children: Snippet;
 }
-declare const TooltipRoot: import('svelte').Component<Props, {}, ''>;
+declare const TooltipRoot: import("svelte").Component<Props, {}, "">;
 type TooltipRoot = ReturnType<typeof TooltipRoot>;
 export default TooltipRoot;

package/dist/tooltip/tooltip-trigger.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TooltipTrigger: import('svelte').Component<Props, {}, ''>;
+declare const TooltipTrigger: import("svelte").Component<Props, {}, "">;
 type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
 export default TooltipTrigger;

package/dist/tour/index.d.ts

@@ -1,6 +1,6 @@
 export type { TourStep, TourRootProps, TourTooltipProps } from '@dryui/primitives';
 import TourRoot from './tour-root.svelte';
-import TourTooltip from './tour-tooltip.svelte';
+import TourTooltip from './tour-tooltip-button.svelte';
 export declare const Tour: {
     Root: typeof TourRoot;
     Tooltip: typeof TourTooltip;

package/dist/tour/index.js

@@ -1,5 +1,5 @@
 import TourRoot from './tour-root.svelte';
-import TourTooltip from './tour-tooltip.svelte';
+import TourTooltip from './tour-tooltip-button.svelte';
 export const Tour = {
     Root: TourRoot,
     Tooltip: TourTooltip

package/dist/tour/tour-root.css

@@ -0,0 +1,211 @@
+[data-tour-root] [data-tour-overlay] {
+	position: fixed;
+	inset: 0;
+	z-index: var(--dry-layer-tour-overlay);
+	pointer-events: auto;
+}
+
+[data-tour-root] [data-tour-spotlight] {
+	--dry-tour-overlay-color: var(--dry-color-overlay-backdrop-strong);
+	--dry-tour-spotlight-padding: 8px;
+	--dry-tour-spotlight-radius: 4px;
+	--dry-tour-spotlight-ring: color-mix(in srgb, var(--dry-color-fill-brand) 35%, white 25%);
+
+	position: fixed;
+	top: var(--dry-tour-spotlight-top);
+	left: var(--dry-tour-spotlight-left);
+	right: calc(100% - var(--dry-tour-spotlight-left) - var(--dry-tour-spotlight-width));
+	height: var(--dry-tour-spotlight-height);
+	border-radius: var(--dry-tour-spotlight-radius);
+	box-shadow:
+		0 0 0 1px var(--dry-tour-spotlight-ring),
+		0 0 0 9999px var(--dry-tour-overlay-color);
+	pointer-events: none;
+	z-index: var(--dry-layer-tour-spotlight);
+	transition:
+		top var(--dry-duration-normal) var(--dry-ease-out),
+		left var(--dry-duration-normal) var(--dry-ease-out),
+		right var(--dry-duration-normal) var(--dry-ease-out),
+		height var(--dry-duration-normal) var(--dry-ease-out);
+}
+
+[data-tour-root] [data-part='tooltip'] {
+	--dry-tour-tooltip-bg: var(--dry-color-bg-overlay);
+	--dry-tour-tooltip-radius: var(--dry-radius-xl);
+	--dry-tour-tooltip-shadow: var(--dry-shadow-overlay);
+	--dry-tour-tooltip-max-width: 20rem;
+	--dry-tour-arrow-size: var(--dry-space-3);
+
+	container-type: inline-size;
+	position: fixed;
+	top: var(--dry-tour-tooltip-top);
+	left: var(--dry-tour-tooltip-left);
+	z-index: var(--dry-layer-tour-tooltip);
+	pointer-events: auto;
+	display: grid;
+	grid-template-columns: minmax(
+		16rem,
+		min(var(--dry-tour-tooltip-max-width), calc(100vw - var(--dry-space-4)))
+	);
+	background: var(--dry-tour-tooltip-bg);
+	color: var(--dry-color-text-strong);
+	border: 1px solid var(--dry-color-stroke-weak);
+	border-radius: var(--dry-tour-tooltip-radius);
+	box-shadow: var(--dry-tour-tooltip-shadow);
+	padding: var(--dry-space-5);
+	transition:
+		top var(--dry-duration-normal) var(--dry-ease-out),
+		left var(--dry-duration-normal) var(--dry-ease-out),
+		opacity var(--dry-duration-fast) var(--dry-ease-out);
+}
+
+[data-tour-root] [data-part='tooltipTitle'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-base-size));
+	font-weight: 600;
+	color: var(--dry-color-text-strong);
+	margin: 0 0 var(--dry-space-2);
+	line-height: 1.3;
+}
+
+[data-tour-root] [data-part='tooltipContent'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+	color: var(--dry-color-text-weak);
+	margin: 0 0 var(--dry-space-4);
+}
+
+[data-tour-root] [data-part='tooltipFooter'] {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
+	gap: var(--dry-space-3);
+}
+
+[data-tour-root] [data-part='tooltipCounter'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+	color: var(--dry-color-text-weak);
+}
+
+[data-tour-root] [data-part='tooltipActions'] {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: max-content;
+	align-items: center;
+	gap: var(--dry-space-2);
+	justify-items: end;
+}
+
+[data-tour-root] [data-part='skipButton'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	color: var(--dry-color-text-weak);
+	background: none;
+	border: none;
+	padding: var(--dry-space-1) var(--dry-space-2);
+	cursor: pointer;
+	border-radius: var(--dry-radius-sm);
+	transition: color var(--dry-duration-fast);
+}
+
+[data-tour-root] [data-part='skipButton']:hover {
+	color: var(--dry-color-text-strong);
+}
+
+[data-tour-root] [data-part='skipButton']:focus-visible {
+	outline: 2px solid var(--dry-color-focus-ring);
+	outline-offset: 2px;
+}
+
+[data-tour-root] [data-part='prevButton'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	color: var(--dry-color-text-strong);
+	background: transparent;
+	border: 1px solid var(--dry-color-stroke-weak);
+	padding: var(--dry-space-1) var(--dry-space-3);
+	border-radius: var(--dry-radius-md);
+	cursor: pointer;
+	transition: background var(--dry-duration-fast);
+}
+
+[data-tour-root] [data-part='prevButton']:hover {
+	background: var(--dry-color-bg-raised);
+}
+
+[data-tour-root] [data-part='prevButton']:focus-visible {
+	outline: 2px solid var(--dry-color-focus-ring);
+	outline-offset: 2px;
+}
+
+[data-tour-root] [data-part='nextButton'] {
+	font-family: var(--dry-font-sans);
+	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	color: var(--dry-color-on-brand);
+	background: var(--dry-color-fill-brand);
+	border: none;
+	padding: var(--dry-space-1) var(--dry-space-3);
+	border-radius: var(--dry-radius-md);
+	cursor: pointer;
+	transition: opacity var(--dry-duration-fast);
+}
+
+[data-tour-root] [data-part='nextButton']:hover {
+	opacity: 0.9;
+}
+
+[data-tour-root] [data-part='nextButton']:focus-visible {
+	outline: 2px solid var(--dry-color-focus-ring);
+	outline-offset: 2px;
+}
+
+[data-tour-root] [data-part='tooltip']::before {
+	content: '';
+	position: absolute;
+	height: var(--dry-tour-arrow-size);
+	aspect-ratio: 1;
+	background: var(--dry-tour-tooltip-bg);
+	border: 1px solid var(--dry-color-stroke-weak);
+	transform: translate(-50%, -50%) rotate(45deg);
+}
+
+[data-tour-root] [data-part='tooltip'][data-placement='bottom']::before {
+	top: 0;
+	left: var(--dry-tour-tooltip-arrow-offset, 50%);
+	border-right: none;
+	border-bottom: none;
+}
+
+[data-tour-root] [data-part='tooltip'][data-placement='top']::before {
+	bottom: 0;
+	left: var(--dry-tour-tooltip-arrow-offset, 50%);
+	border-left: none;
+	border-top: none;
+}
+
+[data-tour-root] [data-part='tooltip'][data-placement='left']::before {
+	right: 0;
+	top: var(--dry-tour-tooltip-arrow-offset, 50%);
+	border-left: none;
+	border-bottom: none;
+}
+
+[data-tour-root] [data-part='tooltip'][data-placement='right']::before {
+	left: 0;
+	top: var(--dry-tour-tooltip-arrow-offset, 50%);
+	border-right: none;
+	border-top: none;
+}
+
+@container (max-width: 480px) {
+	[data-tour-root] [data-part='tooltip'] {
+		grid-template-columns: minmax(0, min(16rem, calc(100vw - var(--dry-space-4))));
+	}
+
+	[data-tour-root] [data-part='tooltipFooter'] {
+		grid-template-columns: 1fr;
+		align-items: stretch;
+	}
+}

package/dist/tour/tour-root.css.d.ts

@@ -0,0 +1,2 @@
+declare const css: void;
+export default css;

package/dist/tour/tour-root.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import './tour-root.css';
+
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { Tour as TourPrimitive, type TourStep } from '@dryui/primitives/tour';
@@ -15,220 +17,3 @@
 </script>
 
 <TourPrimitive.Root bind:active data-part="root" {children} {...rest} />
-
-<style>
-	/* Tour primitives render these nodes in child components, so the hooks must be global. */
-	:global([data-tour-overlay]) {
-		position: fixed;
-		inset: 0;
-		z-index: var(--dry-layer-tour-overlay);
-		pointer-events: auto;
-	}
-
-	:global([data-tour-spotlight]) {
-		--dry-tour-overlay-color: var(--dry-color-overlay-backdrop-strong);
-		--dry-tour-spotlight-padding: 8px;
-		--dry-tour-spotlight-radius: 4px;
-		--dry-tour-spotlight-ring: color-mix(in srgb, var(--dry-color-fill-brand) 35%, white 25%);
-
-		position: fixed;
-		top: var(--dry-tour-spotlight-top);
-		left: var(--dry-tour-spotlight-left);
-		right: calc(100% - var(--dry-tour-spotlight-left) - var(--dry-tour-spotlight-width));
-		height: var(--dry-tour-spotlight-height);
-		border-radius: var(--dry-tour-spotlight-radius);
-		box-shadow:
-			0 0 0 1px var(--dry-tour-spotlight-ring),
-			0 0 0 9999px var(--dry-tour-overlay-color);
-		pointer-events: none;
-		z-index: var(--dry-layer-tour-spotlight);
-		transition:
-			top var(--dry-duration-normal) var(--dry-ease-out),
-			left var(--dry-duration-normal) var(--dry-ease-out),
-			right var(--dry-duration-normal) var(--dry-ease-out),
-			height var(--dry-duration-normal) var(--dry-ease-out);
-	}
-
-	:global([data-part='tooltip']) {
-		--dry-tour-tooltip-bg: var(--dry-color-bg-overlay);
-		--dry-tour-tooltip-radius: var(--dry-radius-xl);
-		--dry-tour-tooltip-shadow: var(--dry-shadow-overlay);
-		--dry-tour-tooltip-max-width: 20rem;
-		--dry-tour-arrow-size: var(--dry-space-3);
-
-		container-type: inline-size;
-		position: fixed;
-		top: var(--dry-tour-tooltip-top);
-		left: var(--dry-tour-tooltip-left);
-		z-index: var(--dry-layer-tour-tooltip);
-		pointer-events: auto;
-		display: grid;
-		grid-template-columns: minmax(
-			16rem,
-			min(var(--dry-tour-tooltip-max-width), calc(100vw - var(--dry-space-4)))
-		);
-		background: var(--dry-tour-tooltip-bg);
-		color: var(--dry-color-text-strong);
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-tour-tooltip-radius);
-		box-shadow: var(--dry-tour-tooltip-shadow);
-		padding: var(--dry-space-5);
-
-		transition:
-			top var(--dry-duration-normal) var(--dry-ease-out),
-			left var(--dry-duration-normal) var(--dry-ease-out),
-			opacity var(--dry-duration-fast) var(--dry-ease-out);
-	}
-
-	:global([data-part='tooltipTitle']) {
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-base-size));
-		font-weight: 600;
-		color: var(--dry-color-text-strong);
-		margin: 0 0 var(--dry-space-2);
-		line-height: 1.3;
-	}
-
-	:global([data-part='tooltipContent']) {
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
-		color: var(--dry-color-text-weak);
-		margin: 0 0 var(--dry-space-4);
-	}
-
-	:global([data-part='tooltipFooter']) {
-		display: grid;
-		grid-template-columns: 1fr auto;
-		align-items: center;
-		gap: var(--dry-space-3);
-	}
-
-	:global([data-part='tooltipCounter']) {
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		color: var(--dry-color-text-weak);
-	}
-
-	:global([data-part='tooltipActions']) {
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-2);
-		justify-items: end;
-	}
-
-	:global([data-part='skipButton']) {
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		color: var(--dry-color-text-weak);
-		background: none;
-		border: none;
-		padding: var(--dry-space-1) var(--dry-space-2);
-		cursor: pointer;
-		border-radius: var(--dry-radius-sm);
-		transition: color var(--dry-duration-fast);
-	}
-
-	:global([data-part='skipButton']):hover {
-		color: var(--dry-color-text-strong);
-	}
-
-	:global([data-part='skipButton']):focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	:global([data-part='prevButton']) {
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		color: var(--dry-color-text-strong);
-		background: transparent;
-		border: 1px solid var(--dry-color-stroke-weak);
-		padding: var(--dry-space-1) var(--dry-space-3);
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition: background var(--dry-duration-fast);
-	}
-
-	:global([data-part='prevButton']):hover {
-		background: var(--dry-color-bg-raised);
-	}
-
-	:global([data-part='prevButton']):focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	:global([data-part='nextButton']) {
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		color: var(--dry-color-on-brand);
-		background: var(--dry-color-fill-brand);
-		border: none;
-		padding: var(--dry-space-1) var(--dry-space-3);
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition: opacity var(--dry-duration-fast);
-	}
-
-	:global([data-part='nextButton']):hover {
-		opacity: 0.9;
-	}
-
-	:global([data-part='nextButton']):focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	/* Arrow indicators via pseudo-elements */
-	:global([data-part='tooltip'])::before {
-		content: '';
-		position: absolute;
-		height: var(--dry-tour-arrow-size);
-		aspect-ratio: 1;
-		background: var(--dry-tour-tooltip-bg);
-		border: 1px solid var(--dry-color-stroke-weak);
-		transform: translate(-50%, -50%) rotate(45deg);
-	}
-
-	:global([data-part='tooltip'][data-placement='bottom'])::before {
-		top: 0;
-		left: var(--dry-tour-tooltip-arrow-offset, 50%);
-		border-right: none;
-		border-bottom: none;
-	}
-
-	:global([data-part='tooltip'][data-placement='top'])::before {
-		bottom: 0;
-		left: var(--dry-tour-tooltip-arrow-offset, 50%);
-		border-left: none;
-		border-top: none;
-	}
-
-	:global([data-part='tooltip'][data-placement='left'])::before {
-		right: 0;
-		top: var(--dry-tour-tooltip-arrow-offset, 50%);
-		border-left: none;
-		border-bottom: none;
-	}
-
-	:global([data-part='tooltip'][data-placement='right'])::before {
-		left: 0;
-		top: var(--dry-tour-tooltip-arrow-offset, 50%);
-		border-right: none;
-		border-top: none;
-	}
-
-	@container (max-width: 480px) {
-		:global([data-part='tooltip']) {
-			grid-template-columns: minmax(0, min(16rem, calc(100vw - var(--dry-space-4))));
-		}
-
-		:global([data-part='tooltipFooter']) {
-			grid-template-columns: 1fr;
-			align-items: stretch;
-		}
-	}
-</style>