diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 258fd1e4..d689be6a 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2924,11 +2924,12 @@ None. | Event name | Type | Detail | | :--------- | :-------- | :----- | +| change | forwarded | -- | +| keydown | forwarded | -- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| keydown | forwarded | -- | ## `SelectableTileGroup` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 654fbd36..d47f431a 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -8609,11 +8609,12 @@ ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [ + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "click", "element": "label" }, { "type": "forwarded", "name": "mouseover", "element": "label" }, { "type": "forwarded", "name": "mouseenter", "element": "label" }, - { "type": "forwarded", "name": "mouseleave", "element": "label" }, - { "type": "forwarded", "name": "keydown", "element": "label" } + { "type": "forwarded", "name": "mouseleave", "element": "label" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "label" } diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte index 4b0ba3ad..8e496520 100644 --- a/src/Tile/SelectableTile.svelte +++ b/src/Tile/SelectableTile.svelte @@ -53,6 +53,15 @@ value="{value}" name="{name}" title="{title}" + on:change + on:change="{() => update({ value, selected: !selected })}" + on:keydown + on:keydown="{(e) => { + if (e.key === ' ' || e.key === 'Enter') { + e.preventDefault(); + update({ value, selected: !selected }); + } + }}" />