diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--dark-mobile.png index 062d68706..835530082 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--light-desktop.png index f5c175a29..b2a59f3f7 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--light-desktop.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--light-mobile.png index 0173951fe..412d6fef0 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots.png index 124353393..7e4f7f156 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--groups-with-top-and-bottom-slots.png differ diff --git a/packages/webkit/src/components/navigation/dropdown/dropdown-group/dropdown-group.vue b/packages/webkit/src/components/navigation/dropdown/dropdown-group/dropdown-group.vue index c37eafeea..dfb437cda 100644 --- a/packages/webkit/src/components/navigation/dropdown/dropdown-group/dropdown-group.vue +++ b/packages/webkit/src/components/navigation/dropdown/dropdown-group/dropdown-group.vue @@ -49,7 +49,7 @@ :aria-labelledby="hasLabel ? labelId : undefined" :data-testid="testId" :data-first="groupIndex === 0 || null" - class="flex flex-col data-[first]:pt-0 [&:not([data-first])]:mt-[var(--spacing-xxs)] [&:not([data-first])]:border-t [&:not([data-first])]:border-[var(--border-default)] [&:not([data-first])]:pt-[var(--spacing-xxs)]" + class="flex flex-col [&:not([data-first])]:border-t [&:not([data-first])]:border-[var(--border-default)]" >
{ expect(command?.textContent?.trim()).toBe('⌘P') }) + it('clips horizontal overflow on the panel body so content respects the panel rounded borders', async () => { + const { getByTestId } = render(Host) + await fireEvent.click(getByTestId('navigation-dropdown__trigger')) + await waitForOpen(3) + + const body = document.body.querySelector( + '[data-testid="navigation-dropdown__body"]' + ) as HTMLElement + expect(body).not.toBeNull() + + const cls = body.className + expect(cls).toContain('overflow-x-hidden') + expect(cls).toContain('overflow-y-auto') + }) + + it('separates consecutive groups with a flush hairline (no vertical padding around the divider)', async () => { + render(Host, { props: { open: true, grouped: true } }) + await waitForOpen(5) + + const groups = Array.from(document.body.querySelectorAll('[role="group"]')) as HTMLElement[] + expect(groups).toHaveLength(2) + + const secondCls = groups[1].className + const firstCls = groups[0].className + + expect(secondCls).toContain('[&:not([data-first])]:border-t') + expect(secondCls).toContain('[&:not([data-first])]:border-[var(--border-default)]') + + expect(secondCls).not.toMatch(/(?:^|[\s:])mt-\[/) + expect(secondCls).not.toMatch(/(?:^|[\s:])pt-\[/) + expect(secondCls).not.toMatch(/\[&:not\(\[data-first\]\)\]:mt-/) + expect(secondCls).not.toMatch(/\[&:not\(\[data-first\]\)\]:pt-/) + + expect(firstCls).toBe(secondCls) + expect(groups[0].hasAttribute('data-first')).toBe(true) + }) + // ---- Accessibility: axe on the open menu overlay -------------------------- it('has no axe violations on the open menu panel with grouped options', async () => { render(Host, { props: { open: true, grouped: true } }) diff --git a/packages/webkit/src/components/navigation/dropdown/dropdown.vue b/packages/webkit/src/components/navigation/dropdown/dropdown.vue index 4130950c0..b9c72c515 100644 --- a/packages/webkit/src/components/navigation/dropdown/dropdown.vue +++ b/packages/webkit/src/components/navigation/dropdown/dropdown.vue @@ -362,7 +362,7 @@