@insymetri/styleguide 0.1.81 → 0.1.83

package/dist/IIMenu/IIMenu.svelte

@@ -283,7 +283,15 @@
 		return -1
 	}
 
-	const defaultTriggerClass = '[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none'
+	// Named-utility button reset. Avoids `[all:unset]`, which in TW v4 sorts after
+	// named utilities and so wins the cascade over any layout classes a consumer
+	// passes (clobbering their `display`/padding). These named resets participate
+	// in the cascade normally and are overridable via `cn`/tailwind-merge.
+	const buttonReset = 'appearance-none bg-transparent border-0 p-0 m-0 text-inherit [font:inherit] outline-none cursor-default'
+	// Children triggers own their content layout; default to an inline-flex row so a
+	// value + caret sit on one line even when the consumer passes no display class.
+	const childrenTriggerClass = `${buttonReset} inline-flex items-center text-left`
+	const defaultTriggerClass = `${buttonReset} inline-flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none`
 </script>
 
 {#snippet itemContent(item: MenuItem)}
@@ -427,7 +435,7 @@
 		aria-haspopup="menu"
 		aria-expanded={open}
 		data-state={open ? 'open' : 'closed'}
-		class={cn(children ? '[all:unset] cursor-default' : defaultTriggerClass, triggerClass, className)}
+		class={cn(children ? childrenTriggerClass : defaultTriggerClass, triggerClass, className)}
 		onclick={toggle}
 		onkeydown={handleTriggerKeydown}
 	>

package/dist/IIPopover/IIPopover.svelte

@@ -6,7 +6,15 @@
 	type Props = {
 		open?: boolean
 		onOpenChange?: (open: boolean) => void
-		trigger: Snippet
+		/** Trigger content wrapped in the popover's own button. */
+		trigger?: Snippet
+		/**
+		 * Make your own element THE trigger instead of wrapping it in a button.
+		 * Spread `props` onto a single focusable element — it carries the ref,
+		 * click/keydown, and popover aria, so there's one tab stop and the element's
+		 * own focus styling applies. Takes precedence over `trigger`.
+		 */
+		triggerChild?: Snippet<[{props: Record<string, unknown>}]>
 		content: Snippet
 		side?: 'top' | 'right' | 'bottom' | 'left'
 		align?: 'start' | 'center' | 'end'
@@ -21,6 +29,7 @@
 		open = $bindable(false),
 		onOpenChange,
 		trigger,
+		triggerChild,
 		content,
 		side = 'bottom',
 		align = 'start',
@@ -36,9 +45,17 @@
 </script>
 
 <Popover.Root bind:open {onOpenChange}>
-	<Popover.Trigger class={cn('[all:unset] cursor-default', triggerClass)}>
-		{@render trigger()}
-	</Popover.Trigger>
+	{#if triggerChild}
+		<Popover.Trigger>
+			{#snippet child({props})}
+				{@render triggerChild({props})}
+			{/snippet}
+		</Popover.Trigger>
+	{:else}
+		<Popover.Trigger class={cn('[all:unset] cursor-default', triggerClass)}>
+			{@render trigger?.()}
+		</Popover.Trigger>
+	{/if}
 	<Popover.Portal>
 		<Popover.Content
 			{side}

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

@@ -2,7 +2,17 @@ import type { Snippet } from 'svelte';
 type Props = {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    trigger: Snippet;
+    /** Trigger content wrapped in the popover's own button. */
+    trigger?: Snippet;
+    /**
+     * Make your own element THE trigger instead of wrapping it in a button.
+     * Spread `props` onto a single focusable element — it carries the ref,
+     * click/keydown, and popover aria, so there's one tab stop and the element's
+     * own focus styling applies. Takes precedence over `trigger`.
+     */
+    triggerChild?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
     content: Snippet;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';

package/dist/IIPopover/IIPopoverStories.svelte

@@ -105,4 +105,25 @@
 			{/snippet}
 		</IIPopover>
 	</section>
+
+	<!-- Custom trigger (single tab stop) -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Custom Trigger (single tab stop)</h2>
+		<p class="text-small text-secondary mb-12">
+			Use <code>triggerChild</code> and spread <code>props</code> onto your own element so it IS the
+			trigger — one tab stop, its own focus ring, keyboard opens it. Unlike <code>trigger</code>
+			(wrapped in the popover's button), there's no extra focusable wrapper.
+		</p>
+		<IIPopover>
+			{#snippet triggerChild({props})}
+				<IIButton {...props} variant="secondary" size="sm">Open Popover</IIButton>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col gap-8 w-200 p-12">
+					<p class="text-small-emphasis text-body">Single-trigger popover</p>
+					<p class="text-small text-secondary">The button above is the only tab stop.</p>
+				</div>
+			{/snippet}
+		</IIPopover>
+	</section>
 </div>

package/dist/IIPopover/IIPopoverTriggerProof.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import IIPopover from './IIPopover.svelte'
+	import {IIButton} from '../IIButton'
+
+	// Fixture for the play test: `triggerChild` spreads `props` onto the IIButton
+	// so it IS the trigger (one tab stop, its own focus ring, keyboard opens).
+</script>
+
+<IIPopover>
+	{#snippet triggerChild({props})}
+		<IIButton {...props} variant="secondary">Open</IIButton>
+	{/snippet}
+	{#snippet content()}
+		<div class="p-12 w-200">
+			<p class="text-small text-secondary">Inside the popover.</p>
+		</div>
+	{/snippet}
+</IIPopover>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IIPopoverTriggerProof: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IIPopoverTriggerProof = InstanceType<typeof IIPopoverTriggerProof>;
+export default IIPopoverTriggerProof;

package/package.json

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