Support fieldset disabled

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`
 

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": "mouseleave", "element": "label" }
-        { "type": "forwarded", "name": "keydown", "element": "label" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "label" }

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 });
+    }
+  }}"
 />
 <label
   for="{id}"
@@ -63,17 +72,9 @@
   class:bx--tile--light="{light}"
   {...$$restProps}
   on:click
-  on:click|preventDefault="{() => update({ value, selected: !selected })}"
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:keydown
-  on:keydown="{(e) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      update({ value, selected: !selected });
-    }
-  }}"
 >
   <span class:bx--tile__checkmark="{true}">
     <CheckmarkFilled16

tests/SelectableTile.test.svelte

@@ -3,7 +3,13 @@
 </script>
 
 <SelectableTileGroup legend="Service pricing tiers">
-  <SelectableTile value="0" checked>Lite plan</SelectableTile>
+  <SelectableTile value="0" selected>Lite plan</SelectableTile>
   <SelectableTile value="1">Standard plan</SelectableTile>
   <SelectableTile light value="2">Plus plan</SelectableTile>
 </SelectableTileGroup>
+
+<SelectableTileGroup light legend="Service pricing tiers">
+  <SelectableTile value="0" selected>Lite plan</SelectableTile>
+  <SelectableTile value="1">Standard plan</SelectableTile>
+  <SelectableTile value="2">Plus plan</SelectableTile>
+</SelectableTileGroup>

types/Tile/SelectableTile.d.ts

@@ -62,10 +62,11 @@ export default class SelectableTile {
     default: {};
   };
 
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }