@dryui/ui 0.3.0 → 0.4.1

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

@@ -1,4 +1,4 @@
 import type { ListboxRootProps } from './index.js';
-declare const ListboxRoot: import('svelte').Component<ListboxRootProps, {}, 'value'>;
+declare const ListboxRoot: import("svelte").Component<ListboxRootProps, {}, "value">;
 type ListboxRoot = ReturnType<typeof ListboxRoot>;
 export default ListboxRoot;

package/dist/logo-mark/logo-mark.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	src?: string;
-	alt?: string;
-	fallback?: string;
-	size?: 'sm' | 'md' | 'lg';
-	shape?: 'square' | 'rounded' | 'circle';
-	color?: 'brand' | 'neutral' | 'error' | 'warning' | 'success' | 'info';
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'square' | 'rounded' | 'circle';
+    color?: 'brand' | 'neutral' | 'error' | 'warning' | 'success' | 'info';
 }
-declare const LogoMark: import('svelte').Component<Props, {}, ''>;
+declare const LogoMark: import("svelte").Component<Props, {}, "">;
 type LogoMark = ReturnType<typeof LogoMark>;
 export default LogoMark;

package/dist/map/map-controls.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 interface Props {
-	position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-	navigation?: boolean;
-	fullscreen?: boolean;
-	children?: Snippet;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    navigation?: boolean;
+    fullscreen?: boolean;
+    children?: Snippet;
 }
-declare const MapControls: import('svelte').Component<Props, {}, ''>;
+declare const MapControls: import("svelte").Component<Props, {}, "">;
 type MapControls = ReturnType<typeof MapControls>;
 export default MapControls;

package/dist/map/map-layer.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { GeoJsonData } from '@dryui/primitives';
 interface Props {
-	id: string;
-	type: 'heatmap' | 'polygon' | 'fill' | 'circle' | 'line';
-	data: GeoJsonData;
-	color?: string;
-	opacity?: number;
+    id: string;
+    type: 'heatmap' | 'polygon' | 'fill' | 'circle' | 'line';
+    data: GeoJsonData;
+    color?: string;
+    opacity?: number;
 }
-declare const MapLayer: import('svelte').Component<Props, {}, ''>;
+declare const MapLayer: import("svelte").Component<Props, {}, "">;
 type MapLayer = ReturnType<typeof MapLayer>;
 export default MapLayer;

package/dist/map/map-marker.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from 'svelte';
+import type { LngLat } from '@dryui/primitives';
 interface Props {
-	position: [number, number];
-	color?: string;
-	children?: Snippet;
-	class?: string;
+    position: LngLat;
+    color?: string;
+    children?: Snippet;
+    class?: string;
 }
-declare const MapMarker: import('svelte').Component<Props, {}, ''>;
+declare const MapMarker: import("svelte").Component<Props, {}, "">;
 type MapMarker = ReturnType<typeof MapMarker>;
 export default MapMarker;

package/dist/map/map-popup.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 interface Props {
-	maxWidth?: string;
-	closeButton?: boolean;
-	closeOnClick?: boolean;
-	children: Snippet;
-	class?: string;
+    maxWidth?: string;
+    closeButton?: boolean;
+    closeOnClick?: boolean;
+    children: Snippet;
+    class?: string;
 }
-declare const MapPopup: import('svelte').Component<Props, {}, ''>;
+declare const MapPopup: import("svelte").Component<Props, {}, "">;
 type MapPopup = ReturnType<typeof MapPopup>;
 export default MapPopup;

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

@@ -2,14 +2,14 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { LngLat, MapInstance, MapOptions } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	center?: LngLat;
-	zoom?: number;
-	minZoom?: number;
-	maxZoom?: number;
-	mapStyle?: string;
-	createMap?: (container: HTMLDivElement, options: MapOptions) => MapInstance;
-	children?: Snippet;
+    center?: LngLat;
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    mapStyle?: string;
+    createMap?: (container: HTMLDivElement, options: MapOptions) => MapInstance;
+    children?: Snippet;
 }
-declare const MapRoot: import('svelte').Component<Props, {}, ''>;
+declare const MapRoot: import("svelte").Component<Props, {}, "">;
 type MapRoot = ReturnType<typeof MapRoot>;
 export default MapRoot;

package/dist/markdown-renderer/markdown-renderer.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	content: string;
-	sanitize?: boolean;
+    content: string;
+    sanitize?: boolean;
 }
-declare const MarkdownRenderer: import('svelte').Component<Props, {}, ''>;
+declare const MarkdownRenderer: import("svelte").Component<Props, {}, "">;
 type MarkdownRenderer = ReturnType<typeof MarkdownRenderer>;
 export default MarkdownRenderer;

package/dist/marquee/marquee.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	speed?: number;
-	direction?: 'left' | 'right' | 'up' | 'down';
-	pauseOnHover?: boolean;
-	fade?: boolean;
-	gap?: string;
-	children: Snippet;
+    speed?: number;
+    direction?: 'left' | 'right' | 'up' | 'down';
+    pauseOnHover?: boolean;
+    fade?: boolean;
+    gap?: string;
+    children: Snippet;
 }
-declare const Marquee: import('svelte').Component<Props, {}, ''>;
+declare const Marquee: import("svelte").Component<Props, {}, "">;
 type Marquee = ReturnType<typeof Marquee>;
 export default Marquee;

package/dist/mask-reveal/mask-reveal.svelte.d.ts

@@ -1,14 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type MaskRevealProps as PrimitiveMaskRevealProps } from '@dryui/primitives/mask-reveal';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	shape?: PrimitiveMaskRevealProps['shape'];
-	direction?: PrimitiveMaskRevealProps['direction'];
-	once?: PrimitiveMaskRevealProps['once'];
-	threshold?: PrimitiveMaskRevealProps['threshold'];
-	duration?: PrimitiveMaskRevealProps['duration'];
-	children: Snippet;
+    shape?: 'circle' | 'linear' | 'diagonal' | 'diamond';
+    direction?: 'in' | 'out';
+    once?: boolean;
+    threshold?: number;
+    duration?: number;
+    children: Snippet;
 }
-declare const MaskReveal: import('svelte').Component<Props, {}, ''>;
+declare const MaskReveal: import("svelte").Component<Props, {}, "">;
 type MaskReveal = ReturnType<typeof MaskReveal>;
 export default MaskReveal;

package/dist/mega-menu/index.d.ts

@@ -1,7 +1,7 @@
 export type { MegaMenuRootProps, MegaMenuItemProps, MegaMenuTriggerProps, MegaMenuPanelProps, MegaMenuColumnProps, MegaMenuLinkProps } from '@dryui/primitives';
 import MegaMenuRoot from './mega-menu-root.svelte';
 import MegaMenuItem from './mega-menu-item.svelte';
-import MegaMenuTrigger from './mega-menu-trigger.svelte';
+import MegaMenuTrigger from './mega-menu-button-trigger.svelte';
 import MegaMenuPanel from './mega-menu-panel.svelte';
 import MegaMenuColumn from './mega-menu-column.svelte';
 import MegaMenuLink from './mega-menu-link.svelte';

package/dist/mega-menu/index.js

@@ -1,6 +1,6 @@
 import MegaMenuRoot from './mega-menu-root.svelte';
 import MegaMenuItem from './mega-menu-item.svelte';
-import MegaMenuTrigger from './mega-menu-trigger.svelte';
+import MegaMenuTrigger from './mega-menu-button-trigger.svelte';
 import MegaMenuPanel from './mega-menu-panel.svelte';
 import MegaMenuColumn from './mega-menu-column.svelte';
 import MegaMenuLink from './mega-menu-link.svelte';

package/dist/mega-menu/{mega-menu-trigger.svelte → mega-menu-button-trigger.svelte}

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getMegaMenuCtx, getMegaMenuItemCtx } from './context.svelte.js';
 
 	interface Props extends HTMLButtonAttributes {
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { children, ...rest }: Props = $props();
 
 	const ctx = getMegaMenuCtx();
 	const itemCtx = getMegaMenuItemCtx();
@@ -32,39 +33,17 @@
 	}
 </script>
 
-<button
+<Button
+	variant="trigger"
 	type="button"
-	data-mega-menu-trigger
 	id={itemCtx.triggerId}
 	aria-expanded={itemCtx.open}
 	aria-haspopup="true"
-	data-active={itemCtx.open || undefined}
+	data-mega-menu-trigger
 	data-state={itemCtx.open ? 'open' : 'closed'}
-	class={className}
+	{...rest}
 	onclick={handleClick}
 	onkeydown={handleKeydown}
-	{...rest}
 >
 	{@render children()}
-</button>
-
-<style>
-	[data-mega-menu-trigger] {
-		all: unset;
-		cursor: pointer;
-		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
-		font-size: var(--dry-type-ui-control-size, var(--dry-text-sm-size, 0.875rem));
-		font-weight: 500;
-		color: var(--dry-color-text-strong, #1a1a2e);
-		border-radius: var(--dry-radius-md, 0.375rem);
-		transition:
-			background var(--dry-duration-fast, 100ms) ease,
-			color var(--dry-duration-fast, 100ms) ease;
-	}
-
-	[data-mega-menu-trigger]:hover,
-	[data-mega-menu-trigger][data-active] {
-		background: var(--dry-color-fill, #f3f4f6);
-		color: var(--dry-color-fill-brand, #3b82f6);
-	}
-</style>
+</Button>

package/dist/mega-menu/mega-menu-button-trigger.svelte.d.ts

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

package/dist/mega-menu/mega-menu-column.svelte

@@ -18,12 +18,17 @@
 </div>
 
 <style>
+	[data-mega-menu-column] {
+		display: grid;
+		gap: var(--dry-space-2, 0.5rem);
+	}
+
 	[data-mega-menu-column] [data-part='column-title'] {
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
 		font-weight: 700;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		color: var(--dry-color-text-weak, #64748b);
-		margin-bottom: var(--dry-space-3, 0.75rem);
+		padding-bottom: var(--dry-space-1, 0.25rem);
 	}
 </style>

package/dist/mega-menu/mega-menu-column.svelte.d.ts

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

package/dist/mega-menu/mega-menu-item.svelte.d.ts

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

package/dist/mega-menu/mega-menu-link.svelte

@@ -1,17 +1,33 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLAnchorAttributes {
+	interface Props extends Omit<HTMLAnchorAttributes, 'children' | 'type'> {
+		href?: string;
+		rel?: string;
+		target?: string;
+		download?: boolean | string;
+		type?: 'button' | 'submit' | 'reset';
 		icon?: Snippet;
 		description?: Snippet;
 		children: Snippet;
 	}
 
-	let { icon, description, class: className, children, ...rest }: Props = $props();
+	let {
+		href,
+		rel,
+		target,
+		download,
+		type = 'button',
+		icon,
+		description,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<a data-mega-menu-link class={className} {...rest}>
+{#snippet body()}
 	{#if icon}
 		<span data-part="link-icon">
 			{@render icon()}
@@ -27,19 +43,35 @@
 			</span>
 		{/if}
 	</span>
-</a>
+{/snippet}
+
+{#if href !== undefined}
+	<a data-mega-menu-link {href} {rel} {target} {download} class={className} {...rest}>
+		{@render body()}
+	</a>
+{:else}
+	<button data-mega-menu-link {type} class={className} {...rest as HTMLButtonAttributes}>
+		{@render body()}
+	</button>
+{/if}
 
 <style>
 	[data-mega-menu-link] {
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		align-items: flex-start;
+		align-items: start;
 		gap: var(--dry-space-3, 0.75rem);
 		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
+		border: 0;
 		border-radius: var(--dry-radius-md, 0.375rem);
+		background: none;
+		font: inherit;
+		text-align: start;
 		text-decoration: none;
 		color: inherit;
+		cursor: pointer;
+		appearance: none;
 		transition: background var(--dry-duration-fast, 100ms) ease;
 	}
 

package/dist/mega-menu/mega-menu-link.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
-interface Props extends HTMLAnchorAttributes {
-	icon?: Snippet;
-	description?: Snippet;
-	children: Snippet;
+interface Props extends Omit<HTMLAnchorAttributes, 'children' | 'type'> {
+    href?: string;
+    rel?: string;
+    target?: string;
+    download?: boolean | string;
+    type?: 'button' | 'submit' | 'reset';
+    icon?: Snippet;
+    description?: Snippet;
+    children: Snippet;
 }
-declare const MegaMenuLink: import('svelte').Component<Props, {}, ''>;
+declare const MegaMenuLink: import("svelte").Component<Props, {}, "">;
 type MegaMenuLink = ReturnType<typeof MegaMenuLink>;
 export default MegaMenuLink;

package/dist/mega-menu/mega-menu-panel.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { fromAction } from 'svelte/attachments';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createPositionedPopover } from '@dryui/primitives';
 	import { getMegaMenuCtx, getMegaMenuItemCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -8,11 +10,20 @@
 		children: Snippet;
 	}
 
-	let { fullWidth = false, class: className, children, ...rest }: Props = $props();
+	let { fullWidth = false, class: className, children, style, ...rest }: Props = $props();
 
 	const ctx = getMegaMenuCtx();
 	const itemCtx = getMegaMenuItemCtx();
 
+	let panelEl = $state<HTMLDivElement | null>(null);
+
+	const popover = createPositionedPopover({
+		triggerEl: () => document.getElementById(itemCtx.triggerId),
+		contentEl: () => panelEl ?? null,
+		placement: () => 'bottom-start',
+		offset: () => 4
+	});
+
 	function handlePointerEnter() {
 		ctx.openItem(itemCtx.itemId);
 	}
@@ -20,11 +31,35 @@
 	function handlePointerLeave() {
 		ctx.closeItem();
 	}
+
+	function attachPanel(node: HTMLDivElement) {
+		panelEl = node;
+
+		return () => {
+			if (panelEl === node) {
+				panelEl = null;
+			}
+		};
+	}
+
+	function syncPopover(isOpen: boolean) {
+		return (node: HTMLDivElement) => {
+			if (isOpen && !node.matches(':popover-open')) {
+				popover.showPopover(node);
+			} else if (!isOpen && node.matches(':popover-open')) {
+				popover.hidePopover(node);
+			}
+		};
+	}
 </script>
 
 {#if itemCtx.open}
 	<div
+		{@attach attachPanel}
+		{@attach syncPopover(itemCtx.open)}
+		{@attach fromAction(popover.applyPosition, () => style)}
 		role="region"
+		popover="manual"
 		data-mega-menu-panel
 		aria-labelledby={itemCtx.triggerId}
 		data-state={itemCtx.open ? 'open' : 'closed'}
@@ -40,25 +75,30 @@
 
 <style>
 	[data-mega-menu-panel] {
-		position: absolute;
-		top: 100%;
-		left: 0;
+		inset: unset;
+		margin: 0;
 		z-index: var(--dry-layer-overlay, 50);
 		background: var(--dry-color-bg-overlay, white);
 		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
 		border-radius: var(--dry-radius-lg, 0.5rem);
 		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
-		padding: var(--dry-space-6, 1.5rem);
+		padding: var(--dry-space-4, 1rem);
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		align-items: flex-start;
-		gap: var(--dry-space-8, 2rem);
-		margin-top: var(--dry-space-1, 0.25rem);
+		align-items: start;
+		gap: var(--dry-space-6, 1.5rem);
+	}
+
+	[data-mega-menu-panel]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-mega-menu-panel]:popover-open {
+		display: grid;
 	}
 
 	[data-mega-menu-panel][data-full-width] {
-		left: 0;
-		right: 0;
+		justify-self: stretch;
 	}
 </style>

package/dist/mega-menu/mega-menu-panel.svelte.d.ts

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

package/dist/mega-menu/mega-menu-root.svelte.d.ts

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

package/dist/menubar/index.d.ts

@@ -1,7 +1,7 @@
 export type { MenubarRootProps, MenubarMenuProps, MenubarTriggerProps, MenubarContentProps, MenubarItemProps, MenubarSeparatorProps, MenubarLabelProps } from '@dryui/primitives';
 import MenubarRoot from './menubar-root.svelte';
 import MenubarMenu from './menubar-menu.svelte';
-import MenubarTrigger from './menubar-trigger.svelte';
+import MenubarTrigger from './menubar-button-trigger.svelte';
 import MenubarContent from './menubar-content.svelte';
 import MenubarItem from './menubar-item.svelte';
 import MenubarSeparator from './menubar-separator.svelte';

package/dist/menubar/index.js

@@ -1,6 +1,6 @@
 import MenubarRoot from './menubar-root.svelte';
 import MenubarMenu from './menubar-menu.svelte';
-import MenubarTrigger from './menubar-trigger.svelte';
+import MenubarTrigger from './menubar-button-trigger.svelte';
 import MenubarContent from './menubar-content.svelte';
 import MenubarItem from './menubar-item.svelte';
 import MenubarSeparator from './menubar-separator.svelte';

package/dist/menubar/{menubar-trigger.svelte → menubar-button-trigger.svelte}

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getMenubarCtx, getMenubarMenuCtx } from './context.svelte.js';
 
 	interface Props extends HTMLButtonAttributes {
 		children: Snippet;
 	}
 
-	let { class: className, children, onclick, onkeydown, ...rest }: Props = $props();
+	let { children, onclick, onkeydown, ...rest }: Props = $props();
 
 	const ctx = getMenubarCtx();
 	const menuCtx = getMenubarMenuCtx();
@@ -55,55 +56,18 @@
 	}
 </script>
 
-<button
+<Button
+	variant="trigger"
 	type="button"
 	role="menuitem"
 	aria-haspopup="menu"
 	aria-expanded={menuCtx.open}
 	data-menubar-trigger={menuCtx.menuId}
 	data-state={menuCtx.open ? 'open' : 'closed'}
-	class={className}
+	{...rest}
 	onclick={handleClick}
 	onpointerenter={handlePointerEnter}
 	onkeydown={handleKeydown}
-	{...rest}
 >
 	{@render children()}
-</button>
-
-<style>
-	button {
-		display: inline-grid;
-		place-items: center;
-		min-height: var(--dry-space-12);
-		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);
-	}
-
-	button:hover {
-		background: var(--dry-color-fill);
-	}
-
-	button:active {
-		transform: translateY(1px);
-	}
-
-	button:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -2px;
-	}
-
-	button[data-state='open'] {
-		background: var(--dry-color-fill-brand-weak);
-		color: var(--dry-color-text-brand);
-	}
-</style>
+</Button>

package/dist/menubar/menubar-button-trigger.svelte.d.ts

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