diff --git a/src/uix/eidos/components/float-panel/float-panel-close.svelte b/src/uix/eidos/components/float-panel/float-panel-close.svelte index 2161b6ae1..9e29000f2 100644 --- a/src/uix/eidos/components/float-panel/float-panel-close.svelte +++ b/src/uix/eidos/components/float-panel/float-panel-close.svelte @@ -1,10 +1,40 @@ - {@render children?.()} + {#snippet child({ props })} + {#if outerChild} + {@render outerChild({ props })} + {:else} + + {#if children}{@render children()}{:else}{/if} + + {/if} + {/snippet} diff --git a/src/uix/eidos/components/float-panel/float-panel.css b/src/uix/eidos/components/float-panel/float-panel.css index 6f9d3d16f..018c26ed0 100644 --- a/src/uix/eidos/components/float-panel/float-panel.css +++ b/src/uix/eidos/components/float-panel/float-panel.css @@ -169,10 +169,10 @@ flex: 0 0 auto; } -/* Close + Action + StageTrigger share ONE square icon-button chrome, so a custom - action (a delete icon, say) and the stage buttons sit flush next to Close with - identical sizing/hover/focus. */ -[data-float-panel-close], +/* Action + StageTrigger share ONE square icon-button chrome, so a custom action + (a delete icon, say) and the stage buttons sit flush next to Close with + identical sizing/hover/focus. (Close itself composes the canonical + , so its chrome comes from button.css.) */ [data-float-panel-action], [data-float-panel-stage-trigger] { display: inline-flex; @@ -189,13 +189,11 @@ line-height: 1; cursor: pointer; } -[data-float-panel-close]:hover, [data-float-panel-action]:hover, [data-float-panel-stage-trigger]:hover { background: var(--color-surface-muted); color: var(--color-content-primary); } -[data-float-panel-close]:focus-visible, [data-float-panel-action]:focus-visible, [data-float-panel-stage-trigger]:focus-visible { outline: none; diff --git a/src/uix/eidos/components/float-panel/types.ts b/src/uix/eidos/components/float-panel/types.ts index e68cb43a6..505f43099 100644 --- a/src/uix/eidos/components/float-panel/types.ts +++ b/src/uix/eidos/components/float-panel/types.ts @@ -12,8 +12,9 @@ import type { ResizeHandleProps, ResizeGripProps } from '$soma/components/float-panel'; -import type { ColorRole, ControlVariant } from '$uix/eidos/lib/types'; +import type { ColorRole, ControlVariant, ResponsiveProp } from '$uix/eidos/lib/types'; import type { MotionPresetName } from '$uix/eidos/lib/motion/registry'; +import type { ButtonVariant, ButtonSize, ButtonProps } from '$uix/eidos/components/button'; /** Surface treatment of the panel — canonical control variants (no invented values). */ export type FloatPanelVariant = ControlVariant; @@ -49,7 +50,14 @@ export type FloatPanelHeaderProps = HeaderProps & { closable?: boolean; }; export type FloatPanelTitleProps = TitleProps; -export type FloatPanelCloseProps = CloseProps; +export type FloatPanelCloseProps = CloseProps & { + /** Button visual variant — defers to Button's canonical default. */ + variant?: ButtonVariant; + /** Button size of the close control. @default 'sm' */ + size?: ResponsiveProp; + /** Hierarchical color — defers to Button's canonical default. */ + color?: ButtonProps['color']; +}; /** Header button group (right-aligned cluster holding Close / Action / custom buttons). */ export type FloatPanelControlsProps = ControlsProps; /**