@heyramzi/ui 3.6.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/components/open-in/open-in.svelte

@@ -14,8 +14,8 @@
 	}
 
 	/** `chip` is the bordered inline tag, `button` sits in a header beside other
-	 *  buttons, `icon` is the bare mark for a dense row. */
-	export type OpenInVariant = "chip" | "button" | "icon";
+	 *  buttons. A bare-mark form was cut: at 20px it failed WCAG 2.5.8. */
+	export type OpenInVariant = "chip" | "button";
 	export type OpenInSize = "sm" | "default";
 </script>
 
@@ -86,22 +86,21 @@
 		class={cn(
 			variant === "button"
 				? buttonVariants({ variant: "outline", size: size === "sm" ? "sm" : "default" })
-				: variant === "icon"
-					? "inline-flex shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-					: cn(
-							"inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-							size === "sm" ? "px-1.5 py-0.5 text-2xs" : "px-2 py-1 text-xs",
-						),
-			variant === "icon" && (size === "sm" ? "size-5" : "size-6"),
+				: cn(
+						"inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+						// WHY the button heights: the sm chip was 19px, under the 24px target
+						// floor. Under a thumb it grows to 40 and 44, and the sm hit area to 44.
+						size === "sm"
+							? "relative h-7 px-2 text-2xs after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,1.5rem)] after:w-[max(100%,1.5rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:h-10 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)]"
+							: "h-8 px-2.5 text-xs any-pointer-coarse:h-11 any-pointer-coarse:px-3",
+					),
 			className,
 		)}
 	>
 		<Icon aria-hidden="true" size={iconSize} />
-		{#if variant !== "icon"}
-			{text}
-			<!-- The one thing the mark can't say: this leaves the app. It stays muted
-				     so the eye lands on the tool name first. -->
-			<ArrowSquareOut aria-hidden="true" size={iconSize} class="text-muted-foreground" />
-		{/if}
+		{text}
+		<!-- The one thing the mark can't say: this leaves the app. It stays muted
+		     so the eye lands on the tool name first. -->
+		<ArrowSquareOut aria-hidden="true" size={iconSize} class="text-muted-foreground" />
 	</a>
 </div>

package/src/components/open-in/open-in.svelte.d.ts

@@ -15,8 +15,8 @@ export interface OpenInTool {
     }>;
 }
 /** `chip` is the bordered inline tag, `button` sits in a header beside other
- *  buttons, `icon` is the bare mark for a dense row. */
-export type OpenInVariant = "chip" | "button" | "icon";
+ *  buttons. A bare-mark form was cut: at 20px it failed WCAG 2.5.8. */
+export type OpenInVariant = "chip" | "button";
 export type OpenInSize = "sm" | "default";
 interface Props {
     /** The tool to link to: its name, accessible sentence and mark. */

package/src/effects/interactive-hover-button/InteractiveHoverButton.svelte

@@ -12,7 +12,8 @@
 		/** `submit` posts the form the button sits in. */
 		type?: "button" | "submit";
 		disabled?: boolean;
-		size?: "default" | "md" | "sm";
+		/** `sm` is 40px for a condensed bar; under a thumb both are 44px. */
+		size?: "default" | "sm";
 		tone?: "ink" | "coral";
 		beam?: boolean;
 		dot?: boolean;
@@ -43,7 +44,6 @@
 	let classes = $derived(
 		[
 			"cta-hover",
-			size === "md" && "cta-hover--md",
 			size === "sm" && "cta-hover--sm",
 			tone === "coral" && "cta-hover--coral",
 			!beam && "cta-hover--no-beam",
@@ -168,28 +168,24 @@
 			pointer-events: none;
 		}
 
-		/* 40px, between 44px and 32px, for a CTA in a condensed bar. 32px is too
-		   small to read as the main action, so only the label shrinks, to 13px. */
-		.cta-hover--md {
+		/* 40px for a CTA in a condensed bar. The old 32px was too small to read as
+		   the main action, so only the label shrinks, to 13px. */
+		.cta-hover--sm {
 			height: 40px;
 			padding: 0 24px;
 			font-size: 13px;
 		}
 
-		.cta-hover--md .cta-hover__dot {
+		.cta-hover--sm .cta-hover__dot {
 			width: 7px;
 			height: 7px;
 		}
 
-		.cta-hover--sm {
-			height: 32px;
-			padding: 0 20px;
-			font-size: 13px;
-		}
-
-		.cta-hover--sm .cta-hover__dot {
-			width: 6px;
-			height: 6px;
+		/* Under a thumb both sizes clear the 44px touch target, as Button does. */
+		@media (any-pointer: coarse) {
+			.cta-hover--sm {
+				height: 44px;
+			}
 		}
 
 		.cta-hover--no-beam::before {
@@ -344,11 +340,39 @@
 			}
 		}
 
+		/* The beam stops, and hover swaps the fill and label in place: no dot
+		   growing out, no label sliding across. */
 		@media (prefers-reduced-motion: reduce) {
 			.cta-hover::before {
 				animation: none;
 				opacity: 0;
 			}
+
+			.cta-hover,
+			.cta-hover__resting,
+			.cta-hover__dot,
+			.cta-hover__label,
+			.cta-hover__reveal,
+			:global(.cta-hover__arrow--inline) {
+				transition-property: opacity, background-color, color;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
+			.cta-hover:hover .cta-hover__dot,
+			.cta-hover:not(.cta-hover--no-dot):hover .cta-hover__resting .cta-hover__label,
+			.cta-hover:not(.cta-hover--no-dot):hover .cta-hover__reveal,
+			.cta-hover--no-dot:hover :global(.cta-hover__arrow--inline) {
+				transform: none;
+			}
+
+			.cta-hover:not(.cta-hover--no-dot):hover::after {
+				background: var(--color-signal-600);
+			}
+
+			.cta-hover--coral:not(.cta-hover--no-dot):hover::after {
+				background: var(--color-ink);
+			}
 		}
 	}
 

package/src/effects/interactive-hover-button/InteractiveHoverButton.svelte.d.ts

@@ -3,7 +3,8 @@ interface Props {
     /** `submit` posts the form the button sits in. */
     type?: "button" | "submit";
     disabled?: boolean;
-    size?: "default" | "md" | "sm";
+    /** `sm` is 40px for a condensed bar; under a thumb both are 44px. */
+    size?: "default" | "sm";
     tone?: "ink" | "coral";
     beam?: boolean;
     dot?: boolean;

package/src/shadcn/sidebar/sidebar-provider.svelte

@@ -14,6 +14,7 @@
 		ref = $bindable(null),
 		open = $bindable(true),
 		onOpenChange = () => {},
+		persist = true,
 		class: className,
 		style,
 		children,
@@ -21,6 +22,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		open?: boolean;
 		onOpenChange?: (open: boolean) => void;
+		/**
+		 * False for a sidebar that isn't the app's shell, such as a docs demo: it then
+		 * writes no state cookie and takes no Cmd+B, so it can't fold the real one.
+		 */
+		persist?: boolean;
 	} = $props();
 
 	let openState = $state(open);
@@ -40,12 +46,13 @@
 			onOpenChange(value);
 
 			// This sets the cookie to keep the sidebar state.
-			document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+			if (persist)
+				document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 		},
 	});
 </script>
 
-<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+<svelte:window onkeydown={persist ? sidebar.handleShortcutKeydown : undefined} />
 
 <Tooltip.Provider delayDuration={0}>
 	<!-- An h-svh frame that never scrolls: the app puts its page in a

package/src/shadcn/sidebar/sidebar-provider.svelte.d.ts

@@ -3,6 +3,11 @@ import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * False for a sidebar that isn't the app's shell, such as a docs demo: it then
+     * writes no state cookie and takes no Cmd+B, so it can't fold the real one.
+     */
+    persist?: boolean;
 };
 declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
 type $$Component = ReturnType<typeof $$Component>;