refactor(menubar): concentric trigger radius via [data-shape-nest] (A2)

The in-bar trigger hand-rolled its concentric radius
(`calc(--_menubar-radius − --_menubar-padding)`). Consume the shared shape-engine
rule instead: the bar exposes its radius + padding as `--shape-outer-radius` +
`--shape-nest-gap`, the trigger stamps `data-shape-nest`, and the global
`[data-shape-nest]` rule computes the concentric radius once.

No-op verified in-browser: trigger = 2px at md (same as before); identical across
sizes via the var cascade. First of the A2 concentric migration (§13 — stop
hand-rolling `calc(--radius − pad)` per component).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 3ae9ff339a
commit 28b0c10202

@ -12,6 +12,9 @@
let { children, ...rest }: MenubarTriggerProps = $props(); let { children, ...rest }: MenubarTriggerProps = $props();
</script> </script>
<Menubar.Trigger {...rest}> <!-- `data-shape-nest`: the in-bar trigger's radius is concentric with the bar —
the shared shape-engine rule computes it from the bar's --shape-outer-radius
(its radius) minus --shape-nest-gap (its padding). No hand-rolled calc. -->
<Menubar.Trigger data-shape-nest {...rest}>
{@render children?.()} {@render children?.()}
</Menubar.Trigger> </Menubar.Trigger>

@ -29,6 +29,11 @@
--_menubar-radius: var(--radius-md); --_menubar-radius: var(--radius-md);
--_menubar-trigger-px: var(--space-3); --_menubar-trigger-px: var(--space-3);
--_menubar-font-size: var(--font-size-sm); --_menubar-font-size: var(--font-size-sm);
/* Concentric nesting (Arq. 6 / shape engine): the in-bar trigger consumes the
shared `[data-shape-nest]` rule instead of hand-rolling its own calc — the bar
exposes its radius + padding as the nest's outer-radius + gap. */
--shape-outer-radius: var(--_menubar-radius);
--shape-nest-gap: var(--_menubar-padding);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -66,7 +71,8 @@
min-block-size: calc(var(--_menubar-height) - var(--_menubar-padding) * 2 - 2px); min-block-size: calc(var(--_menubar-height) - var(--_menubar-padding) * 2 - 2px);
padding-inline: var(--_menubar-trigger-px); padding-inline: var(--_menubar-trigger-px);
border: none; border: none;
border-radius: calc(var(--_menubar-radius) - var(--_menubar-padding)); /* Radius from the shared `[data-shape-nest]` rule — concentric with the bar
(--shape-outer-radius − --shape-nest-gap, set on [data-menubar] above). */
background: transparent; background: transparent;
color: var(--color-content-primary); color: var(--color-content-primary);
font-family: var(--font-ui); font-family: var(--font-ui);

Loading…
Cancel
Save

Powered by TurnKey Linux.