@insymetri/styleguide 0.1.77 → 0.1.79

package/dist/IIDateInput/IIDateInput.svelte

@@ -117,25 +117,27 @@
 				</DatePicker.Trigger>
 			{/snippet}
 		</DatePicker.Input>
-		<DatePicker.Content forceMount sideOffset={8}>
-			{#snippet child({props, wrapperProps, open})}
-				{#if open}
-					<div {...wrapperProps}>
-						<div
-							{...props}
-							class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280"
-							transition:fly={{y: -4, duration: 150}}
-						>
-							<DatePicker.Calendar>
-								{#snippet children({months, weekdays})}
-									<IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
-								{/snippet}
-							</DatePicker.Calendar>
+		<DatePicker.Portal>
+			<DatePicker.Content forceMount sideOffset={8}>
+				{#snippet child({props, wrapperProps, open})}
+					{#if open}
+						<div {...wrapperProps}>
+							<div
+								{...props}
+								class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-16 min-w-280"
+								transition:fly={{y: -4, duration: 150}}
+							>
+								<DatePicker.Calendar>
+									{#snippet children({months, weekdays})}
+										<IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
+									{/snippet}
+								</DatePicker.Calendar>
+							</div>
 						</div>
-					</div>
-				{/if}
-			{/snippet}
-		</DatePicker.Content>
+					{/if}
+				{/snippet}
+			</DatePicker.Content>
+		</DatePicker.Portal>
 	</DatePicker.Root>
 	{#if showError && errorMessage}
 		<span class="text-tiny text-error mt-4" data-field-error>{errorMessage}</span>

package/dist/IIDateInput/IIDateInputClippingStories.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import IIDateInput from './IIDateInput.svelte'
+	import IIButton from '../IIButton/IIButton.svelte'
+	import type {DateValue} from '@internationalized/date'
+
+	let value = $state<DateValue>()
+</script>
+
+<!--
+	Reproduces the apply-flow layout that previously broke the calendar popup:
+	a height-constrained `overflow-y-auto` scroll container (which also clips
+	overflow-x on the right) with the Continue button as a *later sibling* of the
+	date input. Before the DatePicker.Portal fix the calendar (min-w-280) was
+	clipped on the right/bottom by this container and painted *behind* the
+	Continue button. With the portal it escapes the container and layers above.
+
+	To verify: open the calendar and confirm it is fully visible and sits above
+	the Continue button.
+-->
+<div
+	data-testid="scroll-container"
+	style="display: flex; flex-direction: column; gap: 1rem; width: 300px; height: 200px; overflow-y: auto; border: 1px dashed var(--color-border-primary, #cbd5e1); border-radius: 10px; padding: 1rem;"
+>
+	<IIDateInput bind:value label="Date of Birth" class="w-full" />
+	<IIButton class="w-full">Continue</IIButton>
+</div>

package/dist/IIDateInput/IIDateInputClippingStories.svelte.d.ts

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

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -111,6 +111,7 @@
 		placement: 'bottom-start',
 		offset: 2,
 		matchWidth: matchTriggerWidth,
+		constrainHeight: true,
 	})
 
 	function handleSelect(item: MenuItem) {
@@ -272,7 +273,7 @@
 				bind:this={floatingEl}
 				role="listbox"
 				data-menu-content
-				class="min-w-100 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 pointer-events-auto outline-none"
+				class="flex flex-col min-w-100 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 pointer-events-auto outline-none overflow-hidden"
 				transition:fly={{y: -4, duration: 150}}
 			>
 				{#if searchable}
@@ -283,7 +284,7 @@
 						onkeydown={(e) => search.handleKeydown(e, '[data-menu-content]')}
 					/>
 				{/if}
-				<div class="max-h-300 overflow-y-auto">
+				<div class="dd-scroll min-h-0 overflow-y-auto -mr-2">
 					{#each (searchable ? search.filteredItems as MenuItem[] : items) as item, listIndex (item.value)}
 						{@const index = searchable ? search.getItemIndex(item) : listIndex}
 						{@const isHighlighted = searchable
@@ -345,3 +346,26 @@
 		<span class="text-tiny text-error mt-4" data-field-error>{errorMessage}</span>
 	{/if}
 </div>
+
+<style>
+	/* Opt back into ::-webkit-scrollbar styling so we can set a custom (narrow)
+	   thumb width: the global standard scrollbar-width/color (base.css) otherwise
+	   disables the WebKit pseudo-elements in Chromium. */
+	.dd-scroll {
+		scrollbar-width: auto;
+		scrollbar-color: auto;
+	}
+	.dd-scroll::-webkit-scrollbar {
+		width: 4px;
+	}
+	.dd-scroll::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	.dd-scroll::-webkit-scrollbar-thumb {
+		background-color: var(--ii-gray-300);
+		border-radius: 9999px;
+	}
+	.dd-scroll::-webkit-scrollbar-thumb:hover {
+		background-color: var(--ii-gray-400);
+	}
+</style>

package/dist/IIModal/IIModal.svelte

@@ -15,7 +15,12 @@
 		showCloseButton?: boolean
 		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
 		overlay?: 'dark' | 'light' | 'none'
-		/** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 90vh. */
+		/** Vertically center the modal instead of anchoring it 15% from the top. */
+		centered?: boolean
+		/** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 78vh
+		 *  (90vh when `centered`). Note: when anchored (not centered) the modal
+		 *  sits 15% from the top, so a value above ~83vh pushes the bottom edge
+		 *  off-screen. */
 		maxHeight?: string
 		/** Replace the body wrapper's padding/scroll defaults — e.g. for a full-height flex body. */
 		bodyClass?: string
@@ -33,6 +38,7 @@
 		showCloseButton = true,
 		size = 'md',
 		overlay = 'dark',
+		centered = false,
 		maxHeight,
 		bodyClass,
 		class: className,
@@ -61,7 +67,7 @@
 	<Dialog.Portal>
 		<Dialog.Overlay
 			class={cn(
-				'fixed inset-0 z-14 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none',
+				'fixed inset-0 z-14 data-[state=open]:animate-modal-overlay-in data-[state=closed]:animate-modal-overlay-out motion-reduce:animate-none',
 				overlay === 'dark' && 'bg-black/30',
 				overlay === 'light' && 'bg-black/10',
 				overlay === 'none' && 'pointer-events-none'
@@ -78,16 +84,22 @@
 				if (isInsidePortaledMenu(target)) e.preventDefault()
 			}}
 			class={cn(
-				// Centered vertically (top-1/2 + -translate-y-1/2) so a tall modal stays within the
-				// viewport: with max-h-[90vh] its edges land at ~5vh/95vh. The previous top-[30%]
-				// anchor pushed the top edge off-screen once a modal grew past ~60vh tall.
-				'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface border border-strong rounded-12 w-[calc(100%-20px)] max-h-[90vh] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
+				// Centering is deliberately kept OFF `transform`: horizontal uses left-0/right-0 +
+				// mx-auto, and vertical centering (when `centered`) uses the standalone `translate`
+				// property — both compose with the open/close slide animation, which owns `transform`
+				// (translateY). A transform-based center would be clobbered by the animation and
+				// shift the modal for the animation's duration.
+				'fixed left-0 right-0 mx-auto bg-surface border border-strong rounded-12 w-[calc(100%-20px)] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
+				// Vertical: anchored 15% from the top (default) vs. centered. When anchored, height
+				// is capped so a tall modal still clears the bottom (15% + 78vh leaves ~7vh below);
+				// centered can safely use the full 90vh since -50% keeps it within the viewport.
+				centered ? 'top-1/2 [translate:0_-50%] max-h-[90vh]' : 'top-[15%] max-h-[78vh]',
 				overlay === 'none' ? 'shadow-floating' : 'shadow-modal',
 				size === 'sm' && 'max-w-400',
 				size === 'md' && 'max-w-500',
 				size === 'lg' && 'max-w-700',
 				size === 'xl' && 'max-w-[1100px]',
-				size === 'full' && 'max-w-[95vw] h-[90vh]',
+				size === 'full' && 'max-w-[95vw] h-[78vh]',
 				className
 			)}
 			style={maxHeight ? `max-height: ${maxHeight}` : undefined}

package/dist/IIModal/IIModal.svelte.d.ts

@@ -10,7 +10,12 @@ type Props = {
     showCloseButton?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     overlay?: 'dark' | 'light' | 'none';
-    /** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 90vh. */
+    /** Vertically center the modal instead of anchoring it 15% from the top. */
+    centered?: boolean;
+    /** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 78vh
+     *  (90vh when `centered`). Note: when anchored (not centered) the modal
+     *  sits 15% from the top, so a value above ~83vh pushes the bottom edge
+     *  off-screen. */
     maxHeight?: string;
     /** Replace the body wrapper's padding/scroll defaults — e.g. for a full-height flex body. */
     bodyClass?: string;

package/dist/IIModal/IIModalFocusStories.svelte

@@ -19,14 +19,15 @@
 
 <IIButton onclick={() => (open = true)}>Open modal</IIButton>
 
-{#if open}
-	<IIModal bind:open title="Add a note" onOpenChange={v => (open = v)}>
-		<IITextarea
-			bind:ref
-			bind:value
-			label="Note"
-			placeholder="The focus ring should be fully visible on the left, right, and bottom."
-			rows={4}
-		/>
-	</IIModal>
-{/if}
+<!-- Keep IIModal mounted unconditionally (no {#if open}) so bits-ui's Dialog can
+     play its exit animation on close — wrapping it in {#if} unmounts the whole
+     dialog instantly and skips the modal-out/fade-out transitions. -->
+<IIModal bind:open title="Add a note" onOpenChange={v => (open = v)}>
+	<IITextarea
+		bind:ref
+		bind:value
+		label="Note"
+		placeholder="The focus ring should be fully visible on the left, right, and bottom."
+		rows={4}
+	/>
+</IIModal>

package/dist/style/tailwind/animations.d.ts

@@ -25,13 +25,11 @@ export declare const keyframes: {
             transform: string;
         };
     };
-    modalIn: {
+    modalSlideIn: {
         from: {
-            opacity: string;
             transform: string;
         };
         to: {
-            opacity: string;
             transform: string;
         };
     };
@@ -161,6 +159,8 @@ export declare const animation: {
     skeleton: string;
     'modal-in': string;
     'modal-out': string;
+    'modal-overlay-in': string;
+    'modal-overlay-out': string;
     'fade-out': string;
     'login-fade-in-up': string;
     'login-pulse': string;

package/dist/style/tailwind/animations.js

@@ -12,9 +12,13 @@ export const keyframes = {
         '0%': { transform: 'translate(-50%, -50%) rotate(0deg) translateX(24px)' },
         '100%': { transform: 'translate(-50%, -50%) rotate(360deg) translateX(24px)' },
     },
-    modalIn: {
-        from: { opacity: '0', transform: 'scale(0.96)' },
-        to: { opacity: '1', transform: 'scale(1)' },
+    modalSlideIn: {
+        // Transform-only slide into place. Opacity is handled by a separate, faster
+        // `fadeIn` animation (see modal-in) so the fade can match the overlay while
+        // the slide runs on its own long duration. (IIModal centers via mx-auto, not
+        // transform, so translateY here is free of the horizontal centering.)
+        from: { transform: 'translateY(-10px)' },
+        to: { transform: 'translateY(0)' },
     },
     spin: {
         to: { transform: 'rotate(360deg)' },
@@ -60,8 +64,9 @@ export const keyframes = {
         to: { opacity: '1', transform: 'translateY(0)' },
     },
     modalOut: {
-        from: { opacity: '1', transform: 'scale(1)' },
-        to: { opacity: '0', transform: 'scale(0.96)' },
+        // Fade out while sliding up.
+        from: { opacity: '1', transform: 'translateY(0)' },
+        to: { opacity: '0', transform: 'translateY(-6px)' },
     },
     fadeOut: {
         from: { opacity: '1' },
@@ -76,8 +81,14 @@ export const animation = {
     shake: 'shake 0.4s ease-out',
     shimmer: 'shimmer 1.5s infinite',
     skeleton: 'skeleton-loading 1.2s ease-in-out infinite',
-    'modal-in': 'modalIn 200ms ease-out',
-    'modal-out': 'modalOut 150ms ease-in',
+    // Two decoupled animations: the opacity fade matches the overlay exactly
+    // (fadeIn 130ms ease-out), while the slide glides in slowly over 2500ms.
+    'modal-in': 'fadeIn 130ms ease-out, modalSlideIn 2500ms cubic-bezier(0.1, 1, 0.1, 1)',
+    'modal-out': 'modalOut 90ms ease-in',
+    // Modal-specific overlay fades — snappy, to match the modal's timing rather
+    // than the slower shared fade-in/fade-out used by menus, tooltips, etc.
+    'modal-overlay-in': 'fadeIn 130ms ease-out',
+    'modal-overlay-out': 'fadeOut 90ms ease-in',
     'fade-out': 'fadeOut 150ms ease-in',
     'login-fade-in-up': 'loginFadeInUp 0.6s ease-out',
     'login-pulse': 'loginPulse 2s ease-in-out infinite',

package/dist/style/tailwind/preset.d.ts

@@ -442,13 +442,11 @@ declare const _default: {
                         transform: string;
                     };
                 };
-                modalIn: {
+                modalSlideIn: {
                     from: {
-                        opacity: string;
                         transform: string;
                     };
                     to: {
-                        opacity: string;
                         transform: string;
                     };
                 };
@@ -578,6 +576,8 @@ declare const _default: {
                 skeleton: string;
                 'modal-in': string;
                 'modal-out': string;
+                'modal-overlay-in': string;
+                'modal-overlay-out': string;
                 'fade-out': string;
                 'login-fade-in-up': string;
                 'login-pulse': string;

package/dist/utils/menu/MenuSearchInput.svelte

@@ -14,7 +14,7 @@
 	}: Props = $props()
 </script>
 
-<div class="-mx-4 -mt-4 px-14 mb-4 border-b-[0.5px] border-dropdown-border">
+<div class="shrink-0 -mx-4 -mt-4 px-14 mb-4 border-b-[0.5px] border-dropdown-border">
 	<input
 		bind:this={inputEl}
 		bind:value={searchQuery}

package/dist/utils/menu/use-floating.svelte.d.ts

@@ -9,5 +9,9 @@ export type UseFloatingOptions = {
         padding?: number;
     };
     matchWidth?: boolean;
+    /** Constrain the floating element's height to the space available in the
+     *  viewport (via the size middleware). Lets the panel grow to fit its
+     *  content and only cap/scroll when it would run off-screen. */
+    constrainHeight?: boolean;
 };
 export declare function useFloating(opts: UseFloatingOptions): void;

package/dist/utils/menu/use-floating.svelte.js

@@ -13,12 +13,18 @@ export function useFloating(opts) {
             const padding = typeof opts.shift === 'object' ? opts.shift.padding : 8;
             middleware.push(shiftMiddleware({ padding }));
         }
-        if (opts.matchWidth) {
+        if (opts.matchWidth || opts.constrainHeight) {
             middleware.push(sizeMiddleware({
-                apply({ rects }) {
-                    Object.assign(floating.style, {
-                        minWidth: `${rects.reference.width}px`,
-                    });
+                padding: 8,
+                apply({ rects, availableHeight }) {
+                    const styles = {};
+                    if (opts.matchWidth) {
+                        styles.minWidth = `${rects.reference.width}px`;
+                    }
+                    if (opts.constrainHeight) {
+                        styles.maxHeight = `${availableHeight}px`;
+                    }
+                    Object.assign(floating.style, styles);
                 },
             }));
         }

package/package.json

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