svelte-incant 0.2.0 → 0.3.0

package/README.md

@@ -4,42 +4,15 @@ A keyboard shortcut management library for Svelte 5.
 
 ## Installation
 
-### Prerequisites
+Install the package:
 
-This package requires **Tailwind CSS 4** and **shadcn-svelte** to be installed and configured in your project.
-
-### Setup
-
-1. **Install and configure Tailwind CSS** (if not already):
-
-   ```bash
-   bunx sv add tailwind
-   ```
-
-2. **Initialize shadcn-svelte** (if not already):
-
-   ```bash
-   bunx shadcn-svelte@latest init
-   ```
-
-   Follow the official [shadcn-svelte installation guide](https://shadcn-svelte.com/docs/installation) for detailed instructions.
-
-3. **Install the package** (peer dependencies are installed automatically):
-
-   ```bash
-   bun add svelte-incant
-   ```
-
-4. **Add @source directive** to your CSS file where Tailwind is configured (e.g., `src/app.css` or similar):
-
-   ```css
-   @import 'tailwindcss';
+```bash
+bun add svelte-incant
+```
 
-   /* Add this line to include svelte-incant utility classes */
-   @source '../../node_modules/svelte-incant/**/*.{svelte,js,ts}';
+Peer dependencies (`svelte`, `bits-ui`) will be installed automatically.
 
-   /* rest of your styles here */
-   ```
+The package uses CSS custom properties (CSS variables) for styling, which work with any CSS framework or plain CSS.
 
 ## Usage
 
@@ -47,7 +20,7 @@ Add `Palette` component to your root layout to enable the shortcut overlay:
 
 ```svelte
 <script>
- import { Palette } from 'svelte-incant';
+	import { Palette } from 'svelte-incant';
 </script>
 
 <Palette />
@@ -59,13 +32,13 @@ Register keyboard shortcuts with the `Shortcut` component:
 
 ```svelte
 <script>
- import { Shortcut } from 'svelte-incant';
+	import { Shortcut } from 'svelte-incant';
 </script>
 
 <Shortcut
- keys={['control', 's']}
- description="Save document"
- action={() => console.log('Save document')}
+	keys={['control', 's']}
+	description="Save document"
+	action={() => console.log('Save document')}
 />
 ```
 
@@ -73,11 +46,11 @@ For focusing elements (like inputs), use the `Focus` component:
 
 ```svelte
 <script>
- import { Focus } from 'svelte-incant';
+	import { Focus } from 'svelte-incant';
 </script>
 
 <Focus keys={['control', 'e']} description="Focus search input">
- <input type="text" placeholder="Search..." />
+	<input type="text" placeholder="Search..." />
 </Focus>
 ```
 
@@ -85,16 +58,16 @@ Or attach shortcuts directly to an element using the `@attach` directive:
 
 ```svelte
 <script>
- import { shortcut } from 'svelte-incant';
+	import { shortcut } from 'svelte-incant';
 </script>
 
 <input
- type="text"
- placeholder="Type something..."
- {@attach shortcut({
-  keys: ['meta', 'i'],
-  description: 'Focus text input'
- })}
+	type="text"
+	placeholder="Type something..."
+	{@attach shortcut({
+		keys: ['meta', 'i'],
+		description: 'Focus text input'
+	})}
 />
 ```
 
@@ -106,23 +79,77 @@ The `@attach` directive focuses the element it attaches to directly, as opposed
 - **Route-specific Shortcuts**: Shortcuts only run when their component is mounted, allowing different shortcuts in different routes
 - **Focus Management**: Easily manage focus states with keyboard shortcuts
 - **Component-based**: Use components or directives to register shortcuts
-- **Shadcn-svelte Integration**: Full styling integration with shadcn-svelte components
+- **Framework Agnostic**: Works with any CSS framework or plain CSS using CSS custom properties
+
+## Customization
+
+The package uses CSS custom properties (CSS variables) for styling. You can override these in your global CSS to customize the appearance:
+
+```css
+/* Example: Customize colors */
+:root {
+	--incant-colors-primary: hsl(210 100% 50%);
+	--incant-colors-primary-foreground: hsl(0 0% 100%);
+	--incant-kbd-bg: #1e293b;
+	--incant-kbd-color: #e2e8f0;
+}
+
+/* Dark mode support */
+.dark {
+	--incant-colors-background: hsl(240 10% 3.9%);
+	--incant-colors-foreground: hsl(0 0% 98%);
+	--incant-colors-primary: hsl(0 0% 98%);
+	--incant-colors-primary-foreground: hsl(240 5.9% 10%);
+	--incant-colors-muted: hsl(240 3.7% 15.9%);
+	--incant-colors-muted-foreground: hsl(240 5% 64.9%);
+	--incant-colors-border: hsl(240 3.7% 15.9%);
+	--incant-colors-overlay: hsla(0 0% 0% / 0.8);
+	--incant-kbd-bg: #374151;
+	--incant-kbd-color: #9ca3af;
+}
+```
 
-## Troubleshooting
+### Available CSS Variables
+
+**Colors:**
+
+- `--incant-colors-background`: Main background color
+- `--incant-colors-foreground`: Main text color
+- `--incant-colors-primary`: Primary button background
+- `--incant-colors-primary-foreground`: Primary button text
+- `--incant-colors-muted`: Muted background
+- `--incant-colors-muted-foreground`: Muted text
+- `--incant-colors-border`: Border color
+- `--incant-colors-overlay`: Dialog overlay
+- `--incant-kbd-bg`: Keyboard key background
+- `--incant-kbd-color`: Keyboard key text
 
-### Styles are missing or components look unstyled
+**Spacing:**
 
-1. **Check @source directive**: Make sure you added the `@source` directive to your CSS file as shown in the installation steps.
+- `--incant-spacing-1`: 0.25rem
+- `--incant-spacing-2`: 0.5rem
+- `--incant-spacing-3`: 0.75rem
+- `--incant-spacing-4`: 1rem
+- `--incant-spacing-6`: 1.5rem
 
-2. **Verify Tailwind 4**: Ensure you're using Tailwind CSS v4, as the `@source` directive is a v4 feature:
+**Typography:**
 
-   ```bash
-   bun list tailwindcss
-   ```
+- `--incant-font-size-xs`: 0.75rem
+- `--incant-font-size-sm`: 0.875rem
+- `--incant-font-size-lg`: 1.125rem
 
-3. **Check shadcn-svelte setup**: Make sure shadcn-svelte is properly initialized with all required CSS variables and theme configuration.
+**Border Radius:**
 
-4. **Build your project**: Sometimes you need to restart your development server or rebuild your project for changes to take effect.
+- `--incant-radius-sm`: 0.25rem
+- `--incant-radius-md`: 0.375rem
+- `--incant-radius-lg`: 0.5rem
+
+**Shadows:**
+
+- `--incant-shadow-xs`: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
+- `--incant-shadow-lg`: 0 10px 15px -3px rgba(0, 0, 0, 0.1)
+
+## Troubleshooting
 
 ### Peer dependency errors
 
@@ -135,3 +162,31 @@ bun list | grep -E "(bits-ui|runed|@lucide/svelte)"
 # If missing, install them manually
 bun add bits-ui runed @lucide/svelte
 ```
+
+### Styles are missing
+
+If components appear unstyled:
+
+1. **Check CSS imports**: Make sure you have a CSS file that includes your styles.
+2. **CSS variables**: The package relies on CSS custom properties. Make sure you're not overriding them unintentionally.
+3. **Build your project**: Sometimes you need to restart your development server for changes to take effect.
+
+---
+
+## Migration from v0.1.x
+
+**v0.2.0 introduced a major change**: The library no longer requires Tailwind CSS and now uses CSS custom properties for styling. This makes the library more lightweight and framework-agnostic.
+
+### What changed:
+
+- **Removed dependency** on Tailwind CSS and shadcn-svelte
+- **Replaced with** CSS custom properties for all styling
+- **Improved compatibility** with any CSS framework or plain CSS
+
+### If you're upgrading from v0.1.x:
+
+1. **No code changes needed** - your components and shortcuts will work the same
+2. **Optional**: If you want to customize appearance, use the CSS variables shown in the [Customization](#customization) section
+3. **Optional**: Remove any Tailwind-specific configurations that were only needed for this library
+
+The API remains identical, so existing code will continue to work without modification.

package/dist/combobox-example.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import * as Card from './components/ui/card';
-	import { shortcut } from './attachment.svelte.js';
+	import CodeBlock from './components/CodeBlock.svelte';
 	import { Button } from './components/ui/button/index.js';
+	import * as Card from './components/ui/card';
 	import * as Command from './components/ui/command/index.js';
 	import * as Popover from './components/ui/popover/index.js';
 	import * as Tabs from './components/ui/tabs/index.js';
-	import CodeBlock from './components/CodeBlock.svelte';
+	import { shortcut } from './package/attachment.svelte.js';
 
 	import { cn } from './utils.js';
 	import CheckIcon from '@lucide/svelte/icons/check';
@@ -121,7 +121,9 @@
 												closeAndFocusTrigger();
 											}}
 										>
-											<CheckIcon class={cn(value !== framework.value && 'text-transparent')} />
+											<CheckIcon
+												class={cn(value !== framework.value ? 'text-transparent' : undefined)}
+											/>
 											{framework.label}
 										</Command.Item>
 									{/each}

package/dist/components/header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { shortcut } from '..';
 	import { Button } from './ui/button/index.js';
-	import * as Kbd from './ui/kbd/index.js';
+	import * as Kbd from '../package/components/ui/kbd/index.js';
 	import GithubIcon from '@lucide/svelte/icons/github';
 	import { useInterval } from 'runed';
 

package/dist/components/ui/badge/badge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const badgeVariants = tv({
 		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
@@ -22,8 +22,8 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -22,8 +22,8 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
-import type { HTMLAnchorAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     variant?: BadgeVariant;
 };

package/dist/components/ui/badge/index.d.ts

@@ -1,2 +1 @@
-export { default as Badge } from './badge.svelte';
-export { badgeVariants, type BadgeVariant } from './badge.svelte';
+export { default as Badge, badgeVariants, type BadgeVariant } from './badge.svelte';

package/dist/components/ui/badge/index.js

@@ -1,2 +1 @@
-export { default as Badge } from './badge.svelte';
-export { badgeVariants } from './badge.svelte';
+export { default as Badge, badgeVariants } from './badge.svelte';

package/dist/components/ui/button/index.d.ts

@@ -1,2 +1,2 @@
 import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from './button.svelte';
-export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant };
+export { Root as Button, buttonVariants, Root, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonProps as Props };

package/dist/components/ui/button/index.js

@@ -1,4 +1,4 @@
 import Root, { buttonVariants } from './button.svelte';
-export { Root, 
+export { 
 //
-Root as Button, buttonVariants };
+Root as Button, buttonVariants, Root };

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

@@ -1,8 +1,8 @@
-import Root from './card.svelte';
+import Action from './card-action.svelte';
 import Content from './card-content.svelte';
 import Description from './card-description.svelte';
 import Footer from './card-footer.svelte';
 import Header from './card-header.svelte';
 import Title from './card-title.svelte';
-import Action from './card-action.svelte';
-export { Root, Content, Description, Footer, Header, Title, Action, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };
+import Root from './card.svelte';
+export { Action, Root as Card, Action as CardAction, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Content, Description, Footer, Header, Root, Title };

package/dist/components/ui/card/index.js

@@ -1,10 +1,10 @@
-import Root from './card.svelte';
+import Action from './card-action.svelte';
 import Content from './card-content.svelte';
 import Description from './card-description.svelte';
 import Footer from './card-footer.svelte';
 import Header from './card-header.svelte';
 import Title from './card-title.svelte';
-import Action from './card-action.svelte';
-export { Root, Content, Description, Footer, Header, Title, Action, 
+import Root from './card.svelte';
+export { Action, 
 //
-Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };
+Root as Card, Action as CardAction, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Content, Description, Footer, Header, Root, Title };

package/dist/components/ui/command/command-dialog.svelte

@@ -2,7 +2,7 @@
 	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
 	import type { Snippet } from 'svelte';
 	import Command from './command.svelte';
-	import * as Dialog from '../dialog/index.js';
+	import * as Dialog from '../../../package/components/ui/dialog/index.js';
 	import type { WithoutChildrenOrChild } from '../../../utils.js';
 
 	let {

package/dist/components/ui/command/index.d.ts

@@ -1,12 +1,12 @@
-import Root from './command.svelte';
-import Loading from './command-loading.svelte';
 import Dialog from './command-dialog.svelte';
 import Empty from './command-empty.svelte';
 import Group from './command-group.svelte';
-import Item from './command-item.svelte';
 import Input from './command-input.svelte';
+import Item from './command-item.svelte';
+import LinkItem from './command-link-item.svelte';
 import List from './command-list.svelte';
+import Loading from './command-loading.svelte';
 import Separator from './command-separator.svelte';
 import Shortcut from './command-shortcut.svelte';
-import LinkItem from './command-link-item.svelte';
-export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading };
+import Root from './command.svelte';
+export { Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Input as CommandInput, Item as CommandItem, LinkItem as CommandLinkItem, List as CommandList, Loading as CommandLoading, Separator as CommandSeparator, Shortcut as CommandShortcut, Dialog, Empty, Group, Input, Item, LinkItem, List, Loading, Root, Separator, Shortcut };

package/dist/components/ui/command/index.js

@@ -1,14 +1,14 @@
-import Root from './command.svelte';
-import Loading from './command-loading.svelte';
 import Dialog from './command-dialog.svelte';
 import Empty from './command-empty.svelte';
 import Group from './command-group.svelte';
-import Item from './command-item.svelte';
 import Input from './command-input.svelte';
+import Item from './command-item.svelte';
+import LinkItem from './command-link-item.svelte';
 import List from './command-list.svelte';
+import Loading from './command-loading.svelte';
 import Separator from './command-separator.svelte';
 import Shortcut from './command-shortcut.svelte';
-import LinkItem from './command-link-item.svelte';
-export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, 
+import Root from './command.svelte';
+export { 
 //
-Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading };
+Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Input as CommandInput, Item as CommandItem, LinkItem as CommandLinkItem, List as CommandList, Loading as CommandLoading, Separator as CommandSeparator, Shortcut as CommandShortcut, Dialog, Empty, Group, Input, Item, LinkItem, List, Loading, Root, Separator, Shortcut };

package/dist/components/ui/input/index.d.ts

@@ -1,2 +1,2 @@
 import Root from './input.svelte';
-export { Root, Root as Input };
+export { Root as Input, Root };

package/dist/components/ui/input/index.js

@@ -1,4 +1,4 @@
 import Root from './input.svelte';
-export { Root, 
+export { 
 //
-Root as Input };
+Root as Input, Root };

package/dist/components/ui/popover/index.d.ts

@@ -1,6 +1,6 @@
-import Root from './popover.svelte';
 import Close from './popover-close.svelte';
 import Content from './popover-content.svelte';
-import Trigger from './popover-trigger.svelte';
 import Portal from './popover-portal.svelte';
-export { Root, Content, Trigger, Close, Portal, Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.svelte';
+export { Close, Content, Root as Popover, Close as PopoverClose, Content as PopoverContent, Portal as PopoverPortal, Trigger as PopoverTrigger, Portal, Root, Trigger };

package/dist/components/ui/popover/index.js

@@ -1,8 +1,8 @@
-import Root from './popover.svelte';
 import Close from './popover-close.svelte';
 import Content from './popover-content.svelte';
-import Trigger from './popover-trigger.svelte';
 import Portal from './popover-portal.svelte';
-export { Root, Content, Trigger, Close, Portal, 
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.svelte';
+export { Close, Content, 
 //
-Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };
+Root as Popover, Close as PopoverClose, Content as PopoverContent, Portal as PopoverPortal, Trigger as PopoverTrigger, Portal, Root, Trigger };

package/dist/components/ui/tabs/index.d.ts

@@ -1,5 +1,5 @@
-import Root from './tabs.svelte';
 import Content from './tabs-content.svelte';
 import List from './tabs-list.svelte';
 import Trigger from './tabs-trigger.svelte';
-export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };
+import Root from './tabs.svelte';
+export { Content, List, Root, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, Trigger };

package/dist/components/ui/tabs/index.js

@@ -1,7 +1,7 @@
-import Root from './tabs.svelte';
 import Content from './tabs-content.svelte';
 import List from './tabs-list.svelte';
 import Trigger from './tabs-trigger.svelte';
-export { Root, Content, List, Trigger, 
+import Root from './tabs.svelte';
+export { Content, List, Root, 
 //
-Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, Trigger };

package/dist/index.d.ts

@@ -1,5 +1 @@
-export { default as Palette } from './palette.svelte';
-export { default as Shortcut } from './shortcut.svelte';
-export { default as Focus } from './focus.svelte';
-export { shortcut } from './attachment.svelte.js';
-export { shortcuts } from './palette.svelte.js';
+export * from './package/index.js';

package/dist/index.js

@@ -1,7 +1 @@
-// Simple index.ts to export available components
-export { default as Palette } from './palette.svelte';
-export { default as Shortcut } from './shortcut.svelte';
-export { default as Focus } from './focus.svelte';
-// Export functions
-export { shortcut } from './attachment.svelte.js';
-export { shortcuts } from './palette.svelte.js';
+export * from './package/index.js';

package/dist/{attachment.svelte.js → package/attachment.svelte.js}

@@ -1,7 +1,7 @@
+import { PressedKeys, watch } from 'runed';
 import { mount, unmount } from 'svelte';
-import { add_shortcut, remove_shortcut } from './palette.svelte.js';
 import OverlayComponent from './overlay-component.svelte';
-import { PressedKeys, watch } from 'runed';
+import { add_shortcut, remove_shortcut, shortcuts, slugify } from './palette.svelte.js';
 const pressed_keys = new PressedKeys();
 const voidElements = new Set([
     'area',
@@ -47,10 +47,16 @@ function setupAnchor(element, targetNode, isVoidElement, keys) {
     targetNode.appendChild(anchor);
     return { anchor, instance };
 }
-function setupOutline(element) {
+function setupOutline(element, keys) {
     element.style.transition = 'outline 0s, outline-offset 0s';
-    watch(() => pressed_keys.has('alt'), (value) => {
-        if (value) {
+    const slug = slugify(keys);
+    watch(() => {
+        const altPressed = pressed_keys.has('alt');
+        const shortcut = shortcuts[slug];
+        const isEnabled = shortcut?.enabled ?? true;
+        return altPressed && isEnabled;
+    }, (should_show_outline) => {
+        if (should_show_outline) {
             element.style.outline = '2px dotted currentColor';
             element.style.outlineOffset = '2px';
         }
@@ -83,7 +89,7 @@ export function shortcut(shortcut) {
             return () => { };
         }
         const { anchor, instance } = setupAnchor(element, targetNode, isVoidElement, shortcut.keys);
-        setupOutline(element);
+        setupOutline(element, shortcut.keys);
         return () => {
             unmount(instance);
             anchor.remove();

package/dist/{components → package/components}/kbds.svelte

@@ -31,12 +31,19 @@
 	});
 </script>
 
-<Kbd.Group class="text-xs">
+<Kbd.Group class="incant-kbds-container">
 	{#each formattedParts as part (part)}
 		{#if part.type === 'element'}
 			<Kbd.Root>{part.value}</Kbd.Root>
 		{:else}
-			<span class="mx-1 text-muted-foreground">{part.value}</span>
+			<span class="incant-kbds-separator">{part.value}</span>
 		{/if}
 	{/each}
 </Kbd.Group>
+
+<style>
+	.incant-kbds-separator {
+		margin: 0 var(--incant-spacing-1, 0.25rem);
+		color: var(--incant-colors-muted-foreground, hsl(240 3.8% 46.1%));
+	}
+</style>

package/dist/package/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close
+	bind:ref
+	data-slot="dialog-close"
+	class={['incant-dialog-close-button', restProps.class]}
+	{...restProps}
+/>
+
+<style>
+	:global([data-slot='dialog-close']) {
+		border-radius: var(--incant-radius-sm, 0.25rem);
+		background: transparent;
+		border: none;
+		padding: 0.25rem;
+		cursor: pointer;
+		transition: opacity 0.2s;
+	}
+
+	:global([data-slot='dialog-close']:hover) {
+		opacity: 0.8;
+	}
+
+	:global([data-slot='dialog-close']:focus) {
+		outline: 2px solid var(--incant-colors-ring, hsl(240 5.9% 10%));
+		outline-offset: 2px;
+	}
+</style>