fix(list-box): remove stopPropagation clikc modifier

docs/src/pages/framed/ComboBox/MultipleComboBox.svelte

@@ -0,0 +1,41 @@
+<script>
+  import { ComboBox } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let comboBox1_selectedIndex = -1;
+  let comboBox2_selectedIndex = -1;
+
+  const formatSelected = (i) => (items[i] ? items[i].text : "N/A");
+
+  $: primary = formatSelected(comboBox1_selectedIndex);
+  $: secondary = formatSelected(comboBox2_selectedIndex);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<ComboBox
+  bind:selectedIndex="{comboBox1_selectedIndex}"
+  titleText="Primary contact"
+  placeholder="Select primary contact method"
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<ComboBox
+  bind:selectedIndex="{comboBox2_selectedIndex}"
+  titleText="Secondary contact"
+  placeholder="Select secondary contact method"
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>

docs/src/pages/framed/Dropdown/MultipleDropdown.svelte

@@ -0,0 +1,41 @@
+<script>
+  import { Dropdown } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let dropdown1_selectedIndex = 0;
+  let dropdown2_selectedIndex = 1;
+
+  const formatSelected = (i) => (items[i] ? items[i].text : "N/A");
+
+  $: primary = formatSelected(dropdown1_selectedIndex);
+  $: secondary = formatSelected(dropdown2_selectedIndex);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<Dropdown
+  titleText="Primary contact"
+  bind:selectedIndex="{dropdown1_selectedIndex}"
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<Dropdown
+  invalid="{dropdown1_selectedIndex === dropdown2_selectedIndex}"
+  invalidText="Secondary contact method must be different from the primary contact"
+  titleText="Secondary contact"
+  bind:selectedIndex="{dropdown2_selectedIndex}"
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>

docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { MultiSelect } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let multiselect1_selectedIds = ["0"];
+  let multiselect2_selectedIds = ["1", "2"];
+
+  const formatSelected = (i) =>
+    i.length === 0
+      ? "N/A"
+      : i.map((id) => items.find((item) => item.id === id).text).join(", ");
+
+  $: primary = formatSelected(multiselect1_selectedIds);
+  $: secondary = formatSelected(multiselect2_selectedIds);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<MultiSelect
+  titleText="Primary contact"
+  bind:selectedIds="{multiselect1_selectedIds}"
+  label="Select contact methods..."
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<MultiSelect
+  titleText="Secondary contact"
+  bind:selectedIds="{multiselect2_selectedIds}"
+  label="Select contact methods..."
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>