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;
/**