@torpor/ui 0.1.7 → 0.2.1

package/dist/NavMenu/NavMenu.torp

@@ -6,6 +6,17 @@ import {
 	type NavMenuPopoutContext
 } from "./NavMenuTypes";
 
+interface NavMenuProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the menu to screen readers  */
+	ariaLabel?: string | undefined,
+	/** The orientation of the menu, which affects keyboard navigation */
+	orientation?: "horizontal" | "vertical",
+}
+
 /**
  * A list of links for navigating a website.
  *
@@ -21,11 +32,9 @@ import {
  *	 ...
  * </NavMenu>
  * ```
- *
- * @prop {string | undefined} ariaLabel -- An ARIA label for describing the menu to screen readers 
- * @prop {"horizontal" | "vertical"} orientation -- The orientation of the menu, which affects keyboard navigation
  */
-export default function NavMenu($props: any) {
+export default function NavMenu($props: NavMenuProps) {
+	$props ??= $watch({});
 	$props.orientation ||= "horizontal";
 
 	// A collection containing the state and some functions for each item
@@ -164,7 +173,7 @@ export default function NavMenu($props: any) {
 
 	@render {
 		<nav
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu ${$props.class ?? ""}`.trim()}
 			tabindex="0"
 			role="menubar"
@@ -172,7 +181,7 @@ export default function NavMenu($props: any) {
 			aria-orientation={$props.orientation}
 			onfocus={handleFocus}
 		>
-			<:slot />
+			<slot />
 		</nav>
 	}
 }

package/dist/NavMenu/NavMenuButton.torp

@@ -1,13 +1,20 @@
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
+interface NavMenuButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this button is disabled  */
+	disabled?: boolean,
+}
+
 /**
  * A button that is placed in a NavMenu to carry out a non-navigation action such as logging out.
  *
- * @prop {boolean} disabled -- Whether this button is disabled 
  */
-export default function NavMenuButton($props: any) {
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
+export default function NavMenuButton($props: NavMenuButtonProps) {
+	$props ??= $watch({});
 
 	let button: HTMLButtonElement;
 
@@ -27,20 +34,20 @@ export default function NavMenuButton($props: any) {
 
 	@render {
 		<button
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-button ${$props.class ?? ""}`.trim()}
 			type="button"
 			{$props.disabled}
 			role="menuitem"
 			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			data-disabled={$props.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick
 			onfocus={() => handleItemFocus(index)}
 			&ref={button}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/NavMenu/NavMenuElement.torp

@@ -1,14 +1,22 @@
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
+interface NavMenuElementProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this button is disabled  */
+	disabled?: boolean,
+	/** An element that can be focused via keyboard navigation */
+	element?: HTMLElement,
+}
+
 /**
  * An element of any type that can be placed in a NavMenu.
  *
- * @prop {boolean} disabled -- Whether this button is disabled 
- * @prop {HTMLElement} element -- An element that can be focused via keyboard navigation
  */
-export default function NavMenuElement($props: any) {
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
+export default function NavMenuElement($props: NavMenuElementProps) {
+	$props ??= $watch({});
 
 	// Get stuff out of the NavMenuContext
 	const menuContext = $context[NavMenuContextName] as NavMenuContext;
@@ -26,18 +34,18 @@ export default function NavMenuElement($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-div ${$props.class ?? ""}`.trim()}
 			type="div"
 			role="menuitem"
 			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			data-disabled={$props.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick
 			onfocus={() => handleItemFocus(index)}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/NavMenu/NavMenuGroup.torp

@@ -1,11 +1,20 @@
 import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
 
+interface NavMenuGroupProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the group to screen readers  */
+	ariaLabel?: string,
+}
+
 /**
  * A container for a logical group of navigation menu items.
- *
- * @prop {string | undefined} ariaLabel -- An ARIA label for describing the group to screen readers 
  */
-export default function NavMenuGroup($props: any) {
+export default function NavMenuGroup($props: NavMenuGroupProps) {
+	$props ??= $watch({});
+
 	let $state = $watch({
 		headerId: ""
 	});
@@ -18,13 +27,13 @@ export default function NavMenuGroup($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-group ${$props.class ?? ""}`.trim()}
 			role="group"
 			aria-label={$props.ariaLabel}
 			aria-labelledby={$state.headerId}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/NavMenu/NavMenuGroupHeader.torp

@@ -1,12 +1,20 @@
 import getId from "../utils/getId";
 import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
 
+interface NavMenuGroupHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The type of HTML header to use */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+}
+
 /**
  * The header for a NavMenuGroup.
- *
- * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
-export default function NavMenuGroupHeader($props: any) {
+export default function NavMenuGroupHeader($props: NavMenuGroupHeaderProps) {
+	$props ??= $watch({});
 	$props.id ??= getId();
 
 	const context = $context[NavMenuGroupContextName] as NavMenuGroupContext;
@@ -19,12 +27,12 @@ export default function NavMenuGroupHeader($props: any) {
 	$state.headerId = $props.id;
 
 	@render {
+		@// TODO: self={$props.as}
 		<h4
-			@// TODO: self={$props.as}
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-group-header ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}
 }

package/dist/NavMenu/NavMenuLink.torp

@@ -1,19 +1,27 @@
 
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
+interface NavMenuLinkProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The URL for the menu link */
+	href: string,
+	/** Whether the menu link should open in a new tab/window */
+	newWindow?: boolean,
+	/** Whether this link is disabled */
+	disabled?: boolean,
+}
+
 /**
  * A link that is placed in a NavMenu and signals a response by a user.
  *
- * @prop {string} href -- The URL for the menu link
- * @prop {newWindow} boolean -- Whether the menu link should open in a new tab/window
- * @prop {boolean} disabled -- Whether this link is disabled
  */
-export default function NavMenuLink($props: any) {
+export default function NavMenuLink($props: NavMenuLinkProps) {
+	$props ??= $watch({ href: "#" });
 	$props.newWindow ??= false;
 
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
-
 	let link: HTMLAnchorElement;
 
 	// Get stuff out of the NavMenuContext
@@ -32,21 +40,21 @@ export default function NavMenuLink($props: any) {
 
 	@render {
 		<a
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-link ${$props.class ?? ""}`.trim()}
 			href={$props.href}
 			{$props.disabled}
 			target={$props.newWindow ? "_blank" : undefined}
 			role="menuitem"
 			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			data-disabled={$props.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick
 			onfocus={() => handleItemFocus(index)}
 			&ref={link}
 		>
-			<:slot />
+			<slot />
 		</a>
 	}
 }

package/dist/NavMenu/NavMenuPopout.torp

@@ -1,5 +1,14 @@
 import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
 
+interface NavMenuPopoutProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the popout is visible */
+	visible?: boolean,
+}
+
 /**
  * A popout that is attached to a menu button and can be used to show a submenu.
  *
@@ -11,10 +20,9 @@ import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTy
  * 	<NavMenuPopoutContent />
  * </NavMenuPopout>
  * ```
- *
- * @prop {boolean} visible -- Whether the popout is visible
  */
-export default function NavMenuPopout($props: any) {
+export default function NavMenuPopout($props: NavMenuPopoutProps) {
+	$props ??= $watch({});
 	$props.visible ??= false;
 
 	let $state = $watch({
@@ -59,11 +67,11 @@ export default function NavMenuPopout($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-popout ${$props.class ?? ""}`.trim()}
 			onmouseleave={handleMouseLeave}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/NavMenu/NavMenuPopoutButton.torp

@@ -1,4 +1,3 @@
-
 import {
 	NavMenuContextName,
 	NavMenuPopoutContextName,
@@ -6,18 +5,25 @@ import {
 	type NavMenuPopoutContext,
 } from "./NavMenuTypes";
 
+interface NavMenuPopoutButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The delay before showing the popout, in milliseconds */
+	hoverDelay?: number,
+	/** Whether this button is disabled */
+	disabled?: boolean,
+}
+
 /**
  * A button that is placed in a NavMenu and signals a response by a user.
  *
- * @prop {number} hoverDelay -- The delay before showing the popout, in milliseconds
- * @prop {boolean} disabled -- Whether this button is disabled
  */
-export default function NavMenuPopoutButton($props: any) {
+export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps) {
+	$props ??= $watch({});
 	$props.hoverDelay ??= 500;
 
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
-
 	let button: HTMLButtonElement;
 	let interval: NodeJS.Timeout | undefined;
 
@@ -96,7 +102,7 @@ export default function NavMenuPopoutButton($props: any) {
 
 	@render {
 		<button
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-popout-button ${$props.class ?? ""}`.trim()}
 			type="button"
 			{$props.disabled}
@@ -104,7 +110,7 @@ export default function NavMenuPopoutButton($props: any) {
 			aria-haspopup="true"
 			aria-expanded={$state.visible.toString()}
 			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 			onkeydown={handlePopoutKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}
@@ -112,9 +118,9 @@ export default function NavMenuPopoutButton($props: any) {
 			onmouseleave={handleMouseLeave}
 			onmousemove={handleMouseMove}
 			&ref={button}
-			:onmount={(el) => popoutContext.anchorElement = el }
+			onmount={(el) => popoutContext.anchorElement = el }
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/NavMenu/NavMenuPopoutContent.torp

@@ -3,17 +3,28 @@ import getScrollParent from "../utils/getScrollParent";
 import setPopoverPosition from "../utils/setPopoverPosition";
 import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
 
+interface NavMenuPopoutContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Where the popout will be shown, relative to the popout button */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popout will be aligned, relative to the popout button */
+	alignment?: "start" | "center" | "end",
+}
+
 /**
  * The content that is displayed for a NavMenuPopout when it is open.
  *
- * @prop {"top" | "right" | "bottom" | "left"} side -- Where the popout will be shown, relative to the popout button
- * @prop {"start" | "center" | "end"} alignment -- How the popout will be aligned, relative to the popout button
  */
-export default function NavMenuPopoutContent($props: any) {
+export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps) {
+	$props ??= $watch({});
 	$props.side ??= "bottom";
 	$props.alignment ??= "start";
 
 	let div: HTMLDivElement;
+	let shown = false;
 
 	// Get stuff out of the NavMenuPopoutContext
 	const context = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
@@ -22,35 +33,36 @@ export default function NavMenuPopoutContent($props: any) {
 	}
 	let $state = context.state;
 
-	let first = true;
 	$run(() => {
-		let visible = $state.visible;
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
 
-		if (first) {
-			first = false;
-			return;
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
+		if (context.focusFirstElement) {
+			context.focusFirstElement();
 		}
+	}
+
+	function hide() {
+		if (!shown) return;
 
-		if (visible) {
-			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
-			//await tick();
-			setPosition();
-			if (context.focusFirstElement) {
-				context.focusFirstElement();
-			}
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.addEventListener("resize", setPosition);
-			scrollParent.addEventListener("scroll", setPosition);
-		} else {
-			// Stop listening for window resize and focus the anchor element per WAI guidelines
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.removeEventListener("resize", setPosition);
-			scrollParent.removeEventListener("scroll", setPosition);
-			if (context.anchorElement?.focus) {
-				context.anchorElement.focus();
-			}
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (context.anchorElement?.focus) {
+			context.anchorElement.focus();
 		}
-	});
+	}
 
 	function setPosition() {
 		if (!context.anchorElement) {
@@ -65,12 +77,12 @@ export default function NavMenuPopoutContent($props: any) {
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-nav-menu-popout-content ${$props.class ?? ""}`.trim()}
 				&ref={div}
-				:onmount={(el) => setPopoverPosition(context.anchorElement, el, $props.side, $props.alignment)}
+				onmount={show}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}

package/dist/NavMenu/NavMenuSeparator.torp

@@ -1,14 +1,23 @@
 
+interface NavMenuSeparatorProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * An element in a menu that separates logical sets of menu items.
  */
-export default function NavMenuSeparator($props: any) {
+export default function NavMenuSeparator($props: NavMenuSeparatorProps) {
+	$props ??= $watch({});
+
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-separator ${$props.class ?? ""}`.trim()} role="separator"
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }