feat(TypographyMenu): add bindable "open" prop to close popover from outside

This commit is contained in:
Ilia Mashkov
2026-04-17 16:30:41 +03:00
parent bb5c3667b4
commit 5eb9584797
2 changed files with 13 additions and 7 deletions

View File

@@ -1,7 +1,6 @@
<!--
Component: TypographyMenu
Floating controls bar for typography settings.
Warm surface, sharp corners, Settings icon header, dividers between units.
Mobile: popover with slider controls anchored to settings button.
Desktop: inline bar with combo controls.
-->
@@ -37,14 +36,17 @@ interface Props {
* @default false
*/
hidden?: boolean;
/**
* Bindable popover open state
* @default false
*/
open?: boolean;
}
const { class: className, hidden = false }: Props = $props();
let { class: className, hidden = false, open = $bindable(false) }: Props = $props();
const responsive = getContext<ResponsiveManager>('responsive');
let isOpen = $state(false);
/**
* Sets the common font size multiplier based on the current responsive state.
*/
@@ -70,7 +72,7 @@ $effect(() => {
{#if !hidden}
{#if responsive.isMobileOrTablet}
<Popover.Root bind:open={isOpen}>
<Popover.Root bind:open>
<Popover.Trigger>
{#snippet child({ props })}
<Button class={className} variant="primary" {...props}>
@@ -84,7 +86,7 @@ $effect(() => {
<Popover.Portal>
<Popover.Content
side="top"
align="start"
align="end"
sideOffset={8}
class={clsx(
'z-50 w-72',