@marianmeres/stuic 2.11.4 → 2.13.0

package/dist/components/DropdownMenu/DropdownMenu.svelte.d.ts

@@ -0,0 +1,148 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { THC } from "../Thc/Thc.svelte";
+/**
+ * Valid positions for dropdown placement relative to the trigger element.
+ */
+export type DropdownMenuPosition = "top" | "top-left" | "top-right" | "top-span-left" | "top-span-right" | "bottom" | "bottom-left" | "bottom-right" | "bottom-span-left" | "bottom-span-right" | "left" | "right";
+/** Base properties shared by most item types */
+interface DropdownMenuItemBase {
+    /** Unique identifier - required for keyboard navigation tracking */
+    id: string | number;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes for this specific item */
+    class?: string;
+    /** Arbitrary data to pass through */
+    data?: Record<string, any>;
+}
+/** Clickable action item */
+export interface DropdownMenuActionItem extends DropdownMenuItemBase {
+    type: "action";
+    /** Label displayed - supports THC for icons, HTML, etc. */
+    label: THC;
+    /** Shortcut hint displayed on the right (e.g., "Cmd+K") */
+    shortcut?: string;
+    /** Icon displayed before label - supports THC */
+    icon?: THC;
+    /** Callback when item is selected */
+    onSelect?: () => void | boolean;
+}
+/** Visual divider/separator */
+export interface DropdownMenuDividerItem {
+    type: "divider";
+    id?: string | number;
+    class?: string;
+}
+/** Non-interactive section header */
+export interface DropdownMenuHeaderItem {
+    type: "header";
+    id?: string | number;
+    label: THC;
+    class?: string;
+}
+/** Custom static content (non-interactive) */
+export interface DropdownMenuCustomItem {
+    type: "custom";
+    id?: string | number;
+    /** Content rendered via THC */
+    content: THC;
+    class?: string;
+}
+/** Expandable section containing nested items */
+export interface DropdownMenuExpandableItem extends DropdownMenuItemBase {
+    type: "expandable";
+    /** Label for the expandable header */
+    label: THC;
+    icon?: THC;
+    /** Nested items (single level only - no nested expandables) */
+    items: DropdownMenuFlatItem[];
+    /** Whether section starts expanded */
+    defaultExpanded?: boolean;
+}
+/** Flat items (non-expandable) */
+export type DropdownMenuFlatItem = DropdownMenuActionItem | DropdownMenuDividerItem | DropdownMenuHeaderItem | DropdownMenuCustomItem;
+/** All possible item types */
+export type DropdownMenuItem = DropdownMenuFlatItem | DropdownMenuExpandableItem;
+/** Internal type for navigable items (includes expandable headers) */
+export interface NavigableExpandable {
+    type: "expandable-header";
+    id: string | number;
+    expandableItem: DropdownMenuExpandableItem;
+}
+export type NavigableItem = DropdownMenuActionItem | NavigableExpandable;
+export interface Props extends Omit<HTMLButtonAttributes, "children"> {
+    /** Menu items to display */
+    items: DropdownMenuItem[];
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Popover position relative to trigger */
+    position?: DropdownMenuPosition;
+    /** Offset from trigger element (CSS value) */
+    offset?: string;
+    /** Max height of dropdown (CSS value) */
+    maxHeight?: string;
+    /** Whether to close menu when an action item is selected */
+    closeOnSelect?: boolean;
+    /** Close on click outside */
+    closeOnClickOutside?: boolean;
+    /** Close on Escape key */
+    closeOnEscape?: boolean;
+    /** Force fallback positioning mode (for testing) */
+    forceFallback?: boolean;
+    /** Classes for the wrapper element */
+    class?: string;
+    /** Classes for the trigger button */
+    classTrigger?: string;
+    /** Classes for the dropdown container */
+    classDropdown?: string;
+    /** Classes for action items */
+    classItem?: string;
+    /** Classes for active/focused action item */
+    classItemActive?: string;
+    /** Classes for disabled items */
+    classItemDisabled?: string;
+    /** Classes for dividers */
+    classDivider?: string;
+    /** Classes for header items */
+    classHeader?: string;
+    /** Classes for expandable section header */
+    classExpandable?: string;
+    /** Classes for expandable section content */
+    classExpandableContent?: string;
+    /** Custom trigger snippet - receives isOpen state, toggle function, and ARIA props for full control */
+    trigger?: Snippet<[
+        {
+            isOpen: boolean;
+            toggle: () => void;
+            triggerProps: {
+                id: string;
+                "aria-haspopup": "menu";
+                "aria-expanded": boolean;
+                "aria-controls": string;
+            };
+        }
+    ]>;
+    /** Simple content rendered inside the default trigger button */
+    children?: Snippet;
+    /** Called when menu opens */
+    onOpen?: () => void;
+    /** Called when menu closes */
+    onClose?: () => void;
+    /** Called when any action item is selected */
+    onSelect?: (item: DropdownMenuActionItem) => void;
+    /** Reference to trigger element */
+    triggerEl?: HTMLButtonElement;
+    /** Reference to dropdown element */
+    dropdownEl?: HTMLDivElement;
+}
+export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu relative inline-block";
+export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tfocus-visible:outline-2 focus-visible:outline-offset-2\n\t\tcursor-pointer\n\t";
+export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-lg\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
+export declare const DROPDOWN_MENU_ITEM_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\tpx-2 py-1.5\n\t\tmin-h-[44px]\n\t\ttext-left text-sm\n\t\trounded-sm\n\t\tcursor-pointer\n\t\ttouch-action-manipulation\n\t\thover:bg-neutral-100 dark:hover:bg-neutral-700\n\t\tfocus:outline-none\n\t\tfocus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-600\n\t";
+export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "\n\t\th-px my-1\n\t\tbg-neutral-200 dark:bg-neutral-700\n\t";
+export declare const DROPDOWN_MENU_HEADER_CLASSES = "\n\t\tpx-2 py-1.5\n\t\ttext-xs font-semibold uppercase tracking-wide\n\t\ttext-neutral-500 dark:text-neutral-400\n\t\tselect-none\n\t";
+import "./index.css";
+declare const DropdownMenu: import("svelte").Component<Props, {}, "isOpen" | "triggerEl" | "dropdownEl">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/DropdownMenu/index.css

@@ -0,0 +1,16 @@
+/* Base dropdown styles */
+.stuic-dropdown-menu-dropdown {
+	scrollbar-width: thin;
+}
+
+/* CSS Anchor Positioning supported mode - flip only when viewport overflow */
+@supports (anchor-name: --anchor) {
+	.stuic-dropdown-menu-dropdown {
+		position-try-fallbacks: flip-block, flip-inline;
+	}
+}
+
+/* Expandable section animation handled by Svelte slide transition */
+.stuic-dropdown-menu-expandable-content {
+	overflow: hidden;
+}

package/dist/components/DropdownMenu/index.d.ts

@@ -0,0 +1 @@
+export { default as DropdownMenu, type Props as DropdownMenuProps, type DropdownMenuItem, type DropdownMenuActionItem, type DropdownMenuDividerItem, type DropdownMenuHeaderItem, type DropdownMenuCustomItem, type DropdownMenuExpandableItem, type DropdownMenuFlatItem, type DropdownMenuPosition, type NavigableItem, type NavigableExpandable, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_ITEM_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1 @@
+export { default as DropdownMenu, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_ITEM_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";

package/dist/components/Input/FieldAssets.svelte

@@ -38,7 +38,7 @@
 	import Circle from "../Circle/Circle.svelte";
 	import { Modal } from "../Modal/index.js";
 	import { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
-	import SpinnerCircle from "../Spinner/SpinnerCircle.svelte";
+	import SpinnerCircleOscillate from "../Spinner/SpinnerCircleOscillate.svelte";
 	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
 	import { X } from "../X/index.js";
 	import InputWrap from "./_internal/InputWrap.svelte";
@@ -377,7 +377,7 @@
 {#snippet default_render()}
 	{#if isLoading}
 		<div class="p-2 pl-8 flex items-center justify-center min-h-24">
-			<SpinnerCircle />
+			<SpinnerCircleOscillate />
 		</div>
 	{:else}
 		<div class={["p-2 flex items-center gap-0.5 flex-wrap"]}>
@@ -427,7 +427,7 @@
 										rotate={-90}
 									/>
 								{:else}
-									<SpinnerCircle bgStrokeColor="gray" />
+									<SpinnerCircleOscillate bgStrokeColor="gray" />
 								{/if}
 							</span>
 						{/if}

package/dist/components/Input/FieldOptions.svelte

@@ -657,7 +657,7 @@
 					<div
 						class={[
 							"options overflow-y-auto overflow-x-hidden space-y-1 scrollbar-thin",
-							"h-[220px] max-h-[220px]",
+							"h-55 max-h-55",
 						]}
 						bind:this={optionsBox}
 						tabindex="-1"

package/dist/components/Spinner/Spinner.svelte

@@ -1,136 +1,85 @@
 <script lang="ts" module>
 	export interface Props {
 		class?: string;
-		/** One "loop" duration in ms */
-		duration?: number;
-		/** Number of "hands" (3-12) */
 		count?: number;
-		thickness?: "normal" | "thin" | "thick";
-		height?: "normal" | "tall" | "short";
+		thickness?: "thin" | "normal" | "thick";
+		height?: "short" | "normal" | "tall";
 		direction?: "cw" | "ccw";
+		rounded?: number;
+		duration?: number;
 	}
 </script>
 
 <script lang="ts">
-	import { twMerge } from "../../utils/tw-merge.js";
-
-	// this is quite verbose, but very straight forward implementation,
-	// and always rendered without any issues (opposed to linear-gradient hackish stuff)
-
 	let {
-		class: _class,
-		duration = 750,
+		class: classProp,
 		count = 8,
-		thickness = "thick",
+		thickness = "normal",
 		height = "normal",
 		direction = "cw",
+		rounded = 2,
+		duration = 750,
 	}: Props = $props();
 
-	let _count = $derived(Math.max(3, Math.min(12, count)));
+	const thicknessMap: Record<NonNullable<Props["thickness"]>, number> = {
+		thin: 1,
+		normal: 2,
+		thick: 4,
+	};
+	const heightMap: Record<NonNullable<Props["height"]>, number> = {
+		short: 5,
+		normal: 7,
+		tall: 10,
+	};
 
-	let _segments = $derived.by(() => {
-		let out = [];
-		for (let i = 0; i < _count; i++) {
-			out.push({
-				rotate: (360 / _count) * i,
-				delay:
-					(direction === "ccw" ? 1 : -1) * (duration - (duration / _count) * (i + 1)),
-				duration,
-			});
-		}
-		return out;
-	});
-
-	let _thickness = $derived(
-		"thickness-" +
-			(["normal", "thin", "thick"].includes(thickness) ? thickness : "normal")
-	);
-
-	let _height = $derived(
-		"height-" + (["normal", "tall", "short"].includes(height) ? height : "normal")
-	);
+	const barLength = $derived(heightMap[height]);
+	const barWidth = $derived(thicknessMap[thickness]);
+	const size = $derived(barLength * 3);
+	const center = $derived(size / 2);
+	const barHeight = $derived(barLength - 1);
 </script>
 
-<div class="spinner {_thickness} {_height} {twMerge('inline-block w-5', _class)}">
-	{#each _segments as s}
-		<div
-			style={[
-				`transform: rotate(${s.rotate}deg);`,
-				`animation-delay: ${s.delay}ms;`,
-				`animation-duration: ${s.duration}ms;`,
-			].join("")}
-		></div>
+<div
+	class="spinner {classProp ?? ''}"
+	style:--size="{size}px"
+	style:--duration="{duration}ms"
+>
+	{#each Array(count) as _, i}
+		{@const angle = (360 / count) * i}
+		{@const delay = direction === "ccw" ? i / count : (count - i) / count}
+		<span
+			class="bar"
+			style:width="{barWidth}px"
+			style:height="{barHeight}px"
+			style:border-radius="{rounded}px"
+			style:transform-origin="center {center}px"
+			style:transform="translateX(-50%) rotate({angle}deg)"
+			style:animation-delay="{-delay * duration}ms"
+		></span>
 	{/each}
 </div>
 
 <style>
-	.spinner,
-	.spinner div,
-	.spinner div:after {
-		box-sizing: border-box;
-	}
-
 	.spinner {
-		/* display: inline-block; */
 		position: relative;
-		aspect-ratio: 1/1;
-		pointer-events: none;
+		width: var(--size);
+		height: var(--size);
 	}
 
-	.spinner div {
-		width: 100%;
-		height: 100%;
+	.bar {
 		position: absolute;
-		inset: 0;
-		/* animation: spinner 1.2s linear infinite; */
-		animation-name: spinner;
-		animation-timing-function: linear;
-		animation-iteration-count: infinite;
-	}
-
-	.spinner div:after {
-		content: " ";
-		display: block;
-		position: absolute;
-
-		top: 0;
-		/* left: 46%;
-		width: 8%; 
-		height: 27%; */
-		border-radius: 35%;
+		left: 50%;
+		top: 0px;
 		background: currentColor;
-	}
-	/* thickness */
-	.spinner.thickness-thin div:after {
-		left: 47.5%;
-		width: 5%;
-	}
-	.spinner.thickness-normal div:after {
-		left: 46%;
-		width: 8%;
-	}
-	.spinner.thickness-thick div:after {
-		left: 44.5%;
-		width: 11%;
-	}
-
-	/* height */
-	.spinner.height-short div:after {
-		height: 21%;
-	}
-	.spinner.height-normal div:after {
-		height: 27%;
-	}
-	.spinner.height-tall div:after {
-		height: 33%;
+		animation: fade var(--duration) linear infinite;
 	}
 
-	@keyframes spinner {
-		0% {
+	@keyframes fade {
+		from {
 			opacity: 1;
 		}
-		100% {
-			opacity: 0;
+		to {
+			opacity: 0.12;
 		}
 	}
 </style>

package/dist/components/Spinner/Spinner.svelte.d.ts

@@ -1,12 +1,11 @@
 export interface Props {
     class?: string;
-    /** One "loop" duration in ms */
-    duration?: number;
-    /** Number of "hands" (3-12) */
     count?: number;
-    thickness?: "normal" | "thin" | "thick";
-    height?: "normal" | "tall" | "short";
+    thickness?: "thin" | "normal" | "thick";
+    height?: "short" | "normal" | "tall";
     direction?: "cw" | "ccw";
+    rounded?: number;
+    duration?: number;
 }
 declare const Spinner: import("svelte").Component<Props, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;

package/dist/components/Spinner/SpinnerCircle.svelte

@@ -1,47 +1,62 @@
 <script lang="ts" module>
 	export interface Props {
 		class?: string;
-		bgStrokeColor?: string;
-		strokeWidth?: number;
-		noOscillate?: boolean;
-		rotateDuration?: string;
+		/** One "loop" duration in ms */
+		duration?: number;
+		/** Border thickness preset */
+		thickness?: "normal" | "thin" | "thick";
+		/** Rotation direction */
+		direction?: "cw" | "ccw";
 	}
 </script>
 
 <script lang="ts">
-	import { createTickerRAF } from "@marianmeres/ticker";
-	import { onDestroy } from "svelte";
-	import { oscillate } from "../../utils/oscillate.js";
 	import { twMerge } from "../../utils/tw-merge.js";
-	import Circle from "../Circle/Circle.svelte";
 
 	let {
-		class: classProp = "",
-		bgStrokeColor = "rgba(0 0 0 / .1)",
-		strokeWidth,
-		noOscillate,
-		rotateDuration = ".75s",
+		class: classProp,
+		duration = 750,
+		thickness = "normal",
+		direction = "cw",
 	}: Props = $props();
 
-	/**
-	 * NOTE: we happen to have 4 distinct values here which effect the overall look and feel...
-	 *  1. the tick frequency
-	 *  2. the oscillation time input (seconds)
-	 *  3. the oscillation speed factor (1)
-	 *  4. the animation-spin duration
-	 */
+	let _thickness = $derived(
+		"thickness-" +
+			(["normal", "thin", "thick"].includes(thickness) ? thickness : "normal")
+	);
+</script>
 
-	const ticker = createTickerRAF(50, true);
-	let completeness = $derived(noOscillate ? 0.66 : oscillate($ticker / 1000, 0.15, 0.85));
+<span
+	class={twMerge("stuic-spinner-basic inline-block size-5", _thickness, classProp)}
+	style="animation-duration: {duration}ms; animation-direction: {direction === 'ccw'
+		? 'reverse'
+		: 'normal'};"
+></span>
 
-	onDestroy(ticker.stop);
-</script>
+<style>
+	.stuic-spinner-basic {
+		box-sizing: border-box;
+		border-radius: 50%;
+		border-style: solid;
+		border-color: currentColor;
+		border-top-color: transparent;
+		animation: spin linear infinite;
+	}
+
+	/* Thickness presets */
+	.stuic-spinner-basic.thickness-thin {
+		border-width: 1px;
+	}
+	.stuic-spinner-basic.thickness-normal {
+		border-width: 2px;
+	}
+	.stuic-spinner-basic.thickness-thick {
+		border-width: 4px;
+	}
 
-<Circle
-	animateCompletenessMs={0}
-	{completeness}
-	class={twMerge("stuic-spinner-circle animate-spin", classProp)}
-	{bgStrokeColor}
-	{strokeWidth}
-	style="animation-duration: {rotateDuration}"
-/>
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/components/Spinner/SpinnerCircle.svelte.d.ts

@@ -1,9 +1,11 @@
 export interface Props {
     class?: string;
-    bgStrokeColor?: string;
-    strokeWidth?: number;
-    noOscillate?: boolean;
-    rotateDuration?: string;
+    /** One "loop" duration in ms */
+    duration?: number;
+    /** Border thickness preset */
+    thickness?: "normal" | "thin" | "thick";
+    /** Rotation direction */
+    direction?: "cw" | "ccw";
 }
 declare const SpinnerCircle: import("svelte").Component<Props, {}, "">;
 type SpinnerCircle = ReturnType<typeof SpinnerCircle>;

package/dist/components/Spinner/SpinnerCircleOscillate.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	export interface Props {
+		class?: string;
+		bgStrokeColor?: string;
+		strokeWidth?: number;
+		noOscillate?: boolean;
+		rotateDuration?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { createTickerRAF } from "@marianmeres/ticker";
+	import { onDestroy } from "svelte";
+	import { oscillate } from "../../utils/oscillate.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Circle from "../Circle/Circle.svelte";
+
+	let {
+		class: classProp = "",
+		bgStrokeColor = "rgba(0 0 0 / .1)",
+		strokeWidth,
+		noOscillate,
+		rotateDuration = ".75s",
+	}: Props = $props();
+
+	/**
+	 * NOTE: we happen to have 4 distinct values here which effect the overall look and feel...
+	 *  1. the tick frequency
+	 *  2. the oscillation time input (seconds)
+	 *  3. the oscillation speed factor (1)
+	 *  4. the animation-spin duration
+	 */
+
+	const ticker = createTickerRAF(50, true);
+	let completeness = $derived(noOscillate ? 0.66 : oscillate($ticker / 1000, 0.15, 0.85));
+
+	onDestroy(ticker.stop);
+</script>
+
+<Circle
+	animateCompletenessMs={0}
+	{completeness}
+	class={twMerge("stuic-spinner-circle animate-spin", classProp)}
+	{bgStrokeColor}
+	{strokeWidth}
+	style="animation-duration: {rotateDuration}"
+/>

package/dist/components/Spinner/SpinnerCircleOscillate.svelte.d.ts

@@ -0,0 +1,10 @@
+export interface Props {
+    class?: string;
+    bgStrokeColor?: string;
+    strokeWidth?: number;
+    noOscillate?: boolean;
+    rotateDuration?: string;
+}
+declare const SpinnerCircleOscillate: import("svelte").Component<Props, {}, "">;
+type SpinnerCircleOscillate = ReturnType<typeof SpinnerCircleOscillate>;
+export default SpinnerCircleOscillate;

package/dist/components/Spinner/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Spinner, type Props as SpinnerProps } from "./Spinner.svelte";
 export { default as SpinnerCircle, type Props as SpinnerCircleProps, } from "./SpinnerCircle.svelte";
+export { default as SpinnerCircleOscillate, type Props as SpinnerCircleOscillateProps, } from "./SpinnerCircleOscillate.svelte";
 export { spinnerCreateBackAndForthCharFrames, default as SpinnerUnicode, type Props as SpinnerUnicodeProps, type SpinnerUnicodeVariant, } from "./SpinnerUnicode.svelte";

package/dist/components/Spinner/index.js

@@ -1,3 +1,4 @@
 export { default as Spinner } from "./Spinner.svelte";
 export { default as SpinnerCircle, } from "./SpinnerCircle.svelte";
+export { default as SpinnerCircleOscillate, } from "./SpinnerCircleOscillate.svelte";
 export { spinnerCreateBackAndForthCharFrames, default as SpinnerUnicode, } from "./SpinnerUnicode.svelte";

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
+export * from "./components/DropdownMenu/index.js";
 export * from "./components/HoverExpandableWidth/index.js";
 export * from "./components/Input/index.js";
 export * from "./components/KbdShortcut/index.js";

package/dist/index.js

@@ -32,6 +32,7 @@ export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
+export * from "./components/DropdownMenu/index.js";
 export * from "./components/HoverExpandableWidth/index.js";
 export * from "./components/Input/index.js";
 export * from "./components/KbdShortcut/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.11.4",
+  "version": "2.13.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",