[List] Dismissed `closable` List Items leave behind extra space

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When dismissing a list Item with closable - extra space is left behind. It's pretty minor in a vacuum, but dismissing multiple in a row becomes obvious:

Screen.Recording.2024-03-26.at.2.06.32.PM.mov

Expected Behavior

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/LYvjpgb?editors=1000

Reproduction Steps

1. Open Codepen
2. Close many List Items
3. Notice extra space

Reproduction Version

2.6.0

Relevant Info

No response

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

[driskull]

Looks like its this selector in the calcite-list

::slotted(calcite-list-item)

its applying a 1px margin to emulate a border.

calcite-design-system/packages/calcite-components/src/components/list/list.scss

Lines 31 to 34 in 2bb1ee2

	::slotted(calcite-list-item) {
	@apply shadow-border-top;
	margin-block-start: 1px;
	}

I think we would have to only apply this css if the list-item is not closed

Looks like we need to set a style for closed list-item to display:none;