alus-ui 0.1.0

package/dist/components/form/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TimePicker } from './TimePicker.svelte';
+export type { Time } from './TimePicker.svelte';

package/dist/components/form/time-picker/index.js

@@ -0,0 +1 @@
+export { default as TimePicker } from './TimePicker.svelte';

package/dist/components/form/toggle-button/ToggleButton.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { labelAttrs, interactiveStateAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ pressed: boolean }]>;
+		pressed?: boolean;
+		disabled?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		class?: string;
+		style?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		onclick?: (e: MouseEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+		onpressedchange?: (pressed: boolean) => void;
+	}
+
+	let {
+		children,
+		pressed = $bindable(false),
+		disabled = false,
+		type = 'button',
+		class: className = '',
+		style,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		onclick,
+		onkeydown,
+		onpressedchange
+	}: Props = $props();
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({ disabled, pressed })
+		)
+	);
+
+	function handleClick(e: MouseEvent) {
+		if (disabled) return;
+		pressed = !pressed;
+		onpressedchange?.(pressed);
+		onclick?.(e);
+	}
+</script>
+
+<button
+	{type}
+	{disabled}
+	class={className}
+	{style}
+	data-state={pressed ? 'on' : 'off'}
+	onclick={handleClick}
+	{onkeydown}
+	{...ariaAttrs}
+>
+	{#if children}{@render children({ pressed })}{/if}
+</button>

package/dist/components/form/toggle-button/ToggleButton.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        pressed: boolean;
+    }]>;
+    pressed?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    class?: string;
+    style?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onclick?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onpressedchange?: (pressed: boolean) => void;
+}
+declare const ToggleButton: import("svelte").Component<Props, {}, "pressed">;
+type ToggleButton = ReturnType<typeof ToggleButton>;
+export default ToggleButton;

package/dist/components/form/toggle-button/index.d.ts

@@ -0,0 +1 @@
+export { default as ToggleButton } from './ToggleButton.svelte';

package/dist/components/form/toggle-button/index.js

@@ -0,0 +1 @@
+export { default as ToggleButton } from './ToggleButton.svelte';

package/dist/components/index.d.ts

@@ -0,0 +1,128 @@
+/**
+ * UI Components
+ * @module components
+ */
+export { Button } from './form/button/index.js';
+export { Input } from './form/input/index.js';
+export { Checkbox } from './form/checkbox/index.js';
+export { Radio } from './form/radio/index.js';
+export { Textarea } from './form/textarea/index.js';
+export { Select, SelectTrigger, SelectContent, SelectOption, getSelectContext, setSelectContext } from './form/select/index.js';
+export type { SelectContext, SelectOptionEntry } from './form/select/index.js';
+export { Fieldset } from './form/fieldset/index.js';
+export { RadioGroup, getRadioGroup, setRadioGroup } from './form/radio-group/index.js';
+export type { RadioGroupContext } from './form/radio-group/index.js';
+export { Form } from './form/form/index.js';
+export { FieldError } from './form/field-error/index.js';
+export { Label } from './form/label/index.js';
+export { Switch } from './form/switch/index.js';
+export { Slider } from './form/slider/index.js';
+export { FileInput } from './form/file-input/index.js';
+export { SearchInput } from './form/search-input/index.js';
+export { NumberInput } from './form/number-input/index.js';
+export { InputGroup, InputAddon } from './form/input-group/index.js';
+export { Rating } from './form/rating/index.js';
+export { IconButton } from './form/icon-button/index.js';
+export { ToggleButton } from './form/toggle-button/index.js';
+export { AutoComplete } from './form/auto-complete/index.js';
+export type { AutoCompleteOption } from './form/auto-complete/index.js';
+export { Calendar } from './form/calendar/index.js';
+export type { CalendarDay, CalendarView } from './form/calendar/index.js';
+export { DatePicker } from './form/date-picker/index.js';
+export { DateRange } from './form/date-range/index.js';
+export type { DateRangeValue } from './form/date-range/index.js';
+export { DateRangePicker } from './form/date-range-picker/index.js';
+export { TimePicker } from './form/time-picker/index.js';
+export type { Time } from './form/time-picker/index.js';
+export { ColorPicker } from './form/color-picker/index.js';
+export { Tabs, TabList, Tab, TabPanel, getTabsContext, setTabsContext } from './navigation/tabs/index.js';
+export type { TabsContext } from './navigation/tabs/index.js';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, getAccordionRoot, setAccordionRoot, getAccordionItem, setAccordionItem } from './navigation/accordion/index.js';
+export type { AccordionRootContext, AccordionItemContext, AccordionType } from './navigation/accordion/index.js';
+export { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from './navigation/breadcrumb/index.js';
+export { Pagination } from './navigation/pagination/index.js';
+export { Link } from './navigation/link/index.js';
+export { ExternalLink } from './navigation/external-link/index.js';
+export { Navigation } from './navigation/navigation/index.js';
+export { SubMenu } from './navigation/sub-menu/index.js';
+export type { SubMenuItem } from './navigation/sub-menu/index.js';
+export { Menu, MenuTrigger, MenuContent, MenuItem, getMenuContext, setMenuContext } from './navigation/menu/index.js';
+export type { MenuContext, MenuItemEntry } from './navigation/menu/index.js';
+export { Stepper, StepperStep, getStepperContext, setStepperContext } from './navigation/stepper/index.js';
+export type { StepperContext } from './navigation/stepper/index.js';
+export { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuItem, CommandMenuGroup, CommandMenuEmpty, getCommandMenuContext, setCommandMenuContext } from './navigation/command-menu/index.js';
+export type { CommandMenuContext, CommandItemEntry } from './navigation/command-menu/index.js';
+export { Badge } from './feedback/badge/index.js';
+export { Tag } from './feedback/tag/index.js';
+export { Spinner } from './feedback/spinner/index.js';
+export { Skeleton } from './feedback/skeleton/index.js';
+export { Progress } from './feedback/progress/index.js';
+export { Alert } from './feedback/alert/index.js';
+export { Callout } from './feedback/callout/index.js';
+export { Banner } from './feedback/banner/index.js';
+export { InlineMessage } from './feedback/inline-message/index.js';
+export { LiveRegion } from './feedback/live-region/index.js';
+export { NotificationBell } from './feedback/notification-bell/index.js';
+export { Toaster, ToasterStore, Toast, createToaster, getToasterContext, setToasterContext } from './feedback/toast/index.js';
+export type { Placement as ToastPlacement, ToasterProps, AddToastArgs, UpdateToastArgs, ToastType, HoverBehavior, TabHiddenBehavior } from './feedback/toast/index.js';
+export { Divider } from './display/divider/index.js';
+export { Kbd } from './display/kbd/index.js';
+export { AspectRatio } from './display/aspect-ratio/index.js';
+export { Frame } from './display/frame/index.js';
+export { Timestamp } from './display/timestamp/index.js';
+export { CodeBlock } from './display/code-block/index.js';
+export { StatCard } from './display/stat-card/index.js';
+export { Avatar } from './display/avatar/index.js';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, getCardContext, setCardContext } from './display/card/index.js';
+export type { CardContext } from './display/card/index.js';
+export { Image } from './display/image/index.js';
+export { List, ListItem } from './display/list/index.js';
+export { DataList, DataListTerm, DataListDescription } from './display/data-list/index.js';
+export { Table, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeader, TableCell } from './display/table/index.js';
+export { TreeView, TreeItem, getTreeViewContext, setTreeViewContext } from './display/tree-view/index.js';
+export type { TreeViewContext } from './display/tree-view/index.js';
+export { Timeline, TimelineItem } from './display/timeline/index.js';
+export { Compare } from './display/compare/index.js';
+export { Carousel, CarouselSlides, CarouselSlide, CarouselPrev, CarouselNext, CarouselIndicators, getCarouselContext, setCarouselContext } from './display/carousel/index.js';
+export type { CarouselContext } from './display/carousel/index.js';
+export { Modal, ModalTrigger, ModalContent, ModalTitle, ModalDescription, ModalClose, getModalContext, setModalContext } from './overlay/modal/index.js';
+export type { ModalContext } from './overlay/modal/index.js';
+export { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose } from './overlay/dialog/index.js';
+export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose } from './overlay/drawer/index.js';
+export type { DrawerSide } from './overlay/drawer/index.js';
+export { Tooltip, TooltipTrigger, TooltipContent, getTooltipContext, setTooltipContext } from './overlay/tooltip/index.js';
+export type { TooltipContext } from './overlay/tooltip/index.js';
+export { Popover, PopoverTrigger, PopoverContent, getPopoverContext, setPopoverContext } from './overlay/popover/index.js';
+export type { PopoverContext } from './overlay/popover/index.js';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, getDropdownContext, setDropdownContext } from './overlay/dropdown/index.js';
+export type { DropdownContext, DropdownItemEntry } from './overlay/dropdown/index.js';
+export { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription, SheetClose } from './overlay/sheet/index.js';
+export type { SheetSide } from './overlay/sheet/index.js';
+export { Overlay } from './overlay/overlay/index.js';
+export { Lightbox } from './overlay/lightbox/index.js';
+export type { LightboxImage } from './overlay/lightbox/index.js';
+export { ContextMenu } from './overlay/context-menu/index.js';
+export type { ContextMenuItemEntry } from './overlay/context-menu/index.js';
+export { Stack } from './layout/stack/index.js';
+export { Flex } from './layout/flex/index.js';
+export { Grid } from './layout/grid/index.js';
+export { Container } from './layout/container/index.js';
+export { Spacer } from './layout/spacer/index.js';
+export { Columns } from './layout/columns/index.js';
+export { Sortable } from './interactive/sortable/index.js';
+export { Swipeable } from './interactive/swipeable/index.js';
+export type { SwipeDirection } from './interactive/swipeable/index.js';
+export { Resizable } from './interactive/resizable/index.js';
+export { SplitView, SplitViewPane, SplitViewHandle, getSplitViewContext, setSplitViewContext } from './interactive/split-view/index.js';
+export type { SplitViewContext } from './interactive/split-view/index.js';
+export { Draggable } from './interactive/draggable/index.js';
+export type { DraggableEvent } from './interactive/draggable/index.js';
+export { Droppable } from './interactive/droppable/index.js';
+export type { DroppableEvent } from './interactive/droppable/index.js';
+export { InfiniteScroll } from './interactive/infinite-scroll/index.js';
+export { VirtualList } from './interactive/virtual-list/index.js';
+export { VisuallyHidden } from './utility/visually-hidden/index.js';
+export { Portal } from './utility/portal/index.js';
+export { FocusTrap } from './utility/focus-trap/index.js';
+export { ScreenReaderOnly } from './utility/screen-reader-only/index.js';
+export { Conditional } from './utility/conditional/index.js';

package/dist/components/index.js

@@ -0,0 +1,108 @@
+/**
+ * UI Components
+ * @module components
+ */
+// Form Components
+export { Button } from './form/button/index.js';
+export { Input } from './form/input/index.js';
+export { Checkbox } from './form/checkbox/index.js';
+export { Radio } from './form/radio/index.js';
+export { Textarea } from './form/textarea/index.js';
+export { Select, SelectTrigger, SelectContent, SelectOption, getSelectContext, setSelectContext } from './form/select/index.js';
+export { Fieldset } from './form/fieldset/index.js';
+export { RadioGroup, getRadioGroup, setRadioGroup } from './form/radio-group/index.js';
+export { Form } from './form/form/index.js';
+export { FieldError } from './form/field-error/index.js';
+export { Label } from './form/label/index.js';
+export { Switch } from './form/switch/index.js';
+export { Slider } from './form/slider/index.js';
+export { FileInput } from './form/file-input/index.js';
+export { SearchInput } from './form/search-input/index.js';
+export { NumberInput } from './form/number-input/index.js';
+export { InputGroup, InputAddon } from './form/input-group/index.js';
+export { Rating } from './form/rating/index.js';
+export { IconButton } from './form/icon-button/index.js';
+export { ToggleButton } from './form/toggle-button/index.js';
+export { AutoComplete } from './form/auto-complete/index.js';
+export { Calendar } from './form/calendar/index.js';
+export { DatePicker } from './form/date-picker/index.js';
+export { DateRange } from './form/date-range/index.js';
+export { DateRangePicker } from './form/date-range-picker/index.js';
+export { TimePicker } from './form/time-picker/index.js';
+export { ColorPicker } from './form/color-picker/index.js';
+// Navigation Components
+export { Tabs, TabList, Tab, TabPanel, getTabsContext, setTabsContext } from './navigation/tabs/index.js';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, getAccordionRoot, setAccordionRoot, getAccordionItem, setAccordionItem } from './navigation/accordion/index.js';
+export { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from './navigation/breadcrumb/index.js';
+export { Pagination } from './navigation/pagination/index.js';
+export { Link } from './navigation/link/index.js';
+export { ExternalLink } from './navigation/external-link/index.js';
+export { Navigation } from './navigation/navigation/index.js';
+export { SubMenu } from './navigation/sub-menu/index.js';
+export { Menu, MenuTrigger, MenuContent, MenuItem, getMenuContext, setMenuContext } from './navigation/menu/index.js';
+export { Stepper, StepperStep, getStepperContext, setStepperContext } from './navigation/stepper/index.js';
+export { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuItem, CommandMenuGroup, CommandMenuEmpty, getCommandMenuContext, setCommandMenuContext } from './navigation/command-menu/index.js';
+// Feedback Components
+export { Badge } from './feedback/badge/index.js';
+export { Tag } from './feedback/tag/index.js';
+export { Spinner } from './feedback/spinner/index.js';
+export { Skeleton } from './feedback/skeleton/index.js';
+export { Progress } from './feedback/progress/index.js';
+export { Alert } from './feedback/alert/index.js';
+export { Callout } from './feedback/callout/index.js';
+export { Banner } from './feedback/banner/index.js';
+export { InlineMessage } from './feedback/inline-message/index.js';
+export { LiveRegion } from './feedback/live-region/index.js';
+export { NotificationBell } from './feedback/notification-bell/index.js';
+export { Toaster, ToasterStore, Toast, createToaster, getToasterContext, setToasterContext } from './feedback/toast/index.js';
+// Display Components
+export { Divider } from './display/divider/index.js';
+export { Kbd } from './display/kbd/index.js';
+export { AspectRatio } from './display/aspect-ratio/index.js';
+export { Frame } from './display/frame/index.js';
+export { Timestamp } from './display/timestamp/index.js';
+export { CodeBlock } from './display/code-block/index.js';
+export { StatCard } from './display/stat-card/index.js';
+export { Avatar } from './display/avatar/index.js';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, getCardContext, setCardContext } from './display/card/index.js';
+export { Image } from './display/image/index.js';
+export { List, ListItem } from './display/list/index.js';
+export { DataList, DataListTerm, DataListDescription } from './display/data-list/index.js';
+export { Table, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeader, TableCell } from './display/table/index.js';
+export { TreeView, TreeItem, getTreeViewContext, setTreeViewContext } from './display/tree-view/index.js';
+export { Timeline, TimelineItem } from './display/timeline/index.js';
+export { Compare } from './display/compare/index.js';
+export { Carousel, CarouselSlides, CarouselSlide, CarouselPrev, CarouselNext, CarouselIndicators, getCarouselContext, setCarouselContext } from './display/carousel/index.js';
+// Overlay Components
+export { Modal, ModalTrigger, ModalContent, ModalTitle, ModalDescription, ModalClose, getModalContext, setModalContext } from './overlay/modal/index.js';
+export { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose } from './overlay/dialog/index.js';
+export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose } from './overlay/drawer/index.js';
+export { Tooltip, TooltipTrigger, TooltipContent, getTooltipContext, setTooltipContext } from './overlay/tooltip/index.js';
+export { Popover, PopoverTrigger, PopoverContent, getPopoverContext, setPopoverContext } from './overlay/popover/index.js';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, getDropdownContext, setDropdownContext } from './overlay/dropdown/index.js';
+export { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription, SheetClose } from './overlay/sheet/index.js';
+export { Overlay } from './overlay/overlay/index.js';
+export { Lightbox } from './overlay/lightbox/index.js';
+export { ContextMenu } from './overlay/context-menu/index.js';
+// Layout Components
+export { Stack } from './layout/stack/index.js';
+export { Flex } from './layout/flex/index.js';
+export { Grid } from './layout/grid/index.js';
+export { Container } from './layout/container/index.js';
+export { Spacer } from './layout/spacer/index.js';
+export { Columns } from './layout/columns/index.js';
+// Interactive Components
+export { Sortable } from './interactive/sortable/index.js';
+export { Swipeable } from './interactive/swipeable/index.js';
+export { Resizable } from './interactive/resizable/index.js';
+export { SplitView, SplitViewPane, SplitViewHandle, getSplitViewContext, setSplitViewContext } from './interactive/split-view/index.js';
+export { Draggable } from './interactive/draggable/index.js';
+export { Droppable } from './interactive/droppable/index.js';
+export { InfiniteScroll } from './interactive/infinite-scroll/index.js';
+export { VirtualList } from './interactive/virtual-list/index.js';
+// Utility Components
+export { VisuallyHidden } from './utility/visually-hidden/index.js';
+export { Portal } from './utility/portal/index.js';
+export { FocusTrap } from './utility/focus-trap/index.js';
+export { ScreenReaderOnly } from './utility/screen-reader-only/index.js';
+export { Conditional } from './utility/conditional/index.js';

package/dist/components/interactive/draggable/Draggable.svelte

@@ -0,0 +1,162 @@
+<script lang="ts" module>
+	export interface DraggableEvent<T = unknown> {
+		data: T;
+		dataTransfer: DataTransfer;
+		event: DragEvent;
+	}
+
+	export type KeyMoveDirection = 'left' | 'right' | 'up' | 'down';
+</script>
+
+<script lang="ts" generics="T">
+	import VisuallyHidden from '../../utility/visually-hidden/VisuallyHidden.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ dragging: boolean; grabbed: boolean }]>;
+		data: T;
+		type?: string;
+		disabled?: boolean;
+		effect?: 'copy' | 'move' | 'link' | 'none';
+		as?: 'div' | 'span' | 'li';
+		class?: string;
+		style?: string;
+		'aria-label'?: string;
+		onDragStart?: (e: DraggableEvent<T>) => void;
+		onDragEnd?: (e: DraggableEvent<T>) => void;
+		onKeyMove?: (dir: KeyMoveDirection) => void;
+		onKeyPickup?: () => void;
+		onKeyDrop?: () => void;
+	}
+
+	let {
+		children,
+		data,
+		type = 'application/x-alus-ui',
+		disabled = false,
+		effect = 'move',
+		as = 'div',
+		class: className = '',
+		style,
+		'aria-label': ariaLabel = 'Draggable item',
+		onDragStart,
+		onDragEnd,
+		onKeyMove,
+		onKeyPickup,
+		onKeyDrop
+	}: Props = $props();
+
+	let dragging = $state(false);
+	let grabbed = $state(false);
+	let announce = $state('');
+
+	function start(e: DragEvent) {
+		if (disabled || !e.dataTransfer) {
+			e.preventDefault();
+			return;
+		}
+		dragging = true;
+		try {
+			e.dataTransfer.setData(type, JSON.stringify(data));
+		} catch {
+			e.dataTransfer.setData(type, String(data));
+		}
+		e.dataTransfer.effectAllowed = effect;
+		onDragStart?.({ data, dataTransfer: e.dataTransfer, event: e });
+	}
+
+	function end(e: DragEvent) {
+		dragging = false;
+		if (e.dataTransfer) onDragEnd?.({ data, dataTransfer: e.dataTransfer, event: e });
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (disabled) return;
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault();
+			grabbed = !grabbed;
+			if (grabbed) {
+				announce = 'Item picked up. Use arrow keys to move, press space or enter to drop.';
+				onKeyPickup?.();
+			} else {
+				announce = 'Item dropped.';
+				onKeyDrop?.();
+			}
+			return;
+		}
+		if (!grabbed) return;
+		let dir: KeyMoveDirection | null = null;
+		if (e.key === 'ArrowLeft') dir = 'left';
+		else if (e.key === 'ArrowRight') dir = 'right';
+		else if (e.key === 'ArrowUp') dir = 'up';
+		else if (e.key === 'ArrowDown') dir = 'down';
+		if (dir) {
+			e.preventDefault();
+			onKeyMove?.(dir);
+			announce = `Moved ${dir}.`;
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			grabbed = false;
+			announce = 'Move cancelled.';
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+{#if as === 'span'}
+	<span
+		class={className}
+		{style}
+		role="button"
+		tabindex={disabled ? -1 : 0}
+		draggable={!disabled}
+		aria-label={ariaLabel}
+		aria-disabled={disabled || undefined}
+		aria-pressed={grabbed || undefined}
+		data-dragging={dragging ? '' : undefined}
+		data-grabbed={grabbed ? '' : undefined}
+		ondragstart={start}
+		ondragend={end}
+		onkeydown={onKeydown}
+	>
+		{#if children}{@render children({ dragging, grabbed })}{/if}
+	</span>
+{:else if as === 'li'}
+	<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+	<li
+		class={className}
+		{style}
+		role="button"
+		tabindex={disabled ? -1 : 0}
+		draggable={!disabled}
+		aria-label={ariaLabel}
+		aria-disabled={disabled || undefined}
+		aria-pressed={grabbed || undefined}
+		data-dragging={dragging ? '' : undefined}
+		data-grabbed={grabbed ? '' : undefined}
+		ondragstart={start}
+		ondragend={end}
+		onkeydown={onKeydown}
+	>
+		{#if children}{@render children({ dragging, grabbed })}{/if}
+	</li>
+{:else}
+	<div
+		class={className}
+		{style}
+		role="button"
+		tabindex={disabled ? -1 : 0}
+		draggable={!disabled}
+		aria-label={ariaLabel}
+		aria-disabled={disabled || undefined}
+		aria-pressed={grabbed || undefined}
+		data-dragging={dragging ? '' : undefined}
+		data-grabbed={grabbed ? '' : undefined}
+		ondragstart={start}
+		ondragend={end}
+		onkeydown={onKeydown}
+	>
+		{#if children}{@render children({ dragging, grabbed })}{/if}
+	</div>
+{/if}
+
+<VisuallyHidden aria-live="polite">{announce}</VisuallyHidden>

package/dist/components/interactive/draggable/Draggable.svelte.d.ts

@@ -0,0 +1,48 @@
+export interface DraggableEvent<T = unknown> {
+    data: T;
+    dataTransfer: DataTransfer;
+    event: DragEvent;
+}
+export type KeyMoveDirection = 'left' | 'right' | 'up' | 'down';
+declare function $$render<T>(): {
+    props: {
+        children?: import("svelte").Snippet<[{
+            dragging: boolean;
+            grabbed: boolean;
+        }]>;
+        data: T;
+        type?: string;
+        disabled?: boolean;
+        effect?: "copy" | "move" | "link" | "none";
+        as?: "div" | "span" | "li";
+        class?: string;
+        style?: string;
+        'aria-label'?: string;
+        onDragStart?: (e: DraggableEvent<T>) => void;
+        onDragEnd?: (e: DraggableEvent<T>) => void;
+        onKeyMove?: (dir: KeyMoveDirection) => void;
+        onKeyPickup?: () => void;
+        onKeyDrop?: () => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Draggable: $$IsomorphicComponent;
+type Draggable<T> = InstanceType<typeof Draggable<T>>;
+export default Draggable;

package/dist/components/interactive/draggable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Draggable } from './Draggable.svelte';
+export type { DraggableEvent } from './Draggable.svelte';

package/dist/components/interactive/draggable/index.js

@@ -0,0 +1 @@
+export { default as Draggable } from './Draggable.svelte';