@insymetri/styleguide 0.1.91 → 0.1.93

package/dist/IIPopover/IIPopover.svelte

@@ -24,6 +24,27 @@
 		triggerClass?: string
 		/** Strip the default surface (background, border, radius, shadow) — for content that renders its own. */
 		unstyled?: boolean
+		/**
+		 * Fired when a pointer interaction starts outside the popover. Call
+		 * `event.preventDefault()` to keep the popover open. Interactions inside one of
+		 * the styleguide's own portaled menus (IIDropdownInput, IIMenu…) are already
+		 * kept — see `keepOpenForNestedMenus`.
+		 */
+		onInteractOutside?: (event: PointerEvent) => void
+		/**
+		 * Position the content against this element (or selector) instead of the
+		 * trigger — e.g. a settings panel that should sit beside the whole card its gear
+		 * button lives in. Clicks on the anchor don't count as outside interactions.
+		 */
+		customAnchor?: HTMLElement | string | null
+		/**
+		 * Whether the popover dismisses itself. Default `true`: a click outside or Escape
+		 * closes it, as a menu should. Set `false` for a panel that owns the screen for a
+		 * while and holds work in progress — a live call, a form mid-edit — where a stray
+		 * click elsewhere in the app should not throw it away. It can then be closed only
+		 * by its own trigger or by whoever owns `open`.
+		 */
+		dismissable?: boolean
 	}
 
 	let {
@@ -38,11 +59,36 @@
 		class: className,
 		triggerClass,
 		unstyled = false,
+		onInteractOutside,
+		customAnchor = null,
+		dismissable = true,
 	}: Props = $props()
 
 	const surfaceClasses = unstyled
 		? ''
 		: 'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown'
+
+	// The menu components (IIDropdownInput, IIMenu, …) portal their list to <body>,
+	// so to bits-ui a click on one of their options is a click OUTSIDE this popover:
+	// it dismissed the popover on pointerdown, unmounting the content — and the
+	// option along with it — before the click could land. A dropdown inside a popover
+	// therefore never changed its value. Every portaled menu marks its list with
+	// `data-menu-content`; an interaction starting there is ours, so keep the popover
+	// open and let the option's own click do its job.
+	function keepOpenForNestedMenus(event: PointerEvent) {
+		const target = event.target
+		if (!dismissable || (target instanceof Element && target.closest('[data-menu-content]'))) {
+			event.preventDefault()
+		}
+		onInteractOutside?.(event)
+	}
+
+	// bits-ui closes on Escape unless the handler defaults it away. A non-dismissable
+	// panel has to opt out of that too, or Escape would still throw away the very work
+	// the outside-click guard above is protecting.
+	function keepOpenOnEscape(event: KeyboardEvent) {
+		if (!dismissable) event.preventDefault()
+	}
 </script>
 
 <Popover.Root bind:open {onOpenChange}>
@@ -62,6 +108,9 @@
 			{side}
 			{align}
 			{sideOffset}
+			{customAnchor}
+			onInteractOutside={keepOpenForNestedMenus}
+			onEscapeKeydown={keepOpenOnEscape}
 			class={cn(
 				surfaceClasses,
 				'z-16 animate-slide-in motion-reduce:animate-none',

package/dist/IIPopover/IIPopover.svelte.d.ts

@@ -21,6 +21,27 @@ type Props = {
     triggerClass?: string;
     /** Strip the default surface (background, border, radius, shadow) — for content that renders its own. */
     unstyled?: boolean;
+    /**
+     * Fired when a pointer interaction starts outside the popover. Call
+     * `event.preventDefault()` to keep the popover open. Interactions inside one of
+     * the styleguide's own portaled menus (IIDropdownInput, IIMenu…) are already
+     * kept — see `keepOpenForNestedMenus`.
+     */
+    onInteractOutside?: (event: PointerEvent) => void;
+    /**
+     * Position the content against this element (or selector) instead of the
+     * trigger — e.g. a settings panel that should sit beside the whole card its gear
+     * button lives in. Clicks on the anchor don't count as outside interactions.
+     */
+    customAnchor?: HTMLElement | string | null;
+    /**
+     * Whether the popover dismisses itself. Default `true`: a click outside or Escape
+     * closes it, as a menu should. Set `false` for a panel that owns the screen for a
+     * while and holds work in progress — a live call, a form mid-edit — where a stray
+     * click elsewhere in the app should not throw it away. It can then be closed only
+     * by its own trigger or by whoever owns `open`.
+     */
+    dismissable?: boolean;
 };
 declare const IIPopover: import("svelte").Component<Props, {}, "open">;
 type IIPopover = ReturnType<typeof IIPopover>;

package/dist/IIPopover/IIPopoverNestedMenuProof.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import IIPopover from './IIPopover.svelte'
+	import {IIButton} from '../IIButton'
+	import {IIDropdownInput} from '../IIDropdownInput'
+
+	// Fixture for the play test: a menu-style input inside a popover. Its option
+	// list portals to <body>, so choosing an option used to read as an outside
+	// click and dismiss the popover before the choice registered.
+	let open = $state(false)
+	let device = $state('')
+</script>
+
+<IIPopover bind:open>
+	{#snippet trigger()}
+		<IIButton variant="secondary" size="sm">Audio settings</IIButton>
+	{/snippet}
+	{#snippet content()}
+		<div class="p-12 w-240 flex flex-col gap-8">
+			<p class="text-small text-secondary">Speaker</p>
+			<IIDropdownInput
+				items={[
+					{label: 'System Default', value: ''},
+					{label: 'Headset', value: 'headset'},
+					{label: 'Desk speakers', value: 'desk'},
+				]}
+				bind:value={device}
+				class="w-full"
+			/>
+			<p class="text-small text-body" data-testid="chosen">Chosen: {device || 'default'}</p>
+		</div>
+	{/snippet}
+</IIPopover>

package/dist/IIPopover/IIPopoverNestedMenuProof.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const IIPopoverNestedMenuProof: import("svelte").Component<Record<string, never>, {}, "">;
+type IIPopoverNestedMenuProof = ReturnType<typeof IIPopoverNestedMenuProof>;
+export default IIPopoverNestedMenuProof;

package/dist/IIPopover/IIPopoverNonDismissableProof.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import IIPopover from './IIPopover.svelte'
+	import {IIButton} from '../IIButton'
+
+	// Fixture for the play test: a panel that must survive a click elsewhere in the app
+	// and an Escape press, and close only from its own trigger.
+	let open = $state(false)
+</script>
+
+<div class="flex flex-col gap-16">
+	<IIPopover bind:open dismissable={false}>
+		{#snippet trigger()}
+			<IIButton variant="secondary" size="sm">{open ? 'Collapse panel' : 'Open panel'}</IIButton>
+		{/snippet}
+		{#snippet content()}
+			<div class="p-12 w-200">
+				<p class="text-small text-body">Work in progress.</p>
+			</div>
+		{/snippet}
+	</IIPopover>
+	<button type="button" data-testid="elsewhere" class="text-small text-secondary">Somewhere else</button>
+</div>

package/dist/IIPopover/IIPopoverNonDismissableProof.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const IIPopoverNonDismissableProof: import("svelte").Component<Record<string, never>, {}, "">;
+type IIPopoverNonDismissableProof = ReturnType<typeof IIPopoverNonDismissableProof>;
+export default IIPopoverNonDismissableProof;

package/dist/IISegmentedControl/IISegmentedControl.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import {untrack} from 'svelte'
 	import {cn} from '../utils/cn'
 	import {useDensity} from '../density'
 
@@ -52,6 +53,41 @@
 
 	const activeIndex = $derived(items.findIndex(item => item.value === value))
 
+	/* The thumb stays mounted even when nothing is selected so it can animate in and
+	   out. `thumbIndex` remembers where it last was, so clearing the value fades it
+	   out under the segment that was selected instead of yanking it back to the first. */
+	let thumbIndex = $state(untrack(() => Math.max(activeIndex, 0)))
+	let thumbVisible = $state(untrack(() => activeIndex >= 0))
+	let sliding = $state(false)
+	/* Seeded with the mount-time index on purpose: the effect below compares against
+	   it and bails on its first run, so a control that renders already-selected shows
+	   its thumb in place rather than animating it in on load. */
+	let prevIndex = untrack(() => activeIndex)
+
+	$effect(() => {
+		const next = activeIndex
+		if (next === prevIndex) return
+		const appearing = prevIndex < 0
+		prevIndex = next
+
+		if (next < 0) {
+			sliding = false
+			thumbVisible = false
+			return
+		}
+
+		/* Appearing from nothing must not transition `left`: a thumb that slides in
+		   from segment 0 reads as "it was always there, just hidden". Dropping the
+		   slide lets it grow into place under the segment that was actually picked,
+		   and the scale/opacity transition carries the motion instead. */
+		sliding = !appearing
+		thumbIndex = next
+		thumbVisible = true
+	})
+
+	// Guards against `items` shrinking underneath a remembered index.
+	const thumbPosition = $derived(Math.min(thumbIndex, Math.max(items.length - 1, 0)))
+
 	function select(v: string) {
 		value = v
 		onValueChange?.(v)
@@ -113,17 +149,19 @@
 	style="padding: {thumbInset[density.value]}px; grid-template-columns: repeat({items.length}, 1fr);"
 >
 	<!-- Sliding thumb -->
-	{#if activeIndex >= 0}
+	{#if items.length > 0}
 		<div
-			class="absolute"
+			class="ii-seg-thumb absolute"
+			class:is-visible={thumbVisible}
+			class:is-sliding={sliding}
+			aria-hidden="true"
 			style:border-radius="calc(var(--ii-radius-control) - {thumbInset[density.value]}px)"
 			style="
 				top: {thumbInset[density.value]}px;
 				bottom: {thumbInset[density.value]}px;
-				left: calc({thumbInset[density.value]}px + {activeIndex} * (100% - {thumbInset[density.value] * 2}px) / {items.length});
+				left: calc({thumbInset[density.value]}px + {thumbPosition} * (100% - {thumbInset[density.value] * 2}px) / {items.length});
 				width: calc((100% - {thumbInset[density.value] * 2}px) / {items.length});
-				background: {getThumbColor(items[activeIndex])};
-				transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
+				background: {getThumbColor(items[thumbPosition])};
 			"
 		></div>
 	{/if}
@@ -147,3 +185,52 @@
 		</button>
 	{/each}
 </div>
+
+<style>
+	/* Resting state is hidden-and-small, so the thumb has somewhere to grow from.
+	   Also governs the exit: a transition uses the curve declared on the state it is
+	   travelling *to*, so this rule is what plays when the selection is cleared —
+	   short and ease-in, because leaving should not ask for attention. */
+	.ii-seg-thumb {
+		opacity: 0;
+		transform: scale(0.82);
+		pointer-events: none;
+		transition:
+			opacity 120ms ease-in,
+			transform 180ms ease-in;
+	}
+
+	/* The entrance. The back-out curve grows the thumb past its resting size — about
+	   1.02 at the peak — before settling, which is the gesture iOS and macOS
+	   segmented controls use to say "this materialised here" rather than "this
+	   blinked on". At these sizes the overshoot is barely a pixel; it reads as
+	   liveliness in the deceleration, not as a bounce. Opacity finishes well before
+	   the scale so the tail of the motion is pure settle, not fade. */
+	.ii-seg-thumb.is-visible {
+		opacity: 1;
+		transform: scale(1);
+		transition:
+			opacity 140ms ease-out,
+			transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+
+	/* `left` only animates once the thumb is already on screen and moving between
+	   segments — see the effect above. Must stay after `.is-visible`: equal
+	   specificity, so source order decides. */
+	.ii-seg-thumb.is-sliding {
+		transition:
+			opacity 140ms ease-out,
+			transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
+			background-color 200ms ease,
+			left 300ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ii-seg-thumb,
+		.ii-seg-thumb.is-visible,
+		.ii-seg-thumb.is-sliding {
+			transform: none;
+			transition: opacity 100ms linear;
+		}
+	}
+</style>

package/dist/IISegmentedControl/IISegmentedControlStories.svelte

@@ -10,6 +10,8 @@
 
 	let fullWidthMode = $state('allow')
 	let fullWidthThree = $state('monthly')
+
+	let emptyStart = $state('')
 </script>
 
 <div class="flex flex-col gap-32">
@@ -151,6 +153,31 @@
 		/>
 	</section>
 
+	<!-- Animating in from empty -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Animating in from empty</h2>
+		<p class="text-small text-secondary mb-12">
+			With no selection there is no thumb to slide, so picking a segment scales the thumb up
+			into place with a small overshoot instead of flashing it on. Clearing fades it back out
+			under the segment it was on. Moving between segments still slides.
+		</p>
+		<IISegmentedControl
+			items={[
+				{label: 'Monthly', value: 'monthly'},
+				{label: 'Quarterly', value: 'quarterly'},
+				{label: 'Annual', value: 'annual'},
+			]}
+			bind:value={emptyStart}
+		/>
+		<button
+			type="button"
+			class="mt-12 px-12 py-6 bg-button-primary text-button-primary-text rounded-control"
+			onclick={() => (emptyStart = '')}
+		>
+			Clear selection
+		</button>
+	</section>
+
 	<!-- Density-responsive -->
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Density Responsive</h2>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.91",
+	"version": "0.1.93",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {