[Bug]: docs: sp-grid toggle card usage in docs site is not working

[Rajdeepc]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Grid

Expected behavior

• Space bar should toggle the card's checkbox state
• Page should not scroll when space bar is pressed on focused cards
• Cards should maintain their toggle functionality as they do in other contexts (e.g., Storybook examples)

Actual behavior

• Space bar causes page scrolling
• Card checkbox does not toggle
• User cannot interact with cards using keyboard

Screenshots

No response

What browsers are you seeing the problem in?

Firefox, Chrome, Safari

How can we reproduce this issue?

1. Navigate to the Grid component documentation or Storybook
2. Create a grid with cards that have toggles="true"
3. Tab to focus on a card in the grid
4. Press the space bar
5. Expected: Card checkbox toggles between checked/unchecked
6. Actual: Page scrolls down instead of toggling the card

Sample code or abstract reproduction which illustrates the problem

<sp-grid id="grid-demo">
    <!-- Grid setup -->
</sp-grid>

<script>
const grid = document.querySelector('#grid-demo');
grid.focusableSelector = 'sp-card';

grid.renderItem = (item, index, selected) => {
    const card = document.createElement('sp-card');
    card.toggles = true; // Cards should be toggleable
    card.variant = 'quiet';
    card.heading = `Card Heading ${index}`;
    // ... other card setup
    return card;
};
</script>

Severity

SEV 4

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!